Missing Data with Wide Grid and Frozen Columns

[Shannon Fisher]

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):

[Rajapandiyan Settu]

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. 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/core_grid_frozencol1280248466.zip  

 

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 

[Shannon Fisher]

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.

[Shalini Maragathavel]

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.   

Link: https://www.syncfusion.com/feedback/14013/provide-support-for-grouping-with-frozen-columns    

Regards,  

Shalini M. 

[Marc Schluper]

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

[Praveenkumar Gajendiran]

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 

[Shannon Fisher]

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?

[Prasanna Kumar Viswanathan]

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