Rendered issue when contional show Kendo Grid.

[Daochuen]

Hi,

I have two Kendo grids in my MVC page,. Each of grid inside its own <div> block. I need show them based on returned data. I code this “SHOW” condition in databound event. But have rendered issue (See attached image) when do that. If I remove the conditions, both grids showed correctly. Could someone help for the issue? Thanks in advance.

 

    Function onDataBoundGrid1 (e) {     

if (e.sender._data.length > 0) {      

                               $("#grid1Div").show();

           else {

                                $("#grid1Div").hide();

               }

    }

 

   Function  onDataBoundGrid2 (e) {     

if (e.sender._data.length > 0) {      

                               $("#grid2Div").show();

           else {

                                $("#grid2Div").hide();

               }

    }

 

[Ivan Danchev]

Hi,

Appearance issues with the Grid and other more complex components (the Gantt for example) can occur, when they are initialized but are not visible on them page. This could result in incorrect dimensions calculations in these components, so the recommended approach in such cases is to readjust their layout with the resize() method. After showing one of the Grids, get a reference to it and call its resize method. For example:

$("#grid1Div").show();
var grid = $("#grid1Div").data("kendoGrid");
grid.resize();

I assume "grid1Div" is the name of the Grid. If it is not, replace it with the actual name.

Give this a try and let us know whether it resolves the appearance issue.

Regards,
Ivan Danchev
Progress Telerik