Kendo Grid Not Updating after deleting a record

3 posts, 0 answers
  1. Brett
    Brett avatar
    7 posts
    Member since:
    Jun 2020

    Posted 12 Jul 2020 Link to this post

    Unfortunately,when I go to delete an item from the grid the grid is not properly updating.  

    I've tried 3 things and I haven't had any luck:

    1.  $("#userListGrid").data("kendoGrid").dataSource.read;
         $("#userListGrid").data("kendoGrid").refresh();

    2.  $('#userListGrid').data('kendoGrid').dataSource.read().then(function () {
              $('#userListGrid').data('kendoGrid').refresh();
         });

    3.  KendoGridRefresh();

    Here is the code for the function:

    function KendoGridRefresh() {
            var grid = $('#userListGrid').data('kendoGrid');
            grid.dataSource.read();
        }

     

    Here is the code for the grid:

    <div class="content-container">
        <div class="container">
            <h3 class="d-inline">Current Users</h3>
            <button class="btn btn-primary d-inline mb-2 ml-5" onclick="window.location.href = '/user-maintenance/create-new-user'">Create New User</button>

            <div class="row p-0 table-container striped">
                <div id="userListGrid"></div>
            </div>
        </div>
        <div id="delete-confirm-modal" style="background-color: white"></div>
    </div>


    <script type="text/javascript">
        // Sticky header
        function onDataBound() {
            $("#loader-spinner").hide();

            var wrapper = this.wrapper,
                toolbar = wrapper.find(".k-grid-toolbar"),              // e.g. button to export spreadsheet
                groupingHeader = wrapper.find(".k-grouping-header"),    // interactive tools
                header = wrapper.find(".k-grid-header");                // column headers

            function resizeFixed() {
                var paddingRight = parseInt(toolbar.css("padding-right"));
                toolbar.css("width", wrapper.width() - paddingRight - 3);

                paddingRight = parseInt(groupingHeader.css("padding-right"));
                groupingHeader.css("width", wrapper.width() - paddingRight - 3);

                paddingRight = parseInt(header.css("padding-right"));
                header.css("width", wrapper.width() - paddingRight);
            }

            function scrollFixed() {
                var navbarHeaderHeight = 0;

                if ($(".nav-side-menu").height() <= 100) { // On mobile device or small screen
                    navbarHeaderHeight = 0;
                } else { // Full screen
                    navbarHeaderHeight = 100;
                }

                var offset = $(this).scrollTop(),
                    tableOffsetTop = wrapper.offset().top - navbarHeaderHeight;


                if (offset < tableOffsetTop) {
                    toolbar.removeClass("fixed-header");
                    toolbar.removeAttr("style");

                    groupingHeader.removeClass("fixed-header");
                    groupingHeader.removeAttr("style");

                    header.removeClass("fixed-header");
                    header.removeAttr("style");

                } else if (offset >= tableOffsetTop) {

                    toolbar.addClass("fixed-header");
                    toolbar.css("top", navbarHeaderHeight);

                    groupingHeader.addClass("fixed-header");
                    groupingHeader.css("top", navbarHeaderHeight + toolbar.outerHeight());

                    header.addClass("fixed-header");
                    header.css("top", navbarHeaderHeight + toolbar.outerHeight() + groupingHeader.outerHeight());
                }
            }

            resizeFixed();
            $(window).resize(resizeFixed);
            $(window).resize(scrollFixed);

            $(window).scroll(resizeFixed);
            $(window).scroll(scrollFixed);

            $(".content-container").scroll(resizeFixed);
            $(".content-container").scroll(scrollFixed);
        }


        var externalId = "";
        var firstName = "";
        var lastName = "";
        var emailAddress = "";

        var confirmDelete = function (eid, firstN, lastN, emailA) {
            var dialog = $("#delete-confirm-modal");
            externalId = eid;
            firstName = firstN;
            lastName = lastN;
            emailAddress = emailA;

            if (dialog.data("kendoDialog")) {
                dialog.data("kendoDialog").open();
            } else {
                dialog.kendoDialog({
                    width: "450px",
                    title: "Confirm delete",
                    closable: true,
                    modal: true,
                    content: "<p>Confirm that you wish to delete user " + firstName + " " + lastName + "(" + emailAddress + "). Once this is done, it cannot be reversed.</p>",
                    actions: [
                        {
                            text: "Cancel",
                            primary: true
                        }, {
                            text: "Confirm",
                            action: function (e) {
                                var url = "/apic/usermaintenance/deleteuser/" + externalId;
                                $.get(url,
                                    function (data) {
                                        //$("#userListGrid").data("kendoGrid").dataSource.read;
                                        //$("#userListGrid").data("kendoGrid").refresh();

                                        /*$('#userListGrid').data('kendoGrid').dataSource.read().then(function () {
                                            $('#userListGrid').data('kendoGrid').refresh();
                                        });*/

                                        KendoGridRefresh();
                                        
                                        kendo.alert("User has been deleted");
                                    }).fail(function () {
                                        kendo.alert("Unable to delete user. An error has occured. Please try again.");
                                    });
                                                                                   }
                        }
                    ],
                    close: onClose
                });
            }
        };

        var deleteUser = function () {

        };

        var onClose = function (e) {
            externalId = "";
            firstName = "";
            lastName = "";
            emailAddress = "";
        };

        function KendoGridRefresh() {
            var grid = $('#userListGrid').data('kendoGrid');
            grid.dataSource.read();
        }

        $(document).ready(function () {
            var roles = [{
                id: 1, name: "JB-Admin", key: 1, value: "JB-Admin"
            }, {
                id: 2, name: "M-Admin", key: 2, value: "M-Admin"
            }, {
                id: 3, name: "NM-Admin", key: 3, value: "NM-Admin"
            }, {
                id: 4, name: "Pricing", key: 4, value: "Pricing"
            }, {
                id: 5, name: "Orders", key: 5, value: "Orders"
            }, {
                id: 6, name: "Orders-U", key: 6, value: "Orders-U"
            }, {
                id: 7, name: "Contracts", key: 7, value: "Contracts"
            }, {
                id: 8, name: "Exchange", key: 8, value: "Exchange"
            }, {
                id: 9, name: "Destination", key: 9, value: "Destination"
            }, {
                id: 10, name: "Destination-C", key: 10, value: "Destination-C"
            }, {
                id: 11, name: "Nominations", key: 11, value: "Nominations"
            }, {
                id: 12, name: "Nominations-C", key: 12, value: "Nominations-C"
            }, {
                id: 13, name: "Nominations-U", key: 13, value: "Nominations-U"
            }, {
                id: 14, name: "Store", key: 14, value: "Store"
            }, {
                id: 15, name: "Retail Locator", key: 15, value: "Retail Locator"
            }, {
                id: 16, name: "Lessonly", key: 16, value: "Lessonly"
            }, {
                id: 17, name: "Inspection Form", key: 17, value: "Inspection Form"
            }, {
                id: 18, name: "Products", key: 18, value: "Products"
            }, {
                id: 19, name: "QA/QC", key: 19, value: "QA/QC"
            }, {
                id: 20, name: "Presentations", key: 20, value: "Presentations"
            }, {
                id: 21, name: "About Us", key: 21, value: "About Us"
            }, {
                id: 22, name: "Marketing", key: 22, value: "Marketing"
            }, {
                id: 23, name: "Marketing-C", key: 23, value: "Marketing-C"
            }, {
                id: 24, name: "Marketing-U", key: 24, value: "Marketing-U"
            }, {
                id: 25, name: "Marketing-D", key: 25, value: "Marketing-D"
            }
            ];

            $("#userListGrid").kendoGrid({
                dataSource: {
                    transport: {
                        read: "/apic/usermaintenance/getmyusers",
                        dataType: "json"
                    },
                    schema: {
                        data: function (response) {
                            return response;
                        },
                        model: {
                            fields: {
                                UserId: { type: "string" },
                                ExternalId: { type: "string" },
                                EmailAddress: { type: "string" },
                                FirstName: { type: "string" },
                                LastName: { type: "string" },
                                Display: { type: "string" },
                                Company: { type: "string" },
                                AxAccountNumber: { type: "string" },
                                MemberType: { type: "string" },
                                AccessPricing: { type: "string" },
                                AccessOrders: { type: "string" },
                                AccessContracts: { type: "string" },
                                AccessExchange: { type: "string" },
                                AccessDestination: { type: "string" },
                                AccessNominations: { type: "string" },
                                AccessMarketingCalendar: { type: "string" },
                                AccessStore: { type: "string" },
                                AccessRetailLocator: { type: "string" },
                                AccessLessonly: { type: "string" },
                                AccessInspectionForm: { type: "string" },
                                AccessProductsList: { type: "string" },
                                AccessQaQc: { type: "string" },
                                AccessPresentations: { type: "string" },
                                AccessAboutUs: { type: "string" },
                                FilterString: { type: "string" }
                            }
                        }
                    },
                    pageSize: 20,
                    sort: { field: "AxAccountNumber", dir: "asc" }
                },
                dataBound: onDataBound,
                dataBinding: function (arg) {

                },
                groupable: true,
                sortable: true,
                filterable: true,
                pageable: {
                    refresh: true,
                    pageSizes: true,
                    buttonCount: 5
                },
                toolbar: ["search", "excel"],
                excel: {
                    fileName: "UserList.xlsx",
                    allPages: true
                },
                refresh: {
                    reload: true
                },
                resizable: true,
                columns: [
                    {
                        template: '<a href="/user-maintenance/edit-user?userId=#= ExternalId #"><div class="edit-icon" title="edit"></div></a>',
                        width: '30px'
                    },
                    {
                        field: "EmailAddress",
                        title: "Email Address",
                        filterable: {
                            multi: true,
                            search: true
                        }
                    }, {
                        template: "#= LastName #, #= FirstName #",
                        title: "Name",
                        field: "Display",
                        filterable: {
                            multi: true,
                            search: true
                        }
                    }, {
                        title: "Company",
                        field: "Company",
                        filterable: {
                            multi: true,
                            search: true
                        }
                    }, {
                        title: "Account Number",
                        field: "AxAccountNumber",
                        filterable: {
                            multi: true,
                            search: true
                        },
                        width: '90px'
                    }, {
                        template: kendo.template($("#user-rights-template").html()),
                        title: "Permissions",
                        field: "FilterString",
                        filterable: {
                            search: true
                        }
                    },
                    {
                        template: '<button class="btn btn-danger btn-sm" onclick="confirmDelete(\'#=ExternalId#\', \'#=FirstName#\', \'#=LastName#\', \'#=EmailAddress#\')" style="padding: .25rem;">X</button>',
                        width: '40px'
                    },
                ]
            });
        });
    </script>
    <script type="text/x-kendo-template" id="user-rights-template">
        #if(MemberType==='JoeBlowAdmins') {#
        <span class='badge badge-pill badge-info'>JB-Admin</span>
        #}#
        #if(MemberType==='JoeBlowUsers') {#
        <span class='badge badge-pill badge-info'>JB-User</span>
        #}#
        #if(MemberType==='MemberAdmin') {#
        <span class='badge badge-pill badge-info'>M-Admin</span>
        #}#
        #if(MemberType==='MemberUser') {#
        <span class='badge badge-pill badge-info'>M-User</span>
        #}#
        #if(MemberType==='NonMemberAdmin') {#
        <span class='badge badge-pill badge-info'>NM-Admin</span>
        #}#
        #if(MemberType==='NonMemberUser') {#
        <span class='badge badge-pill badge-info'>NM-User</span>
        #}#
        #if(AccessPricing==='Read'){#
        <span class='badge badge-pill badge-info'>Pricing</span>
        #}#
        #if(AccessOrders==='Read'){#
        <span class='badge badge-pill badge-info'>Orders</span>
        #}#
        #if(AccessOrders==='Update'){#
        <span class='badge badge-pill badge-info'>Orders-U</span>
        #}#
        #if(AccessContracts==='Read'){#
        <span class='badge badge-pill badge-info'>Contracts</span>
        #}#
        #if(AccessExchange==='Read'){#
        <span class='badge badge-pill badge-info'>Exchange</span>
        #}#
        #if(AccessDestination==='Read'){#
        <span class='badge badge-pill badge-info'>Destination</span>
        #}#
        #if(AccessDestination==='Create'){#
        <span class='badge badge-pill badge-info'>Destination-C</span>
        #}#
        #if(AccessNominations==='Read'){#
        <span class='badge badge-pill badge-info'>Nominations</span>
        #}#
        #if(AccessNominations==='Create'){#
        <span class='badge badge-pill badge-info'>Nominations-C</span>
        #}#
        #if(AccessNominations==='Update'){#
        <span class='badge badge-pill badge-info'>Nominations-U</span>
        #}#
        #if(AccessMarketingCalendar==='Read'){#
        <span class='badge badge-pill badge-info'>Marketing</span>
        #}#
        #if(AccessMarketingCalendar==='Create'){#
        <span class='badge badge-pill badge-info'>Marketing-C</span>
        #}#
        #if(AccessMarketingCalendar==='Update'){#
        <span class='badge badge-pill badge-info'>Marketing-U</span>
        #}#
        #if(AccessMarketingCalendar==='Delete'){#
        <span class='badge badge-pill badge-info'>Marketing-D</span>
        #}#
        #if(AccessStore==='Read'){#
        <span class='badge badge-pill badge-info'>Store</span>
        #}#
        #if(AccessRetailLocator==='Read'){#
        <span class='badge badge-pill badge-info'>Retail Locator</span>
        #}#
        #if(AccessLessonly==='Read'){#
        <span class='badge badge-pill badge-info'>Lessonly</span>
        #}#
        #if(AccessInspectionForm==='Read'){#
        <span class='badge badge-pill badge-info'>Inspection Form</span>
        #}#
        #if(AccessProductsList==='Read'){#
        <span class='badge badge-pill badge-info'>Products</span>
        #}#
        #if(AccessQaQc==='Read'){#
        <span class='badge badge-pill badge-info'>QA/QC</span>
        #}#
        #if(AccessPresentations==='Read'){#
        <span class='badge badge-pill badge-info'>Presentations</span>
        #}#
        #if(AccessAboutUs==='Read'){#
        <span class='badge badge-pill badge-info'>About Us</span>
        #}#
    </script>

     

    Can someone tell me what I might be doing wrong?

  2. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1082 posts

    Posted 14 Jul 2020 Link to this post

    Hi, Brett,

    Thank you for the shared code snippets and explanations.

    For the grid to be aware of any destroy actions, you need to configure its data source destroy operation as well as a schema.model.id:

    https://docs.telerik.com/kendo-ui/controls/data-management/grid/editing/editing

     transport: {
           read: "/apic/usermaintenance/getmyusers",
           destroy: {
               url: function (options) {
                       return "/apic/usermaintenance/deleteuser/" + optopns.ExternalId
                }
            }
    },

    You can then use the built-in remove() and sync() methods when the user confirms the action as pictured in this knowledge base article:

    https://docs.telerik.com/kendo-ui/knowledge-base/custom-delete-confirmation-dialog

    {
        text: "Confirm",
        action: function (e) {
            grid.dataSource.remove(data)  //prepare a "destroy" request
            grid.dataSource.sync()  
        }
    }

    Let me know if you need further assistance.

    Kind Regards,
    Alex Hajigeorgieva
    Progress Telerik

  3. Pramod
    Pramod avatar
    4 posts
    Member since:
    Jan 2020

    Posted 15 Jul 2020 in reply to Brett Link to this post

    Hi Brett,

    Can you try with this:

    $('#userListGrid').data('kendoGrid').dataSource.page(1);
    $('#userListGrid').data('kendoGrid').dataSource.read();

Back to Top