Resizing a Grid

[Danial Clements]

Hi.  I'm currently evaluating ejGrid as a potential replacement for our existing grid system in a business intelligence application.  Our application consists of individual widgets that contain either charts or grids containing data.  These widgets can be moved and resized by the user.

I currently have an ejGrid setup with about 1,000 rows of dummy data with scrolling and virtual scrolling enabled.  Based on what I can see, the width/height of your grid when using the scroller is dependent on the width/height passed into the scrollSettings object at instantiation.  Then the container is resized I call a function called reflow which is setup as follows:

reflow: function () {
    var scrollObject;
    if (this.grid) {
        this.grid.option.call(this.grid, 'model.scrollSettings', {
            width: this.getCalculatedWidth(),
            height: this.getCalculatedHeight()
        });

        try {
            scrollObject = this.grid.getScrollObject();
            scrollObject.refresh();
        } catch (e) {
            console.error("Error getting grid scroll object", e);
        }
    }
}

The getCalculatedHeight function takes the current height of the container and subtracts the outerHeight of the .e-gridheader, e-groupdroparea, and .e-pagerstatusbar classes in the group.  This works, however I'm running into two issues:

1. When the grid is resized horizontally to less than 100px, scrolling causes the column header widths to be less than the content column widths.  Calling the above code will fix this issue until scrolled again.  See attached image for example.
   
2. The 'option' method on the grid object is undocumented.  The above fix feels hacky.

Has anyone else ran into these issues?

Attachment: ejGrid_Issues_28b4d4e5.zip

[Balaji Marimuthu]

Hi Danial,

Thanks for using Syncfusion Products.

Query:#1 When the grid is resized horizontally to less than 100px, scrolling causes the column header widths to be less than the content column widths.  Calling the above code will fix this issue until scrolled again.  See attached image for example.

We have created a sample with 1000 rows and enabled the Virtual Scrolling. In resized function we have called the reflow method, but unable to reproduce the reported issue while resizing. So could you please provide following details?

1.       Share us the scenario to reproduce the reported issue.

2.       Are you overriding any custom CSS in Grid or modified grid row height manually?

3.       Share your Essential Studio and browser version details.

4.       Share your sample or modify the attached sample to be the issue reproducible one.

Please find the sample in following link:
Sample: Sample

If we misunderstood your requirement or we did the scenario wrongly kindly provide more information about this issue, that will be helpful to find the cause of issue and provide better solution as the earliest.

Query:#2 The 'option' method on the grid object is undocumented.  The above fix feels hacky.

You can enable the Grid property using ‘option’ method .  Please refer the documentation in following link.

http://helpjs.syncfusion.com/js/api/ejgrid#members:columns


Please let us know if you have any queries.

Regards,
Balaji Marimuthu