Error after removing ejGrid from DOM (knockoutJS)

[Daniel]

Hi,

I want the grid to appear only if flights collection has some elements. Here is my HTML:

<div data-bind="if: flightsCollection().length > 0">

        <div data-bind="ejGrid: {

    dataSource: flightsCollection,

    allowPaging: false,

    columns: [{ headerText: 'Date' }, { headerText: 'Itinerary' }, { headerText: 'Price' }],

    rowTemplate: '#templateOneWay'

}">

        </div>

    </div>

When I want to clear the collection and remove grid I use this code:

flightsCollection([]);

After this piece of code the exception is thrown:

Uncaught TypeError: Cannot read property 'groupSettings' of null

Could you provide any help on that?

[Sellappandi Ramu]

Hi Daniel,

Thanks for using Syncfusion products.

We have analyzed your code snippet and found that you have checked the condition before rendering the grid which is the cause of the issue. When we set the data source to grid dynamically grid will get re-render. In the condition you have provided which ignore the grid rendering so the exception is thrown.

We have created a sample to render the grid based on that condition. When grid data source is empty  then grid will hide and it will show once the data source is not empty. Please refer the following code snippet.

    <input id="btn" />

    <div id="Grid" data-bind="ejGrid: {

                        dataSource: flightsCollection,

                        allowPaging: false,

                        columns: [{ headerText: 'Date' }, { headerText: 'Name Details' }, { headerText: 'Price Details' }],

                        rowTemplate: '#templateOneWay',

                        actionBegin: gridHideShow,

                         }">

    </div>

    <script type="text/javascript">

        $(function () {

            window.kodata = [{ "OrderDate": new Date(8364186e5), "Name": "Nancy", "Price": 1000.00 },

                             { "OrderDate": new Date(8264186e5), "Name": "Andrew", "Price": 1100.00 },

                             { "OrderDate": new Date(8164186e5), "Name": "Janet", "Price": 1200.00 },

                             { "OrderDate": new Date(8364186e5), "Name": "Margaret", "Price": 1300.00 },

                             { "OrderDate": new Date(8564186e5), "Name": "Steven", "Price": 1400.00 },

                             { "OrderDate": new Date(8664186e5), "Name": "Michael", "Price": 1500.00 },

                             { "OrderDate": new Date(7364186e5), "Name": "Robert", "Price": 1600.00 },

                             { "OrderDate": new Date(8364186e5), "Name": "Laura", "Price": 1700.00 },

                             { "OrderDate": new Date(8364186e5), "Name": "Anne", "Price": 1800.00 }]

            window.employeeView = {

                flightsCollection: ko.observableArray(window.kodata),

                gridHideShow: function (args) {

                    if (this.model.dataSource().length == 0 && (args.requestType == "refresh" || this.initialRender))

                        $("#Grid").hide();

                    else

                        $("#Grid").show();

                }

            };

            ko.applyBindings(employeeView);

        });

        $('#btn').ejButton({

            text: "Clear",

            click: function (args) {

                window.employeeView.flightsCollection([]);

            }
        });

In the above sample we have used actionBegin event to show and hide the grid. We have used button click to remove the grid based on the data source length.

We have attached sample in below link location.

Sample Link: http://www.syncfusion.com/downloads/support/forum/119454/ze/Sample_119454-1741120939

Please try the above sample and get back to us if you have any concerns.

Regards,
Sellappandi R