Freeze columns outside of the html

[Rykunov Alex]

Greetings.

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;

this.grid.widget.setModel(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: 'Отпуск план, дней',

}]

};

constructor(

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]

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]

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 () { 

                $("#stack").ejButton({ 

                    text: 'EnableStackedheader', click: function () { 

                        $("#Grid").ejGrid("option", { 

                             stackedHeaderRows: [{ 

                                stackedHeaderColumns: [{ headerText: "Order Details", column: "OrderID,OrderDate,Freight" } 

                                 , { headerText: "Ship Details2", column: "ShipName,ShipCity,ShipCountry" } 

                                ], 

                            }, 

                        ], 

                    }) 

                } 

          }) 

          $("#frozen").ejButton({ 

                    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 

                $("#Grid").ejGrid({ 

                    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. 

Regards, 

Farveen sulthana T