Grid height

Hello,

I am trying to add grid height property, but I can not get it correctly. If I set it with percents it looks like good, I can see it in html (Picture 1) but if I set it with pixels I can not see it in html (Picture 2). I need to count it pixels for window resize and virtual scrolling pusposes. How can I set it to see in html correctly? When I set it in pixels, only content height changes on resize and because of virtual scrolling I get wrong results in grid with many empty space.

Picture 1:


Picture 2:



5 Replies

VA Venkatesh Ayothi Raman Syncfusion Team May 21, 2018 12:42 PM UTC

Hi AC, 

Thanks for using Syncfusion products. 

We can set the Grid height using height property in Grid. If so, the corresponding height will be set for Grid content only. This is the default behavior of the Grid. As from your query, we suspect that do you want to set Grid as responsive for parent container. If so, we suggest you refer the following Help documentation and sample for more information, 


If we misunderstood your requirement then could you, please provide more information about your requirement? 


Regards, 
Venkatesh Ayothiraman. 



UN Unknown Syncfusion Team May 21, 2018 03:09 PM UTC

Hello,

thank you for your answer.

I have one more question about sizes.

In my grid I am using row virtualization. As in documentation (https://ej2.syncfusion.com/16.1.37/angular/documentation/grid/virtualization.html#row-virtualization) I am using property enableVirtualization = true. I am counting height and pageSize on window resize. As mentioned in limiations for virtualization (https://ej2.syncfusion.com/16.1.37/angular/documentation/grid/virtualization.html#limitations-for-virtualization), my pageSize setting is twi times as big as I can see records in my grid by setted height.

When data is loaded for the first time, I am getting correct results as it should be. When I am clicking on scroll bar, the bar is moving, but I am not getting any new data (only data old data is displayed and displayed again).

When I am clicking on bar and moving it with mouse, the same data is also displayed and displayed again. When I stopped, I am getting new data from my WebAPI (I get new correct object, the new data is displayed), but I am getting another problem - on row click event I am getting no data about row.

Also - when I resize my grid - I am getting new object with data from my WebAPI, but the grid shows nothing...

I am adding video, where you can see how this grid is working with my mentioned problems.

My .html file:
<ejs-grid [enableVirtualization]=true [pageSettings]="pageSettings" [height]="height" rowHeight="27"></ejs-grid>

My .ts file:
public height;
public pageSettings: PageSettingsModel;

constructor(private resizeService) {
     this.resizeService.onResize.subscribe(sizes => { this.Resize(sizes) })
}

private Resize(sizes) {
     // Set grid height
     this.height = sizes.height;
     // Set pageSize (grid height / row height * 2) - (from limitations: The page size provided must be two times larger than the number of visible rows in the grid. If the page size is failed to meet this condition then the size will be determined by grid.)
     this.pageSettings = { pageSize: Math.ceil(this.height / 27 * 2) }
}

Maybe you know what am I doing wrong?

Attachment: VirtualGrid_56b7cb7f.zip


VA Venkatesh Ayothi Raman Syncfusion Team May 24, 2018 03:53 AM UTC

Hi AC, 
 
Thanks for the update. 
 
We are able to reproduce the reported issue at our end and we have considered this “Paging request doesn’t send to server side while press the up/down arrow keys with remote data” as bug as well as logged the defect report for this. This fix will be included in our upcoming Volume 2,SP1 release. Until we appreciate your patience. 
 
Regards, 
Venkatesh Ayothiraman. 



UN Unknown Syncfusion Team June 25, 2018 11:40 AM UTC

Hello,

when can I expect these changes?


VA Venkatesh Ayothi Raman Syncfusion Team June 27, 2018 03:49 AM UTC

Hi AC, 
 
Thanks for the update. 
 
 
We are glad to announce that our Essential Studio 2018 Volume 2 Release v16.2.0.41 is rolled out and is available for download under the following link. 
 
We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.  
 
This Syncfusion Essential Volume 2, 2018 rolled out on last Monday June 25,2018. For this reason, Volume 2, SP1 release tentatively re-scheduled to month of July, 2018. So, corresponding issue will be included in Volume 2, SP1 release as we promised earlier. Until we appreciate your patience. 
 
 
Regards, 
Venkatesh Ayothiraman. 


Loader.
Up arrow icon