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

Kendo Grid Not Updating after deleting a record

2 Answers 2148 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Brett
Top achievements
Rank 1
Veteran
Brett asked on 12 Jul 2020, 09:11 AM

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 Answers, 1 is accepted

Sort by
0
Alex Hajigeorgieva
Telerik team
answered on 14 Jul 2020, 01:31 PM

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

0
Pramod
Top achievements
Rank 1
Veteran
answered on 15 Jul 2020, 08:26 AM

Hi Brett,

Can you try with this:

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

Tags
Grid
Asked by
Brett
Top achievements
Rank 1
Veteran
Answers by
Alex Hajigeorgieva
Telerik team
Pramod
Top achievements
Rank 1
Veteran
Share this question
or