Question

我正在尝试通过复选框选择行，并在单击“提交”按钮时将这些选定的行及其ID发送到另一个网格。换句话说，充当某种过滤器。

我已联系Telerik的支持团队，并建议您采取以下步骤以使其正常运行：

使用Grid的 Select（）方法获取所选行
循环通过他们＆amp;使用 dataItem 方法
将它们保存到数组中
销毁网格
通过设置数据数据

以下是JSBin上的示例，其中显示了我的想法。

我不确定从哪里开始诚实。如果有人能指出我对任何有用的资源或指南的正确方向，我将非常感激。谢谢！

Answer 1

假设您正在使用RadGrid，请确保您已启用客户端选择，您会看到如下内容：

   <ClientSettings>
       <Selecting AllowRowSelect="True" />
       <ClientEvents OnRowSelected="RowSelected" />
    </ClientSettings>

在输入按钮上，确保按如下方式调用JS方法：

  <input onclick="GetSelected();" .... >

您的JS代码可能如下所示：

  function GetSelected() {
      var grid = $find("<%=Your Grid's ClientID Here%>");
      var MasterTable = grid.get_masterTableView();
      var selectedRows = MasterTable.get_selectedItems();  // 1. Get the selected rows. The selected item can be accessed by calling the get_selectedItems() method of the GridTableView client-side object. 
      for (var i = 0; i < selectedRows.length; i++) {
        var row = selectedRows[i];
     // This is where you would have to insert it in a collection so that you can bind it to another grid... You will need to call .Rebind() once you assign the new datasource to the other grid.
      }

希望这会给你一些想法..如果你遇到困难我可以看看是否可以找到任何关于将行插入其他网格的例子。

Answer 2

检查此代码

HTML

<div id="grid1"></div>      
<input type="button" value="Submit" onclick="Move()" />
<div id="grid2" ></div>

脚本

<script>
        $(document).ready(function() {

            var data1 = [
         { id: 1, rating: 3, year: 1997, title: "Rock" }
        , { id: 2, rating: 5, year: 1999, title: "X-Man" }
        , { id: 3, rating: 4, year: 2011, title: "World War Z" }
    ];

            var grid1=$("#grid1").kendoGrid({
                sortable: true
                        , silectable: true
                        , selectable: "multiple row"
                        , filterable: true 
                        , pageable: true
                        , columns: [
                        { template: "<input type='checkbox' class='checkbox' />", width: "40px" }
                         ,{ field: "id", title: "Id", filterable: false }
                       , { field: "rating", title: "Rating", filterable: false }
                      , { field: "year", title: "Year", filterable: true, type: "string"}
                      , { field: "title", title: "Title" }
                        ]
                       , dataSource: { page: 1,
                           pageSize: 5,
                           data: data1
                       }

                   }).data("kendoGrid");
                   grid1.table.on("click", ".checkbox", selectRow);

            var data2 = [
         { id: 101, rating: 6, year: 2012, title: "The Impossible" }
        , { id: 102, rating: 8, year: 2013, title: "Escape" }
        , { id: 103, rating: 7, year: 2013, title: "Gravity" }
    ];
            $("#grid2").kendoGrid({
                sortable: true
                        , silectable: true
                        , selectable: "multiple row"
                        , filterable: true 
                        , pageable: true
                        , columns: [
                         { field: "id", title: "Id", filterable: false }
                       , { field: "rating", title: "Rating", filterable: false }
                      , { field: "year", title: "Year", filterable: true, type: "string"} 
                      , { field: "title", title: "Title" }
                        ]
                       , dataSource: { page: 1,
                           pageSize: 5,
                           data: data2
                       }

            });

        });

        function Move() {
            var grid1 = $("#grid1").data("kendoGrid");
            var rows = grid1.select();

            rows.each(function(index, row) {
                var selectedRow = grid1.dataItem(row);
                //-move to grid2
                var grid2 = $("#grid2").data("kendoGrid");
                var ins = { id: selectedRow.id, rating: selectedRow.rating, year: selectedRow.year, title: selectedRow.title }; //id=1,rating=9.2,year=1995,title="The Godfather"
                grid2.dataSource.insert(ins);
            });

            rows.each(function() {
                grid1.removeRow($(this).closest('tr'));
            });
        }

        function selectRow() {
            var checked = this.checked,
                row = $(this).closest("tr");
            if (checked) {
                //-select the row
                row.addClass("k-state-selected");

            } else {
                //-remove selection
                row.removeClass("k-state-selected");
            }
        }  
    </script>

这将有助于你：）

从一个网格中选择行＆amp;将它们传递给另一个网格

2 个答案: