Resize after databind

5 posts, 0 answers
  1. Michael
    Michael avatar
    3 posts
    Member since:
    Mar 2009

    Posted 27 Apr 2015 Link to this post

    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?
  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 29 Apr 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Michael
    Michael avatar
    3 posts
    Member since:
    Mar 2009

    Posted 30 Apr 2015 in reply to Georgi Krustev Link to this post

    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

  5. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 04 May 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Michael
    Michael avatar
    3 posts
    Member since:
    Mar 2009

    Posted 06 May 2015 in reply to Georgi Krustev Link to this post

    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.

     

Back to Top
Kendo UI is VS 2017 Ready