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

2 posts, 0 answers
  1. Chris
    Chris avatar
    19 posts
    Member since:
    Feb 2016

    Posted 27 Nov 2016 Link to this post

    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?

  2. Stefan
    Admin
    Stefan avatar
    2205 posts

    Posted 29 Nov 2016 Link to this post

    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.
Back to Top