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. (Last updated on: November 16, 2018).
Close Icon
Unfortunately, activation email could not send to your email. Please try again.
Close Icon
Syncfusion Feedback

Freeze columns outside of the html

Thread ID:





131239 Jun 30,2017 08:37 AM UTC Jul 5,2017 04:27 PM UTC Angular 2
Tags: ejGrid
Rykunov Alex
Asked On June 30, 2017 08:37 AM UTC

I generate the grid using the grid.setModel(model) method, using the model I've created for the grid earlier. One of the problems I have is, that if you generate grid in this way, the isFrozen() property for the columns is ignored. Is there a way to freeze the column outside of html? Here's my generator code:
generateGrid() {
let model = new RestReportTable(this.stackedHeaders).model;
And here's the model:
export class RestReportTable {
model: ej.Grid.Model = {
scrollSettings: {height: '500px'},
showStackedHeader: true,
stackedHeaderRows: this.stackedHeaders,
allowTextWrap: true,
allowScrolling: true ,
textWrapSettings: {'wrapMode': 'header'},
columns: [
field: 'id',
visible: false,
isPrimaryKey: true
}, {
field: 'name',
cssClass: 'header-span',
width: 150,
isFrozen: true,
disableHtmlEncode: false,
headerText: 'Сотрудник',
headerTextAlign: 'center'
}, {
field: 'function',
cssClass: 'header-span',
width: 150,
headerText: 'Функция',
headerTextAlign: 'center'
}, {
field: 'vacAvailable',
cssClass: 'header-span',
width: 100,
headerText: 'Доступных дней отпуска',
format: '{0:N2}'
}, {
field: 'vacPlan',
cssClass: 'header-span',
width: 100,
headerText: 'Отпуск план, дней',


private stackedHeaders: Array<ej.Grid.StackedHeaderRow>) { }
Also, it seems at least one column must be present in html, to generate the grid in this way, or it will be autogenerated. If you help me with this problem (fully generate all the columns for the grid outside of html), it would be nice too.

Rykunov Alex
Replied On June 30, 2017 09:46 AM UTC

I've used scrollsettings FrozenColumns property, to freeze the first column. It partially worked, as I observed the generated grid with frozen column working, however, the error still popped up on the setModel method, about "Cannot read property showStackedHeaders of null". It seems, this way of initializing frozen column is not intended, and doesnt work correctly with my stacked headers.

Farveen Sulthana Thameeztheen Basha [Syncfusion]
Replied On July 5, 2017 04:27 PM UTC

Hi Rykunov, 

Thanks for contacting syncfusion support. 

We are able to reproduce your reported problem “cannot read property showStackedHeaders of null” when rendering the Grid with properties such as “showStackedHeaders” and “frozenColumns” through setModel at the same time. When we enable frozenColumns through setModel, it gets work according to the scrollSettings property of the Grid. In that case, Grid need to be destroyed and again need to be re-render. On using stackedHeader at that time of destroying the Grid, the model property of the Grid become null and throws script error. So we suggest you to enable the frozenColumns separately after the StackedHeader has been enabled through setModel. Then the problem will get resolve. 
Please refer to the code example:- 
<input type="button" id="stack" /> 
        <input type="button" id="frozen" /> 
        <div id="Grid"></div> 
        <script type="text/javascript"> 
           $(function () { 
                    text: 'EnableStackedheader', click: function () { 
                        $("#Grid").ejGrid("option", { 
                             stackedHeaderRows: [{ 
                                stackedHeaderColumns: [{ headerText: "Order Details", column: "OrderID,OrderDate,Freight" } 
                                 , { headerText: "Ship Details2", column: "ShipName,ShipCity,ShipCountry" } 
                    text: 'EnableFrozen', click: function () { 
             $("#Grid").ejGrid("option", { scrollSettings: { width: 450, height: 300, frozenColumns: 2, frozenRows: 2 }, 
                // the datasource "window.gridData" is referred from jsondata.min.js 
                    dataSource: window.gridData, 
                    allowPaging: true, 
                    allowSorting: true, 
                    allowScrolling: true, 
                    showStackedHeader: true, 
                    columns: [ 
                            { field: "OrderID", headerText: "Order ID", width: 75, textAlign: ej.TextAlign.Right }, 
                             . . . 
Please get back to us if you need any further assistance. 


Farveen sulthana T  


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon 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.Close Icon