Grid scroll width and height settings change after perform filtering

[Taweesak Upala]

I have a grid with filtering and scrolling enabled as below

<ej:Grid ID="grdVendor" runat="server" IsResponsive="true" EnableResponsiveRow="true"

          GridLines="None" 
          AllowScrolling="true" 
          AllowResizing="True" 
          AllowTextWrap="false"
          AllowSorting="true" 
          AllowFiltering="true"
          EnableHeaderHover="true">
          <FilterSettings FilterType="Excel"></FilterSettings>
          <EditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" AllowEditOnDblClick="false" ShowDeleteConfirmDialog="true" EditMode="InlineForm" />
          <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel,excelExport,wordExport,pdfExport"></ToolbarSettings>
          <ScrollSettings Height="450" Width="100%" EnableTouchScroll="true" ScrollerSize="20"></ScrollSettings>
          <ClientSideEvents QueryCellInfo="OnQueryCellInfo" EndAdd="endAdd" EndEdit="endEdit" EndDelete="endDelete"  ActionComplete="complete" />
           <Columns>
                     <ej:Column Field="No" HeaderText="No." HeaderTooltip="No." IsPrimaryKey="true" Width="120"></ej:Column>
                     <ej:Column Field="Name" HeaderText="Name" HeaderTooltip="Name" Width="250"></ej:Column>
                     <ej:Column Field="Search_Name" HeaderText="Search Name" HeaderTooltip="Search Name" Width="220"></ej:Column>
                     <ej:Column Field="Address" HeaderText="Address" HeaderTooltip="Address" Width="250"></ej:Column>
                     <ej:Column Field="Address" HeaderText="Address 2" HeaderTooltip="Address 2" Width="250"></ej:Column>
                     <ej:Column Field="Phone_No" HeaderText="Phone No." HeaderTooltip="Phone No." Width="100"></ej:Column>
                     <ej:Column Field="Fax_No" HeaderText="Fax No." HeaderTooltip="Fax No." Width="100"></ej:Column>
                     <ej:Column Field="Balance_LCY" HeaderText="Balance (LCY)" HeaderTooltip="Balance (LCY)" Width="150" TextAlign="Right" DataType="Decimal" Format="{0:n2}" AllowEditing="false"></ej:Column>
            </Columns>

</ej:Grid>

First time the data was loaded, the scroll width and height fine 

After perform filtering

Even if I clear all filter, the scroll width and height still the same

Please help :(

[Prasanna Kumar Viswanathan]

Hi Upala, 

Thanks for contacting Syncfusion support. 

In our sample we checked with your code example the scroll width and height is different after we clear the filter. 

Find the screenshots: 

First time the data was loaded : 

 

After perform filtering: 

 

After clearing the filter : 

 

In your code example we found that you have enable isResponsive property. To make the grid responsive, we have to include the minwidth property in your sample. The minwidth property  is used to set the minimum width of the responsive grid. If the grid is less than the minwidth then the scrollbar will be displayed to maintain the minimum width. We suspect that it may be the root cause of the issue. So, please include the minwidth property in your sample. 

 

In your code example we also found that you have enable EnableResponsiveRow property. This property is used to view the grid in Mobile Layout. So, did you face the issue when the grid render in mobile view?. 

 

After include the minwidth property, if you still face the same issue please provide the following details. 

 

1. In this update we unable to view your screenshots. Can you please re-attach your screenshots? 

 

2. Essential Studio Version. 

 

3. If Possible, reproduce the issue in the attached sample. 

 

4. Video demo of the issue. 

 

Sample: http://www.syncfusion.com/downloads/support/forum/125286/ze/Sample309371950 

 

Regards, 

Prasanna Kumar N.S.V 

[Taweesak Upala]

Hi Kumar,

The "MinWidth" property fixed my scroll size issue as you mentioned. But, I have another filtering issue when I view the web page in mobile device. Every time I perform filter (or clear filter) on any column, all data row and horizontal scroll bar disappeared. And I found that if I click on column header (perform sorting), everything comes back. Otherwise, It works fine on desktop browser.

- My Essential Studio Version is 14.2.0.26 

- Video demo of the issue was attached.

Regards,

Taweesak Upala

Attachment: Video_901d4470.zip

[Prasanna Kumar Viswanathan]

Hi Upala, 

We can reproduce the mentioned issue in our sample. A support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates.  

 

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents  

 

Regards, 

Prasanna Kumar N.S.V