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
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
Rank 1
Veteran
Hi Brett,
Can you try with this:
$('#userListGrid').data('kendoGrid').dataSource.page(1);
$('#userListGrid').data('kendoGrid').dataSource.read();