Using HTML table datasource to be the same for kendo grid

Question

I have a html table which populates with dynamic data, I want the same to be converted into Kendo Grid.

HTML Table:

<table>
   <thead>
   <tr>
     <th>Dynamic Column1 </th>
     <th>Dynamic Column2 </th>
     <th>Dynamic Column3 </th>
   </tr>
   </thead>
   <tbody>
   <tr>
     <td>Row 1 Cell 1</td>     
     <td>Row 1 Cell 2</td>     
     <td>Row 1 Cell 3</td>     
   </tr>
   <tr>
     <td>Row 2 Cell 1</td>     
     <td>Row 2 Cell 2</td>     
     <td>Row 2 Cell 3</td>     
   </tr>
   </tbody>
</table>

When I convert this table into Kendo Grid using the below code:

$("table").kendoGrid({resizable: true});

The data is getting repeated in row1 all columns, similarly for the other rows like:

All other grids in my application are KendoGrids. 2 to 3 grids I implemented as HTML tables as each of these cells are different partial views. (I have different partial views for boolean, Drodown, Text, datepicker, so I will be redirecting to respective partial views based on the input). I didn't get a solution to have these partial views inside .

Can some one guide how to convert this dynamic html table into KendoGrid with the same datasource? or it will be helpful if you can let me know how to bind partialviews in kendo grid MVC (using clientTemplate)?

What would you like to do? The kendo grid heavily depends on the datasource for a table, what are you allowed to change and what not? The only other way around that I might see, is a wrapper that takes your table and your data, and builds a datasource from the live data, and then converts your table into a kendogrid (although I might think to long about this). So what is your end goal? :) — Icepickle
Also, where might your datasource be that you are referring to? — Icepickle
Hi @Icepickle, I have 2 challenges here: (1). All other grids in my application are KendoGrids. 2 to 3 grids I implemented as HTML tables as each of these cells are different partial views. (I have different partial views for boolean, Drodown, Text, datepicker, so I will be redirecting to respective partial views based on the input) Earlier I couldn't get a solution to have these partial views inside <td> (2). I am unable to make this HTML table as resizable grid and having ellipsis for the <td> is becoming big hectic so I want to move to Kendo Grid — Sriks
Is there any reason you cannot use a datasource for this table? Cause you can set a template function for each column inside the Columns property of the kendogrid (it is true that all these columns have to be defined before you create your table, but as a workaround I used to add all potential columns to the grid and then chose to hide the columns that were not inside the active view of the grid). This way you can combine the templating with any potential dynamic input (I suppose you have some constraints...) — Icepickle
as Fruitbat said, it should actually work, I just tested it on a dojo here, and cannot reproduce your error: dojo.telerik.com/EYiGU — Icepickle

Fruitbat Fruitbat · Accepted Answer · 2016-03-02T17:11:11

The javascript posted

$("table").kendoGrid({resizable: true});

should work.

Perhaps this is a timing issue? Have you tried something like this:

$( document ).ready(function() {
    $("table").kendoGrid({resizable: true});
});

If you want a more direct solution (i.e. kendo grid directly from datasource rather than applied to generated table) then you need to explain more on how the dynamic table is generated.

Using HTML table datasource to be the same for kendo grid

1 Answers