Question about append data on existing table.

[Kyriakos]

Hi,  i'm currently using a ajax call to append the TH and TD rows on a table template and then using the table ID i use the kendo grid to stylize it. 

my template is the following :
<table cellpadding="0" cellspacing="0" border="0" class="display" id="data-table{id}" width="100%" role="grid" data-role="grid">
<thead>
<tr id="append_head{id2}">

</tr>
</thead>
<tbody id="append_data{id3}">

</tbody>
</table>

if i hard code data into the head TR and in the tbody and then append the table on the HTML  and then use the :
$("# data-table" + id).kendoGrid({
   });
it works flawlessly .

But if i attach the TH and the TD rows using ajax and then  then append the table on the HTML  and then use the :
$("# data-table" + id).kendoGrid({
   });

then the fuctionally of the table is broken and also is not displaying correctly.

Can you please tell me if im doing something wrong? or missing something?

thanks

[Alexander Valchev]

Hello Kyriakos,

Thank you for getting in touch with us.

The problem you described is caused by the multiple initialization of the widget which is not supported. The Grid should be initialized only once. To add rows at a later point simply append the HTML to the Grid's tbody. In order to display they correctly you should set the corresponding CSS class names.

Here is a small example: http://jsbin.com/uripor/2/edit

Please note that each alternate row should have class k-alt. I hope this information will help.

Regards,
Alexander Valchev
the Telerik team