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

Answer 1

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!!