We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Invalid grid size problem (or how to force complete grid re-rendering)

Thread ID:

Created:

Updated:

Platform:

Replies:

123942 May 2,2016 09:55 AM May 6,2016 02:33 AM ASP.NET MVC 3
loading
Tags: Grid
Vlatko Malovic
Asked On May 2, 2016 09:55 AM

I’ve created a sample project to demonstrate the problem I’m trying to solve. I have a grid that has no fixed width. All columns except one has initial fixed width and the one that has automatic width can clip text if the width is too small for the cell content. When I resize the browser the “auto width” column changes its width. When grid becomes to narrow the horizontal scroll bar is shown (that is desired behavior since I set a min width for the grid so that auto width column doesn’t disappear if the grid becomes too narrow). At the same time, I need to show more rows than that can fit in the grid's height and I don’t want to have vertical scroll bar.

Everything I mentioned works great as you can see in the example. The problem begins when the grid height is changed.

Here are the repro steps:

  1. Start the web project in full screen browser
  2. Shrink the browser in width and notice how grids shrink until minimum width is reached and horizontal scrollbar is shown
  3. Filter the grid by any column by any value (it is hardcoded to return 3 rows)
  4. Notice the grid shrinks in height as expected
  5. Clear the filter
  6. Notice that the grid hasn’t return to the right height but got vertical scroll bar instead. I would like to force refresh/re-render of the grid at this point but I’m not sure how to accomplish this

 Sizing problem is even worse when a grid is in a tab control. That one is harder to reproduce because it doesn’t break the grid always on the first try but repro steps would be:

  1. Maximize the browser and reload the page
  2. Go to the B tab
  3. Return to the A tab
  4. Change browser width so that the tabs change position thanks to the bootstrap
  5. Go back to the B tab
  6. Notice that grid shrinks so much that no data is visible
Any help is appreciated

Best regards,
Vlatko


Attachment: SyncfusionMvcApplication2_6fedf211.zip

Gowthami V [Syncfusion]
Replied On May 3, 2016 11:53 PM

Hi Vlatko, 
 
Thanks for contacting Syncfusion support. 
 
Query 1: Notice that the grid hasn’t return to the right height but got vertical scroll bar instead. 
We have confirmed that the issue with “Vertical scroller is not refreshed after performing grid actions” is a known issue and we have fixed the issue in the version 14.1.0.46 . 
Please follow the below steps to upgrade to 14.1.0.41 to 14.1.0.46. 
1.       Download and install the Essential Studio 14.1.0.46 from the below link. 
2.       Replace the Syncfusion dlls, scripts, and css in your project from the following location. 
            Scripts and Css: C:\Program Files (x86)\Syncfusion\Essential Studio\XX.X.X.XX\JavaScript\assets 
Here XX.X.X.XX denotes the product version(14.1.0.46). 
 
Query 2: Notice that grid shrinks so much that no data is visible 
Initially, you have hidden the grid div and displayed it dynamically while binding data to grid. The width and height of parent element were not properly calculated while invoking the windowonresize method. The reason is the time delay for the grid element to change its dimension while dynamically displayed. 
While resizing the window, the proper width and height is not calculated for hidden grid elements. We can avoid this issue by invoking the “windowonresize” method in ItemActive event of the tab as follows, 
@{ 
        Html.EJ().Tab("tabs") 
. . . . 
.ClientSideEvents(eve => { eve.ItemActive("active");}) 
. . . . 
} 
<script type="text/javascript"> 
    function active(args) 
    { 
        var id = $(args.activeHeader).find("a").attr("rel='nofollow' href") 
        var gridId = $(id).find(".e-grid.e-waitingpopup").attr("id");       
        setTimeout(function () { $("#" + gridId).ejGrid('windowonresize'), 0 });     
    } 
</script> 
 
While using above code example we have faced the issue that “The grid height is not refreshed when set as “auto”” and it has been fixed and included in the version 14.1.0.46 version Please upgrade to the version 14.1.0.46 using above steps. 
Regards, 
Gowthami V. 
 


Vlatko Malovic
Replied On May 5, 2016 05:18 AM

Great. It works perfectly. Thx.
Regards,
Vlatko

Gowthami V [Syncfusion]
Replied On May 6, 2016 02:33 AM

Hi Vlatko
  
We are happy to hear that your issue has been fixed. 
  
Get back to us if you need further assistance. 
  
Regards, 
  
Gowthami V. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;