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.

Resizing a Grid

Thread ID:

Created:

Updated:

Platform:

Replies:

119707 Jul 23,2015 09:36 AM Jul 27,2015 06:28 AM JavaScript 1
loading
Tags: ejGrid
Danial Clements
Asked On July 23, 2015 09:36 AM

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 [Syncfusion]
Replied On July 27, 2015 06:28 AM

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


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.

;