Kendo UI Grid:页面上是否可以有多个网格而没有元素ID冲突?

时间:2012-12-13 22:21:36

标签: grid kendo-ui

页面上是否可以有多个Kendo UI网格? 编辑:网格必须同时可见。

对于我过去尝试过的一些jQuery网格,在页面上不可能有多个网格实例,因为网格分配给其子DOM元素的ID没有以网格ID为前缀;在页面上有多个网格会创建两个或多个具有相同ID的DOM元素。

2 个答案:

答案 0 :(得分:4)

是的,我已经在我的项目中实现了这个,没有提到你提出的任何问题。我在一页上有3个网格。

更新:基本小部件元素具有您自己分配的任何ID。至于子元素,它们不使用ID,而是使用数据属性。我还没有'在整个网格中看到一个ID。以下是我的某个网格中表头如何显示的示例:

<thead class="k-reorderable" data-role="reorderable">
<tr>
<th class="k-header" data-title="Service name" data-field="Name" role="columnheader" data-role="sortable">
<a class="k-link" href="#">Service name</a>
</th>
<th class="k-header" data-title="Lasting time" data-field="LastingTime" role="columnheader" data-role="sortable">
<a class="k-link" href="#">Lasting time</a>
</th>
<th class="k-header" data-title="Price" data-field="Price" role="columnheader" data-role="sortable">
<a class="k-link" href="#">Price</a>
</th>
</tr>
</thead>

数据行使用UID来区分自己,这里是另一个例子:

<tr class="k-alt" role="row" data-uid="f2cd4f59-8492-4616-8fc6-5d65ec466437">
<td role="gridcell">Test</td>
<td role="gridcell">01:00:00</td>
<td role="gridcell">500</td>
</tr>

我建议您查看http://demos.kendoui.com/上的示例,并检查网格生成的html以获取更多详细信息。

我认为您不应该直接通过DOM访问特定的子元素。我建议坚持使用小部件API,这就是它的原因。

希望这有帮助!

答案 1 :(得分:1)

哦,是的!我们的页面确实有数百个。

但更准确地说,我们按需加载大部分。首先,通过查看Kendo TabControl,这非常容易。

这是通过动态分配名称的部分加载它们的许多方法中的“一个”。我们甚至有一个案例,我们使用GUID。

@using Kendo.Mvc.UI
@model PeopleViewModel
@{
    Layout = null;
}
@(Html.Kendo().Grid<PersonQualificationModel>()
    .Name("QualificationEditGrid_" + Model.PersonId)
    .HtmlAttributes(new { style = "clear: both;" })
...

如果您允许编辑。如果您尝试同时编辑多个网格(如果它们具有相同类型的数据),则会发生冲突。在此示例中,如果您尝试同时在不同的网格中编辑两个限定条件,则会导致问题。

编辑:

如果您知道您将拥有N个具有相同数据类型的网格,则可以制作N个模型并唯一地命名其属性,并在每个网格上使用每个不同的模型。这将解决您的碰撞问题。这甚至可能不是你要问的。