Grid "pageable", "sortable" and "resizable" properties don't inside a TabStrip

[Dorian]

Hi,

I'm creating a dynamic tabstrip that generates a grid with data in each tab depending on the JSON data.
The JSON data return tables with the "TableName" and "TableData". For each table in the JSON data, a new tab is created with a grid that shows the table data.
The problem I have is that the grid properties "pageable", "sortable" and "resizable" don't work, probably I missing something or I'm creating the grid in a wrong way.
I created a jsFiddle example with my code: Dynamic TabStrip with Grids

I hope someone could help me with this problem, thanks!

Dorian

[Alexander Valchev]

Hi Dorian,

I already replied to your question in the support ticket that you submitted on the same subject. For convenience I am pasting my reply here as well so the other users who are following the thread can read it.

The problem is connected with the way grid components are created.

function getGrid(data) {
    var grid = $('<div />').kendoGrid({

    });
    return grid[0].outerHTML;
}

Simply taking the html of the widget and placing it somewhere else will not work. Instead you should insert a standard <div> element as a content of the tab and build the widget from it. In order to avoid potential layout issues please build the Grid when the corresponding tab is activated.

I hope this information will help.

Regards,
Alexander Valchev
the Telerik team

[Dorian]

Alexander,
Yes, thanks for your great answer. I posted here too because I pretty sure someone else would have the same problem. Here is the solution with the fix applied:

http://jsfiddle.net/doriansao/Ey89R/

Thanks