将Kendo Grid选定项目传递到Kendo Window

Question

我有一个带有可编辑记录的Kendo Grid：

当用户点击编辑按钮时，会打开一个Kendo窗口，其中包含一个用于编辑记录的表单。

我通过从控制器方法填充Kendo Window来实现这一目标，该方法通过webservice获取所选记录的数据：＆lt; - 这是我想要避免的。相反，我希望从表中直接获取数据并将其放入Kendo窗口内的输入字段中，而无需任何其他处理或html调用。数据已经在桌面上，我只是不知道如何将它发送到Kendo Window输入。

以下是一些代码：

单击编辑按钮后调用的javascript函数：

function openEdit() {
    var window = $("#editWindow").getKendoWindow();
    window.refresh({
        url: '@Url.Action("_EditForm", "Controller")'
    });
    window.center().open();
}

视图包含部分视图调用：

@Html.Partial("_EditWindow")

被叫局部视图包含Kendo窗口：

@(Html.Kendo().Window()
    .Name("editWindow")
    .Modal(true)
    .Events(e => e.Open("drawWindow").Close("refresh").Refresh("hideLoading"))
    .Iframe(true)
    .Visible(false)
    .Title("Edit Record")
)

如何将表格选定行的数据传递给Kendo窗口？

修改

我知道如何从javascript中获取所选记录的值：

var grid = $("#grid").data("kendoGrid");
var selectedItem = grid.dataItem(grid.select());

我只是不知道如何将它们传递到Kendo Window输入。

Answer 1

我找到了解决问题的方法。我现在将所选模型从视图发送到控制器。我用奇妙的JSON.stringify来实现它。

function onChange() {
    if (this.dataItem(this.select()) != null) {
        var rowModel = this.dataItem(this.select());
        // gets the model of the selected item in the grid

        $.ajax({
            url: 'sendGridRecord',
            type: "POST",
            data: JSON.stringify(rowModel),
            contentType: 'application/json'
        });
    }
}

Answer 2

您可以根据需要定义局部视图，并在编辑按钮上的kendow窗口上进行渲染click.i.e

@(Html.Kendo().Window().Name("myWindow")
      .Content(Html.Partial(@Url.Content("~/Views/_EditWindow.cshtml")).ToString())
      .Visible(false).Title("XYZ").Modal(true).Actions(actions => actions
          .Custom("custom")
          .Minimize()
          .Maximize()
          .Close()
      ).Resizable().Draggable())


function openEdit() {
//Open the kendow window here.
//Get the seleceted item
var grid = $("#grid").data("kendoGrid");
var selectedItem = grid.dataItem(grid.select());
//populate the partial view fields using the selectedItem variable like
$('#name').val(selectedItem.Name);
}

Answer 3

您可以使用这两种方法来传递Kendo（）。Grid（）所选的行数据：

方法I：

.ToolBar(toolbar =>
    {
        toolbar.Template(@<text>
            <div class="toolbar">
                @(Html.Kendo().Button()
                    .Name("myBtn")                        
                    .HtmlAttributes(new { type = "button", @class = "k-primary k-button k-button-icontext", onclick = "callActionBySelectedRowId('#GridMaster')" })  
                    .Content("Add New")
                )
            </div>
        </text>);
    })

function callActionBySelectedRowId(grid) {
    var grid = $(grid).data('kendoGrid');
    id = grid.dataItem(grid.select()).ID;
    window.location.href = '@Url.Action("YourAction", "YourController")/' + id;       
}

方法II：

查看：

@(Html.Kendo().Grid<KendoMVCWrappers.Models.Person>().Name("persons")
    .DataSource(dataSource => dataSource
        .Ajax()
                .Model(model =>
                {
                    model.Id(m => m.PersonID);

                })
            .Read(read => read.Action("GetPersons", "Home"))
            .Update(up => up.Action("UpdatePerson", "Home"))
    )
    .Selectable(s => s.Mode(GridSelectionMode.Multiple))
    .Columns(columns =>
    {
        columns.Bound(c => c.BirthDate);
        columns.Bound(c => c.Name);
        columns.Command(cmd => cmd.Edit());
    })
    .Pageable()
    .Sortable()
)

<input type="button" id="btn" name="name" value="send to Server!" />




<script type="text/javascript">
   $(function () {
       $('#btn').click(function () {
           var items = {};
           var grid = $('#persons').data('kendoGrid');
           var selectedElements = grid.select();

           for (var j = 0; j < selectedElements.length; j++) {
               var item = grid.dataItem(selectedElements[j]);
               items['persons[' + j + '].Name'] = item.Name;
                items['persons[' + j + '].PersonID'] = item.PersonID;
           }

           //If you want to pass single item parameter use this and comment out "for loop" & use the second "data" line below:
           //var singleItem = grid.dataItem(selectedElements[0]);

           $.ajax({
               type: "POST",
               data: items,
               //data: { ID: singleItem.ID }, //for passing single item parameter 
               url: '@Url.Action("Test","Home")',
               success: function (result) {
                   console.log(result);
               }
           })
       })
   })

的控制器：

public ActionResult Test(Person[] persons)
{
    return Json(persons);
}

注意：如果无法呈现从Controller调用的View，请使用window.location.href而不是$ .ajax

使用如下的javascript函数

<script type="text/javascript">
    $(function () {
        $('#btn').click(function () {
            var items = {};
            var grid = $('#persons').data('kendoGrid');
            var selectedElements = grid.select();
            var item = grid.dataItem(selectedElements[0]);

            window.location.href = '@Url.Action("YourAction", "YourController")/' + item.ID;             
        })
    })
</script>