Question

Is it possible to have more than one Kendo UI grid on the page?
EDIT: The grids have to be visible simultaneously.

With some jQuery grids I’ve tried in the past, it was not possible to have more than one grid instance on a page because the IDs assigned by the grid to its child DOM elements were not prefixed with the grid id; having more than one grid on the page would create two or more DOM elements with the same ID.

Answer 1

Yes it is, I have implemented this in my project with none of the issues you mention. I had 3 grids in one page.

UPDATE: the base widget element has whatever ID you assign it by yourself. As for the child elements, they don’t use IDs, rather they use data- attributes. I havent’ seen a single ID in the whole grid I have. Here is an example of how a table header looks like in one of my grids:

<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>

The data rows use UIDs to distinguish themselves, here is anotoher example:

<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>

I suggest you just check out the examples on http://demos.kendoui.com/ and inspect the html the grid generates for more details.

I don’t think you should really access specific child elements directly through the DOM. Sticking to the widget API is what i suggest, and thats why its there.

Hope this helps!