Javascript 将剑道网格所选项目传递到剑道窗口

我有一个剑道网格和可编辑的记录：

当用户单击编辑按钮时，将打开一个剑道窗口，其中包含一个表单来编辑记录

---

我通过控制器方法填充剑道窗口来实现这一点，该方法通过webservice获取所选记录的数据：您可以根据需要定义局部视图，并在单击编辑按钮时在剑道窗口上呈现

@(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);
}

---

您可以使用以下两种方法传递Kendo.Grid的选定行数据：

方法一：

注意：如果无法呈现从Controller调用的视图，请使用如下javascript函数，使用window.location.href而不是$.ajax

<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>

---

我找到了解决问题的办法。现在，我将所选模型从视图发送到控制器。我使用奇妙的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'
        });
    }
}

---

这里有一个非常详细的教程：@Bubavanhalen，谢谢你的回答。然而，我已经看到了，这不是我想要的。我想要一个定制的窗口和按钮，而不是现在的。哦。。对不起。。对于这种情况，可以使用编辑器模板。谢谢你的回答。我已经设法找到了解决问题的方法，我将在这里发布。我很高兴你已经解决了这个问题：我也希望这个方法和你使用的其他方法能够帮助将来遇到这个问题的其他人。因此，如果您发布您的解决方案，以便其他人可以从中受益，那将是一件好事。谢谢…如果您希望我可以通过解释控制器中如何将数据发送到剑道窗口来改进我的答案实际上，在我发布上述解决方案之前，我使用了这种方法，但它对我不起作用。我尝试了许多不同的方法，但都没有改变。因此，由于某种原因，使用ajax失败了。无论如何，如果你发布详细的信息，我会在下次尝试，我认为使用ajax会更好。再次感谢。

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

@(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);
}

.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;       
}

@(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);
}

<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>

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'
        });
    }
}