0

我正在体验 Kendo UI 框架的边缘案例。具体来说，我正在使用Kendo Web UI API 文档中记录的Grid 'Select' 方法。

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 中只有一个网格。

在同一页面上使用两个剑道网格并使用网格选择 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
          });
4

1 回答 1

2

根据@Basti 的反馈，可以通过直接在 jQuery 选择器中使用网格 ID 来处理正确的网格。例如。("#gridShizzle td:eq(0)");而不是("#td:eq(0)");. 尽管如此，根据 Kendo UI 文档，这仍然不能像我预期的那样起作用。在这里，它表明该方法在已经指定 kendoGrid 的情况下可以正常工作。

于 2013-10-24T08:20:52.663 回答