This is a migrated thread and some comments may be shown as answers.

Rendered issue when contional show Kendo Grid.

1 Answer 12 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Daochuen
Top achievements
Rank 1
Iron
Veteran
Iron
Daochuen asked on 23 Feb 2021, 08:14 PM

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();

               }

    }

 

1 Answer, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 26 Feb 2021, 01:43 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
Daochuen
Top achievements
Rank 1
Iron
Veteran
Iron
Answers by
Ivan Danchev
Telerik team
Share this question
or