kendo ui grid with two tables - header and data

3
votes

I was trying to use the Kendo Grid UI control.

I am using the binding from Javascript with few template columns.

When the HTML is generated it gets two tables, one for header and one for body. This becomes hard for accessibility, can someone please guide me how do I set to generate only one table with header and data in it.

1
kendo-uikendo-gridkendo-asp.net-mvc
Can you please provide a little more detail. - Matthias Steinbauer
Please post some code so that we can help better - veena panakanapalli
Show an example of what you are currently doing. - whipdancer
@veenapanakanapalli Html Code: <table id="grid"> <thead><tr> <th data-field="name">Name</th><th data-field="id">Id</th></tr></thead><tbody> </tbody></table> JS Code: $("#grid").kendoGrid({height: 550, sortable: true, dataSource: { data: [{ "name": "test1", "id": "12" }, { "name": "test2", "id": "23" }] } }); If you check the rendered code the HTML will have two table i.e k-grid-header and k-grid-content - Mahesh Kumar
@MatthiasSteinbauer : Provided more details in prev comment - Mahesh Kumar

1 Answers

2
votes

This issue is caused by setting grid to be scrollable. Scrollable property in Kendo UI for jQuery is true by default so you need to explicitly set it false.

If you are using Kendo UI for ASP.NET MVC then you have to remove GridBuilder's .Scrollable() method call.