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