javascript - 边缘情况 : Kendo Web UI Grid 'Select' method not working properly

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 网格并使用网格选择 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 的情况下可以正常工作。