Question

我正在体验Kendo UI框架的边缘情况。具体来说，我正在使用Kendo Web UI API documentation中记录的网格'选择'方法。

var gridWibble= $("#gridWibble").data("kendoGrid");
gridWibble.select("td:eq(0)");

var gridShizzle= $("#gridShizzle").data("kendoGrid");
gridShizzle.select("td:eq(0)");

出于通信目的，我将gridWibble称为第一个网格，因为它首先被定义并首先出现在DOM中。我将gridShizzle称为第二个网格，因为它是第二个定义的，在DOM中排在第二位。两个网格都使用正确的（和不同的）ID创建，并存在于DOM中。很明显，我有两个不同ID的网格，除了以下内容之外，它们的运行情况如下所示。

当我尝试在第二个网格中选择一个单元格时，如上面代码的（最后两行）所示，它在第一个网格（gridWibble）中进行选择。也就是说，它选择正确的单元格，但在错误的网格中这样做。显然我期望它在第二个网格（gridShizzle）中进行选择。顺便提一下，gridWibble选择代码按预期工作。

如果我从DOM中删除第一个网格（例如使用Chrome开发者工具）并在控制台中运行相同的代码，则会成功选择适当（且仅限）网格gridShizzle中的相应单元格。唯一的区别是DOM中现在只有一个网格。

当在同一页面上使用两个Kendo网格并使用Grid Select API方法时，其他人是否可以复制此内容？

编辑1

          gridWibble= $("#gridWibble").kendoGrid({
              dataSource: {
                  type: "json",
                  data: gridWibbleData,
                  autoSync: true,
                  pageSize: 500,
                  serverPaging: false,
                  serverFiltering: false,
                  serverSorting: false
              },
              columns : [
                  { field: "Pair", title: "Pair"}, 
                  { field: "D1", title: "1d"}, 
                  { field: "D5", title: "1w (5d)"},
                  { field: "D10", title: "2w (10d)"}, 
                  { field: "D20", title: "1m (20d)"}, 
                  { field: "D40", title: "2m (40d)"}, 
                  { field: "D60", title: "3m (60d)"}, 
                  { field: "D120", title: "6m (120d)"}, 
                  { field: "D240", title: "12m (240d)" }
              ],
              toolbar: kendo.template($("#gridWibbleTemplate").html()),
              pageable: true,
              change: gridChange,
              dataBound: onDataBound,
              selectable: "multiple cell",
              navigatable: true,
              filterable: true,
              sortable: true,
              reorderable: true,
              resizable: true,
              columnMenu: false
          });

          gridShizzle= $("#gridShizzle").kendoGrid({
              dataSource: {
                  type: "json",
                  data: gridShizzleData,
                  autoSync: true,
                  pageSize: 500,
                  serverPaging: false,
                  serverFiltering: false,
                  serverSorting: false
              },
              columns : [
                  { field: "Pair", title: "Pair"}, 
                  { field: "ON", title: "ON"}, 
                  { field: "W1", title: "1w"},
                  { field: "W2",  title: "2w"}, 
                  { field: "M1", title: "1m"}, 
                  { field: "M2", title: "2m"}, 
                  { field: "M3", title: "3m"}, 
                  { field: "M6", title: "6m"}, 
                  { field: "M9", title: "9m" },
                  { field: "Y1", title: "1y" }
              ],
              toolbar: kendo.template($("#gridShizzleTemplate").html()),
              pageable: true,
              change: gridChange,
              dataBound: onDataBound,
              selectable: "multiple cell",
              navigatable: true,
              filterable: true,
              sortable: true,
              reorderable: true,
              resizable: true,
              columnMenu: false
          });

Answer 1

根据@Basti的反馈，可以直接在jQuery选择器中使用网格ID来解决正确的网格问题。例如。 ("#gridShizzle td:eq(0)");而非("#td:eq(0)");。尽管如此，基于Kendo UI文档，这仍然无法实现。在这里，它表明该方法可以正常工作，已经指定了kendoGrid。

边缘案例：Kendo Web UI网格“选择”方法无法正常工作

1 个答案: