This is a migrated thread and some comments may be shown as answers.

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

1 Answer 47 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Chris
Top achievements
Rank 1
Chris asked on 27 Nov 2016, 06:10 PM

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?

1 Answer, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 29 Nov 2016, 02:33 PM
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
Kendo UI is ready for Visual Studio 2017 RC! Learn more.
Tags
Grid
Asked by
Chris
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Share this question
or