New to Kendo UI for jQuery? Download free 30-day trial

Customize Confirmation Window


Product Progress® Kendo UI® Grid for jQuery
Operating System Windows 10 64bit
Preferred Language JavaScript


How can I customize a confirmation dialog in the Kendo UI Grid for jQuery?


The following example demonstrates how to customize the default Delete confirmation alert box.

To achieve this behavior, use the Kendo UI templates, the Window, and the remove dataSource method of Grid.

<div id="grid"></div>
<div id="window"></div>

<script type="text/x-kendo-template" id="windowTemplate">
    <p> Delete <strong>#= ProductName #</strong> ? </p>
    <p> We have #= UnitsInStock # units in stock. </p>
    <button class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base" id="yesButton"><span class="k-button-text">Yes</span></button>
    <button class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base" id="noButton"><span class="k-button-text">No</span></button>

    $(document).ready(function () {
        var windowTemplate = kendo.template($("#windowTemplate").html());
        var crudServiceBaseUrl = "",
        dataSource = new{
            transport: {
                read:  {
                    url: crudServiceBaseUrl + "/Products",
                    dataType: "jsonp"
                update: {
                    url: crudServiceBaseUrl + "/Products/Update",
                    dataType: "jsonp"
                destroy: {
                    url: crudServiceBaseUrl + "/Products/Destroy",
                    dataType: "jsonp"
                create: {
                    url: crudServiceBaseUrl + "/Products/Create",
                    dataType: "jsonp"
                parameterMap: function(options, operation) {
                    if (operation !== "read" && options.models) {
                        return {models: kendo.stringify(options.models)};
            batch: true,
            pageSize: 20,
            schema: {
                model: {
                    id: "ProductID",
                    fields: {
                        ProductID: { editable: false, nullable: true },
                        ProductName: { validation: { required: true } },
                        UnitPrice: { type: "number", validation: { required: true, min: 1} },
                        Discontinued: { type: "boolean" },
                        UnitsInStock: { type: "number", validation: { min: 0, required: true } }

        var window = $("#window").kendoWindow({
            title: "Are you sure you want to delete this record?",
            visible: false, //the window will not appear before its .open method is called
            width: "400px",
            height: "200px",

        var grid = $("#grid").kendoGrid({
            dataSource: dataSource,
            pageable: true,
            height: 430,
            toolbar: ["create"],
            columns: [
            { field: "UnitPrice", title: "Unit Price", format: "{0:c}"},
            { field: "UnitsInStock", title:"Units In Stock"},
            { field: "Discontinued"},
            { command: [
                {name: "edit"},
                {name: "Delete",
                    click: function(e){  //add a click event listener on the delete button
                        e.preventDefault(); //prevent page scroll reset
                        var tr = $("tr"); //get the row for deletion
                        var data = this.dataItem(tr); //get the row data so it can be referred later
                        window.content(windowTemplate(data)); //send the row data object to the template and render it

                            grid.dataSource.remove(data)  //prepare a "destroy" request
                            grid.dataSource.sync()  //actually send the request (might be ommited if the autoSync option is enabled in the dataSource)
            editable: {
                mode: "inline"

See Also

In this article