Two grids on same scrolling div -- second one is missing Kendo styling

[Robert]

I have two grids on a scrolling div.

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

Each div is initialized via tables using the standard grid.KendoGrid({...}) method; however, only one of the grids is styled correctly.
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/

[Dimo]

Hello Robert,

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

Regards,
Dimo
Telerik

[Robert]

"The table can now describe the entire structure of the grid. The field that the column is bound to in the data set, is specified in the data-field attribute of each th element. Using data-field attributes is highly recommended, otherwise the header cells should not contain spaces and special characters, and should not be empty."

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>

Please let me know what I can do to work around this issue.

[Dimo]

Hello Robert,

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.

Regards,
Dimo
Telerik