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.
Unfortunately, activation email could not send to your email. Please try again.

Error after removing ejGrid from DOM (knockoutJS)

Thread ID:

Created:

Updated:

Platform:

Replies:

119454 Jun 23,2015 04:49 PM Jun 24,2015 09:04 AM JavaScript 1
loading
Tags: ejGrid
Daniel
Asked On June 23, 2015 04:49 PM

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 [Syncfusion]
Replied On June 24, 2015 09:04 AM

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

CONFIRMATION

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.

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.

;