[Solved] Grid not refreshing with new record when rebinded but new record is found when filtering

[Chris]

I have a kendogrid and when I add a new record and rebind the grid, the new record is not in the grid, however if I use the filter for it then I see it, but to actually see it in the grid I have to refresh my page.

When the page loads it calls this function

function GetCustomerGridData() {
    kendo.ui.progress($("#Customer-Grid"), true);
    $.ajax({
        type: "GET",
        url: URLParam.GetActiveCustomersForTheGrid,
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function (data, textStatus, jqXHR) {
            LoadCustomerGrid(data);
            kendo.ui.progress($("#Customer-Grid"), false);
        }
    });
}

 

The LoadCustomerGrid is this 

function LoadCustomerGrid(newData) {
    CreateCustomerGrid(newData);
}

 

The grid itself is..

var customerGrid,
    CreateCustomerGrid = function (newData) {
        customerGrid = $("#Customer-Grid").kendoGrid({
            dataSource: {
                data: newData
            },
            schema: {
                model: {
                    CustomerID: { type: "number" }
                }
            },
            filterable: {
                mode: "row"
            },
            columns: [
                {
                    template: "<input type='checkbox' class='checkbox' />",
                    width: "30px"
                }
            {
                field: "LastName",
                title: "Last Name",
                filterable: {
                    cell: {
                        showOperators: false,
                        operator: "contains",
                        inputHeight: "34px"
                    }
                }
            },
            {
                field: "FirstName",
                title: "Name",
                filterable: {
                    cell: {
                        showOperators: false,
                        operator: "contains"
                    }
                }
            },
            {
                field: "Phone",
                title: "Phone",
                filterable: {
                    cell: {
                        showOperators: false,
                        operator: "contains"
                    }
                }
            },
            {
                field: "Address",
                title: "Address",
                filterable: {
                    cell: {
                        showOperators: false,
                        operator: "contains"
                    }
                }
            },
            {
                field: "City",
                title: "City",
                filterable: {
                    cell: {
                        showOperators: false,
                        operator: "contains"
                    }
                }
            },
            {
                field: "Zip",
                title: "Zip",
                filterable: {
                    cell: {
                        showOperators: false,
                        operator: "contains"
                    }
                }
            }
            ],
            scrollable: true,
            sortable: true,
            pageable: {
                pageSize: 20
            },
            selectable: "row",
            height: $("#Customer-Grid").closest(".col-height-full").height() - 60,
            change: function (e) {
                // Function call goes here
                var detailRow = this.dataItem(this.select());
                var optionID = detailRow.get("CustomerID")
            }
        }).data("kendoGrid");
    }

 

When I go to add a record I use a popup

function CustomerPopupEditor() {
    $("#showCustomerEdit").append("<div id='window'></div>");
    var myWindow = $("#window").kendoWindow({
        position: {
            top: 100,
            left: "30%"
        },
        width: "40%",
        title: "Add Customer",
        content: "/Customer/CustomerEditor",
        modal: true,
        actions: [
            "Close"
        ],
        close: function (e) {
            $("#window").data("kendoWindow").destroy();
        }
    }).data("kendoWindow");
    myWindow.open();
    GetStates();
    HomeStorage.Keys.AddOrEdit = "Add";
}

 

and when add a new record and click the save button, this function is called

function SubmitNewCustomer() {
    var customer = NewCustomerToSubmit();
    GetAssignmentIDs();
    $.ajax({
        type: "POST",
        url: URLParam.AddNewCustomer + "?assignments=" + HomeStorage.Keys.AssignmentIDString,
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify(customer),
        success: function (data, textStatus, jqXHR) {
            HomeStorage.Keys.NewCustomerID = data.id;
        },
        complete: function (e) {
            GetCustomerGridData();
            ClearFields();
        }
    })
}

 

and when I close the popup on a button click event this is called

$("#btnCancel").click(function () {
    ClearFields();
    GetCustomerGridData();
    CloseTheWindow();
});

 

In the SubmitNewCustomer function I have tried putting the GetCustomerGridData() in its success function and that didnt work either.

The data being returned for the GetCustomerGridData() has over 30K records, but I dont think that should matter much. 

Any idea what I am missing?

[Stefan]

Hello Chris,

This is not a known issue when adding new items to the Grid.

I can suggest checking if the newData variable is containing the new record, if it is not then this means that there is an issue with the service responsible for adding new items.

I also noticed that the Grid is initializing after GetCustomerGridData which is called multiple times. This is causing multiple Grid initializations from the same ID element which is not allowed:

http://docs.telerik.com/kendo-ui/intro/installation/jquery-initialization#duplicate-initialization

I can suggest to either check if the Grid is already initialized and destroy it or to set the new data using the data method of the DataSource:

http://docs.telerik.com/kendo-ui/intro/widget-basics/destroy#destroy-widgets

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-data

Also, if the data is correctly received from the server but not rendered, another option can be to refresh the Grid:

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-refresh

If additional assistance is needed, please send a runnable example so I can investigate further and provide a suggestion best suited for it.

Regards,
Stefan
Telerik by Progress