Duplicate Kendo grid is creating every time

Question

var showEmps = function (did) {
$("#myGrid").kendoGrid({
                        sortable: true,
                        pageable: true,
                        scrollable: true,
                        columnMenu: true,
                        filterable: {
                            extra: false
                        },
                        dataSource: {
                            transport: {

                                read: "/Employee/ShowEmpByDept",
                                dataType: "json",
                                parameterMap: function (data1, type) {

                                    var data = {
                                       deptid: did
                                    }
                                    return data;
                                }
                            },
                            schema: {
                                model: {
                                    fields: {
                                        EmpID: { type: "number" },
                                        JOD: { type: "date" },
                                        LastName: { type: "string" },
                                        Dept: { type: "string" },
                                    }
                                }
                            },
                            pageSize: 15
                        },
                        columns: [
                        {
                            field: "EmpID",
                            title: "Emp ID",
                            filterable: false,
                            headerTemplate: '<span title="Emp ID">Emp ID</span>'
                        },
                        {
                            field: "JOD",
                            title: "JOD",
                            width: 90,
                            template: '#= kendo.toString(JOD,\"MM/dd/yyyy\") #',
                            filterable: { extra: true }
                        },
                        {
                            field: "LastName",
                            title: "Last Name",
                        },
                        {
                            field: "Dept",
                            title: "Dept",

                        }

                        ],

                    }).data("kendoGrid");
            };
   });

I'm calling showEmps method on document ready method like (showEmps(1))

Now, I've a dropdown with list of departments.

When I change my dropdown, I want to pass dept id to showEmps method inorder to refresh my grid with selected dropdown department

OnaBai · Accepted Answer · 2014-09-01T14:01:07.623

2

Don't do:

var grid1 = jQuery("#mygrid").kendoGrid({
     dataSource: dataSource,
});

This creates a new Grid object as you have seen.

What you should do is:

var grid1 = jQuery("#mygrid").data("kendoGrid");
grid1.dataSource.data(newData);

If you already have the new data loaded or simply:

dataSource.read();

if you want to trigger a new read (this will automatically refresh you grid).

Remember that read might receive as argument an object that then can be used in the parameterMap to compose the actual request. So you can do something like:

var ds = new kendo.data.DataSource({
    transport: {
        read: "/Employee/ShowEmp",
        parameterMap: function (data, type) {
            if (type === "read") {
                // If no empId is provided it uses 1, otherwise uses the one passed as argument
                data.empId = data.empId ? data.empId : 1;
                return data;
            }
        }
    }
});

// Read default empId (this is the same that it is executed when grid is initialized)
ds.read();
// Read employee with Id = 2
ds.read({ empId: 2 });

Pretty elegant!!

edited Sep 01 '14 at 14:01

answered Sep 01 '14 at 13:44

OnaBai

40,767
6
96
125

I'm sorry to ask you, how to read my new data with new input value? – jestges Sep 01 '14 at 13:59
I've done the same but unfortunately it is throwing error :( . After ds.read() I'm rebinding my datasource like this grid1.setDataSource.data(ds); Is this the right way? – jestges Sep 01 '14 at 14:14
I've done something like this and it is working grid1.setDataSource(ds); grid1.refresh(); but the problem is I lost my column templates and I'm getting Nan - Nan of 10 Items in the footer. How to handle this? – jestges Sep 01 '14 at 14:27
Creating a new DataSource object might lead to a memory leak (doesn't have to but it is always more expensive that just asking for a new read). The NaN in the page numbers uses to be because problems with pageSize in the DataSource and not returning the page number that was sent in the request. Are you doing paging in the server? – OnaBai Sep 01 '14 at 16:01
I'm using client side paging only. When I set page size again like ds.pageSize(10) that NaN message is not coming. But I'm observing that server call is happening twice. Also same for the date column. My template gone. I've applied some formate for my date type column that is also not working after grid refresh. And about new datasource, I didnt get it what does it mean? we should not use setDatasource? – jestges Sep 02 '14 at 07:55
You should use DataSource but you shouldn't do a `new kendo.data.DataSource...` when you need to change some filtering condition, paging... instead of it, you should use the methods in the previously created DataSource that do filtering, paging,... Each time that you create a new DataSource it consumes memory and CPU. About multiple requests to the server, this uses to happen when you first create the DataSource, then reference it in some other Widget, then do some operation in the DataSource,... each operation might trigger a new request to the server – OnaBai Sep 02 '14 at 08:01
OnaBai, I'm sorry to ask you can you provide jsfiddle link to get it done? I'm trying in multiple ways but not getting how to maintain the same column template after updating grid datasource – jestges Sep 02 '14 at 09:04
In another way, I'm trying to destroy the existing grid and creating whole as a new grid. In this case I can able to see all my templates and events are working fine. But only drawback is again it is creating a new grid inside the existing grid. I tried like below $('#myGrid').data().kendoGrid.destroy(); $('#myGrid').empty(); Still destroy is not happening. Any reason? – jestges Sep 02 '14 at 09:30
OnaBai... that fixed my issue (By destroy and recreate the same grid). But donno whether it is right way or not. – jestges Sep 02 '14 at 09:54
It is not the right way. That's overkill. In order to prepare the JSFiddle. What type of template are you using (for columns, for headers,...)? Do you have some sample code that can run in JSFiddle (even with the problems that you mention)? then, I can try to change it to use one single DataSource – OnaBai Sep 02 '14 at 09:57
Updated my description. Please find – jestges Sep 02 '14 at 10:13
Check http://jsfiddle.net/OnaBai/vbzrd22q/, this obviously doesn't work since I do not have you server page but hopefully will work for you. As you will see very few lines of difference. – OnaBai Sep 02 '14 at 10:47
OnaBai thanks for your help. It is going to else part once I change my dropdown value. I can able to see the selected value also. But unfortunately server call is not happening with updated value. GET http://localhost:1698/Employee/ShowEmpByDept?did=3 even I pass did = 4, it is calling old method only – jestges Sep 02 '14 at 11:12
Is it invoking this `showEmps` function but not getting to the server? – OnaBai Sep 02 '14 at 11:20
Yes, it is invoking showEmps function. but my read url is not getting changed. I mean parameter is always same like did=3 – jestges Sep 02 '14 at 11:24
Some sort of, is because you were receiving deptid in parameterMap argument (data1) but you were not using it. I didn't realize on that in my first jsfiddle. – OnaBai Sep 02 '14 at 12:05
Hi OnaBai, I've got a strange issue on extesion of this functionality. I've added a text box and a button to perform search for this grid. After performing search, when I click on reset button my grid is not biding the data. But I can able to see the result in JSON object. Here I've explained the entire problem http://stackoverflow.com/questions/25746115/databinding-is-not-happening-after-search-kendo-grid – jestges Sep 09 '14 at 14:00

Duplicate Kendo grid is creating every time

1 Answers1