Resize after databind

[Michael]

I am having an issue with the pivotgrid initially rendering to the browser size. It looks fine if I start out in full screen and then resize the browser as the pivotgrid resize event fires. My problem is when I start with a small screen resolution. The grid loads with its width set to match the width of the browser instead of rendering with a horizontal pivot scrollbar. The height also renders without the vertical scrollbar. Once I expand the browser to full and back to the small resolution everything looks fine. I believe this is due to the resize event firing before the pivotdatasource and pivotgrid have rendered the data on the initial load. Is there a way of resizing the pivotgrid once it has been rendered with async data?

[Georgi Krustev]

Hello Michael,

In general, the refresh method will trigger the re-sizing process of the widget. If this does not help, please provide more details that demonstrates the issue.

Regards,
Georgi Krustev
Telerik

 

 

[Michael]

I have tried adding the refresh method in my code and it seemed to create a javascript error that so far I have not been able to figure out. If you would like to see the page it can be seen at:

 https://test.neonet.org/matrix/web

I have also add a fiddle of the project here:

jsfiddle

When if first loads you will notice the horizontal scroll bar is not active to be used. If you resize the browser the window resize event will resize the pivotgrid the way it should. If you then filter on the service areas the scroll bar disappears again until a window resize event. So it seems to be a problem after a data bind. This leads me to two things I want to try and make happen:

 1) either find a place I can resize the pivotgrid after data bind and the subsequent painting of the widget with data on the page...or

 2)  load the data synchronously(not ideal) load the widget and data and refresh/resize the control

 However, I am not sure either one of these will be easily accomplished if at all.

 

Thanks,

Mike

[Georgi Krustev]

Hello Mike,

I moved the code into а Dojo demo as there were some issues with the HTTPS requests. It seems that the widget behaves as expected when window is resized (notice that I changed the code to use refresh method). Could you elaborate a bit more what is the desired behavior you are looking to achieve?

As a side note, you will need to call refresh method once the widget is data bound, not on page load.

Regards,
Georgi Krustev
Telerik

 

 

[Michael]

Well...I found the issue. While trying to debug why the refresh method was throwing errors, I completely dismantled my databound method and was rebuilding it line by line when I came across the following two lines:

$('.k-grid').css('height',"auto");
$('.k-grid-content').css('height',"auto");

 

So these css directives would only be set on data binding. That is why I could get it to work correctly on resize. Once I removed those lines, I was back to the desired functionality. Thanks for the help.