首页 文章

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

提问于
浏览
2

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

enter image description here

当用户单击编辑按钮时,将打开一个Kendo窗口,其中包含用于编辑记录的表单 .

enter image description here

我通过从控制器方法填充Kendo窗口来实现这一点,该方法通过webservice: <- this is what I want to avoid 获取所选记录的数据 . 相反,我希望从表中直接获取数据并将其放入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输入 .

3 回答

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

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

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

    您可以使用这两种方法来传递Kendo() . Grid()的选定行数据:

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

    Method II:

    View:

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

    Controller:

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

    Note: 如果无法呈现从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>
    

相关问题