Missing Data with Wide Grid and Frozen Columns

Scenario:

Our EJ2 grid has many columns of data which means a horizontal scrollbar is present at the bottom of the grid, allowing users to scroll left and right to view all the data.

I have frozen the two left-most columns in our grid ("Edit" button column and "Order Number" column) so that users can maintain visibility of order numbers as they scroll to the right in the grid.

This was working correctly a few months ago (September 2020) but there is an issue now.

Issue:

The order number is now missing from the grid, and all data in the grid appears left-shifted by one column.  If I hide enough columns in the grid to make the horizontal scrollbar disappear, then the frozen column and its associated data displays correctly.  So it appears that the issue is somehow related to the additional columns that make the horizontal scrollbar at the bottom of the grid appear.

Here is the grid, with the relevant columns highlighted:

<ejs-grid id="DataGrid" allowReordering="true" allowExcelExport="true" allowPdfExport="true" toolbarClick="toolbarClick" toolbar="@(new List<string>() { "ExcelExport", "Search" })" dataBound="columnAutoFit" allowResizing="true" allowPaging="true" allowSorting="true" rowHeight="40" allowFiltering="true" allowGrouping="true" allowSelection="true">
<e-data-manager json="@Model" adaptor="RemoteSaveAdaptor" updateUrl="/App/Update"></e-data-manager>
<e-grid-filtersettings type="Menu"></e-grid-filtersettings>
<e-grid-selectionsettings type="Multiple"></e-grid-selectionsettings>
<e-grid-editsettings allowEditing="true" mode="Dialog" allowEditOnDblClick="false"></e-grid-editsettings>
<e-grid-pagesettings pageCount="10" pageSizes="true"></e-grid-pagesettings>
<e-grid-columns>
<e-grid-column field="ID" headerText="ID" visible="false" isPrimaryKey="true"></e-grid-column>
<e-grid-column field="Edit" headerText="Edit" commands="commands" allowResizing="false" allowFiltering="false" allowSorting="false" isFrozen="true" lockColumn="true"></e-grid-column>
<e-grid-column field="OrderNumber" headerText="Order Number" allowEditing="false" textAlign="Left" isFrozen="true" lockColumn="true" width="500"></e-grid-column>
<e-grid-column field="ReleaseVersion" headerText="Release Version" allowEditing="false" textAlign="Left"></e-grid-column>
<e-grid-column field="OrderStatus" headerText="Order Status" allowEditing="false" filter="@(new { type="CheckBox" })" textAlign="Left"></e-grid-column>
<e-grid-column field="ReprocessFlag" headerText="Reprocess Flag" allowEditing="true" editType="dropdownedit" edit="@(new { @params = new { dataSource = ViewBag.DropDownReprocessFlag, fields = new { text = "ReprocessFlag", value = "ReprocessFlag" } } })" filter="@(new { type="CheckBox" })" textAlign="Left"></e-grid-column>
<e-grid-column field="InforStatus" headerText="Infor Status" allowEditing="false" filter="@(new { type="CheckBox" })" textAlign="Left"></e-grid-column>
<e-grid-column field="InforMessage" headerText="Infor Message" allowEditing="false" textAlign="Left"></e-grid-column>
<e-grid-column field="BOMDestination" headerText="BOM Destination" allowEditing="true" editType="dropdownedit" edit="@(new { @params = new { dataSource = ViewBag.DropDownBOMDestination, fields = new { text = "BOMDestination", value = "BOMDestination" } } })" filter="@(new { type="CheckBox" })" textAlign="Left"></e-grid-column>
<e-grid-column field="PCL" headerText="PCL" allowEditing="false" filter="@(new { type="CheckBox" })" textAlign="Left"></e-grid-column>
<e-grid-column field="FormatNumber" headerText="Format Number" allowEditing="false" filter="@(new { type="CheckBox" })" textAlign="Left"></e-grid-column>
<e-grid-column field="Plant" headerText="Plant" allowEditing="false" filter="@(new { type="CheckBox" })" textAlign="Left"></e-grid-column>
<e-grid-column field="Model" headerText="Model" allowEditing="false" textAlign="Left"></e-grid-column>
<e-grid-column field="ModelType" headerText="Model Type" allowEditing="false" filter="@(new { type="CheckBox" })" textAlign="Left"></e-grid-column>
<e-grid-column field="CodeString" headerText="Code String" allowEditing="false" textAlign="Left" width="200"></e-grid-column>
<e-grid-column field="EngContentReview" headerText="Eng Content Review" allowEditing="false" textAlign="Left"></e-grid-column>
<e-grid-column field="ReadyForAgile" headerText="Ready For Agile" allowEditing="false" textAlign="Left"></e-grid-column>
<e-grid-column field="GOIDirectory" headerText="GOI Directory" allowEditing="false" textAlign="Left"></e-grid-column>
<e-grid-column field="ShippingPriority" headerText="Shipping Priority" allowEditing="false" textAlign="Left"></e-grid-column>
<e-grid-column field="CreateDate" headerText="Create Date" allowEditing="false" textAlign="Left" customFormat="@(new { type ="dateTime", format="MM/dd/yyyy hh:mm:ss a" })"></e-grid-column>
<e-grid-column field="CostOrder" headerText="Cost Order" allowEditing="false" textAlign="Left"></e-grid-column>
<e-grid-column field="LastUpdatedBy" headerText="Last Updated By" allowEditing="false" textAlign="Left"></e-grid-column>
<e-grid-column field="LastUpdatedDate" headerText="Last Updated Date" allowEditing="false" textAlign="Left" customFormat="@(new { type ="dateTime", format="MM/dd/yyyy hh:mm:ss a" })"></e-grid-column> -->
</e-grid-columns>
</ejs-grid>


I've also attached a couple of screenshots of the above-described behavior below.

Expected Behavior (note the vertical blue "freeze" line and the order numbers):



Actual Behavior (note the vertical blue "freeze" line is not present in the data and the order numbers are not displayed):




7 Replies

RS Rajapandiyan Settu Syncfusion Team January 12, 2021 09:45 AM UTC

Hi Shannon, 

Thanks for contacting Syncfusion support. 

We are unable to reproduce the reported behavior at our end. The Frozen columns are showing properly in the EJ2 Grid. Find the below sample for your reference. 
 
 
Still, if you face the same issue, please share the below details to validate further. 
 
  1. Share the EJ2 style and EJ2 script version you have used in your project.
  2. In which way you have import the EJ2 styles and EJ2 scripts in your project? (local style script/ CDN style script) 
  3. Share the Grid packages version.
  4. Do you have applied any custom CSS? If you applied , kindly share the custom CSS also.
  5. Share the simple issue reproducible sample with us.
 
Regards, 
Rajapandiyan S 



SF Shannon Fisher January 22, 2021 07:55 PM UTC

Hi Rajapandiyan,

Thank you for looking into this and providing a sample application. After reviewing this on my end, I checked the material.css file and found it to be in error. I used Theme Studio to regenerate a new css file, using our company-branded color scheme, and it is working correctly again.

One thing I did notice, however, is when using the Group By function in the grid, a similar issue appears. This is true for both our web application as well as the sample application you provided.  Please refer to the screenshot below for illustration.

For now, I have disabled that option in our grids as I suspect not many are even using it (I've set it to allowGrouping="false"). I will enable the feature again if we have a solution available.




SM Shalini Maragathavel Syncfusion Team January 25, 2021 06:33 AM UTC

Hi Shannon,  

Thanks for the update.  

By default in EJ2 Grid the frozen rows and columns are not compatible with Grouping feature. Please refer the below documentation,

Frozen rows and columns limitation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/frozen/#limitations-of-frozen-grid  

We have already logged a feature improvement task for the same as “Provide support for Grouping with frozen columns ”. At Syncfusion, we are committed to fixing all validated defects (subject to technical feasibility and Product Development Life Cycle ) and currently, there is no plan to include this feature. It will be included in any of our upcoming releases. 
  
You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.   


Regards,  
Shalini M. 



MS Marc Schluper May 11, 2021 01:32 PM UTC

It appears the Width of columns must be set for this to work.


PG Praveenkumar Gajendiran Syncfusion Team May 12, 2021 01:49 PM UTC

Hi Shannon,   
 
Thanks for the update.   
 
As we informed already, By default in EJ2 Grid the frozen rows and columns are not compatible with Grouping feature. Please refer the below Frozen rows and columns limitation documentation,

Frozen rows and columns limitation: 
https://ej2.syncfusion.com/aspnetcore/documentation/grid/frozen/#limitations-of-frozen-grid   

Even if you set the customized width in the Grid, it may lead to occur any other issues while using other combinations of features in the Grid.

We have already logged a feature improvement task for the same as “Provide support for Grouping with frozen columns ” and It will be included in any of our upcoming releases. We appreciate your patient until then.

Regards,
Praveenkumar G
 



SF Shannon Fisher May 12, 2021 02:56 PM UTC

Praveenkumar,

I did not bump this topic...  Shalini's reply on January 25 was sufficient for me.  Is there a way for you to close this thread?


PK Prasanna Kumar Viswanathan Syncfusion Team May 13, 2021 03:57 AM UTC

Hi Shannon,

The forum cannot be closed. So, if you need any other assistance, please get back to us at anytime.

Regards,
Prasanna Kumar N.S.V


Loader.
Up arrow icon