<div> <table id="grid1"> ... </table> <table id="grid2"> ... </table></div><script> $(document).ready(function() { $("#grid1").kendoGrid({ height: 200, scrollable: false }); $("#grid2").kendoGrid({ height: 200, scrollable: false }); });</script>What is missing or otherwise causing the style to fail? Thanks
I am prototyping this in the following jsFiddle: http://jsfiddle.net/raltman/wcD28/13/
3 Answers, 1 is accepted
The reason for the problem is described in our documentation - you have no data-field attributes and spaces in the header cells:
http://docs.kendoui.com/getting-started/web/grid/walkthrough#grid-creation-from-an-html-table
Dimo
Telerik
%20cropped.jpg)
Rank 1
I am confused as to what purpose the data-field attribute serves since the content of the data is contained within the table structure itself. In fact, since I am, in effect, creating a pivot table, there really isn't a field to which I can point the data-field attribute.
I removed the spaces from the header row (below) to no effect.
<thead> <tr> <th>Hour</th> <th>10AM</th> <th>11AM</th> <th>12PM</th> <th>1PM</th> <th>2PM</th> ... </tr></thead>Although the Grid is created from a populated table, the widget has an active Kendo UI DataSource instance, which is based on the table data. This is used for subsequent data operations. The data-field attributes are used for the Kendo UI DataSource field names. If the attributes are not present, the table header content is used. However, the header cell content does not meet the requirements listed at:
http://docs.kendoui.com/api/web/grid#configuration-columns.field
I have updated the previously provided documentation to prevent further confusion.
http://docs.kendoui.com/getting-started/web/grid/walkthrough#grid-creation-from-an-html-table
On a side note, the Grid doesn't know that it is created from a pivot table, so it works in the same fashion, as with an ordinary table.
Dimo
Telerik