Can an editor template be used for the grid delete confirmation?

[Luke]

I have looked for different forums and knowledge base posts relating to grid delete actions but can't find anything quite like I'm trying to accomplish. I would like to use a template for the confirmation popup when the destroy button is clicked on a grid row. I don't want the confirmation alert, instead I would like to have an editor template.

My grid setup:

columns.Command(m => { 
                m.Edit(); 
                m.Custom("Assign").Click("AssignInventory").IconClass("k-i-document-manager").Visible("AssignVisible");
                m.Destroy().Text("Destroy").Visible("AssignVisible"); // Only visible if the inventory is assignable, has quantity on hand
            });
        })
        .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("InventoryTemplate").DisplayDeleteConfirmation(false)) // Do not show confirmation alert

Here is the template I'm trying to use in a popup window once the destroy button is clicked.

<script type="text/x-kendo-template" id="DestroyInventoryTemplate">

    # if(data.BulkItems) { #
        <style>
            .k-edit-form-container {
                max-height: 600px;
            }

            .k-edit-form-container .k-edit-buttons {
                margin: 0;
                padding: 8px 0px;
            }
        </style>
        <input type="hidden" id="Id" name="Id" value="#:data.Id#" />
        <input type="hidden" id="Name" name="Name" value="#:data.Name#" />
        <input type="hidden" id="Description" name="Description" value="#:data.Description#" />
        <input type="hidden" id="inventoryTypeId" name="inventoryTypeId" value="#:data.InventoryTypeId#" />
        <input type="hidden" id="QuantityTotal" name="QuantityTotal" value="#:data.QuantityTotal#" />
        <input type="hidden" id="QuantityOnHand" name="QuantityOnHand" value="#:data.QuantityOnHand#" />
        <input type="hidden" id="Brand" name="Brand" value="#:data.Brand#" />
        <input type="hidden" id="SerialNumber" name="SerialNumber" value="#:data.SerialNumber#" />
        <input type="hidden" id="ModelNumber" name="ModelNumber" value="#:data.ModelNumber#" />
        <input type="hidden" id="Size" name="Size" value="#:data.Size#" />
        <input type="hidden" id="Color" name="Color" value="#:data.Color#" />
        <input type="hidden" id="RetirementDate" name="RetirementDate" value="#:data.RetirementDate#" />
        <input type="hidden" id="Destroyed" name="Destroyed" value="#:data.Destroyed#" />
        <input type="hidden" id="CreatedBy" name="CreatedBy" value="#:data.CreatedBy#" />
        <input type="hidden" id="CreatedDate" name="CreatedDate" value="#:data.CreatedDate#" />
        <input type="hidden" id="Active" name="Active" value="#:data.Active#" />
        <input type="hidden" id="InventoryTypeName" name="InventoryTypeName" value="#:data.InventoryTypeName#" />
        <input type="hidden" id="RequiredSerialNumber" name="RequiredSerialNumber" value="#:data.RequiredSerialNumber#" />
        <input type="hidden" id="RequiredModelNumber" name="RequiredModelNumber" value="#:data.RequiredModelNumber#" />
        <input type="hidden" id="RequiredBrand" name="RequiredBrand" value="#:data.RequiredBrand#" />
        <input type="hidden" id="RequiredSize" name="RequiredSize" value="#:data.RequiredSize#" />
        <input type="hidden" id="RequiredColor" name="RequiredColor" value="#:data.RequiredColor#" />
        <input type="hidden" id="PermissionPersonnel" name="PermissionPersonnel" value="#:data.PermissionPersonnel#" />
        <input type="hidden" id="PermissionLocation" name="PermissionLocation" value="#:data.PermissionLocation#" />
        <input type="hidden" id="PermissionInventory" name="PermissionInventory" value="#:data.PermissionInventory#" />

        <div class="k-edit-label">
            <label>Quantity To Destroy</label>
        </div>
        <div class="k-edit-field">
            <span class="k-input k-textbox k-input-solid k-input-md k-rounded-md k-invalid" style="">
                <input id="QuantityToAdd" class="k-input-inner" type="number" min="1" max="#:QuantityOnHand#" name="QuantityToAdd" value="1" required="required" validationMessage="Quantity to destroy is required">
            </span>
            <div class="k-tooltip k-tooltip-error k-validator-tooltip k-invalid-msg field-validation-error k-hidden" data-for="QuantityToAdd" id="QuantityToAdd_validationMessage" data-valmsg-for="QuantityToAdd">
                <span class="k-tooltip-icon k-icon k-i-warning"></span>
                <span class="k-tooltip-content">The Quantity to destroy field is required.</span>
                <span class="k-callout k-callout-n"></span>
            </div>
        </div>
    #} else {#
        <span class="text-center">Are you sure you want to destroy this inventory?</span>
    #}#

    <div class="k-edit-buttons k-actions-end">
        <button type="button" class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary">
            <span class="k-icon k-i-check k-button-icon"></span>
            <span class="k-button-text">Destroy</span>
        </button>
    </div>
</script>

[Alexander]

Hi Luke,

Thank you for reaching out and for taking the time to share the relevant information and configuration on your premises that further depicts the desired outcome that needs to be achieved on your end.

Generally, by design, upon clicking the delete button what essentially happens is that an "alert" box is displayed within the current page. Currently, there is no built-in integration for directly altering the appearance of the Delete window.

Regardless, you can achieve the desired result by utilizing the Telerik UI for ASP.NET Core Dialog and using the following custom approach instead:

• Initialize a Dialog component and set it initially as non-visible:
  

@(Html.Kendo().Dialog()
         .Name("deleteDialog")
         .Title("Custom Delete")
         .Width(400)
         .Visible(false)
)

• Create a custom command for the Grid that will act as a "delete" command through the .Custom() API configuration and provide a handler:
  

.Columns(columns =>
{
    columns.Command(command => 
    { 
        command.Custom("Delete").Click("onClick").IconClass("k-icon k-i-close k-button-icon");
    });
})

• Within the handler, obtain the current row data, get the dialog's reference, and instantiate a template instance whilst passing the currently to-be-deleted row data:
  

<script type="text/javascript">
    function onClick(e){
         var tr = $(e.target).closest("tr"); // Obtain the row for deletion
         var data = this.dataItem(tr); // Get the current data item instance.
         var dialog = $("#deleteDialog").data("kendoDialog");  // Get the dialog's reference.
         var dialogTemplate = kendo.template($("#dialogTemplate").html()); // Instantiate a dialog template.
         dialog.content(dialogTemplate(data)); // Set the dialog's content.
         dialog.open(); // Open the dialog.

        ...
    }

</script>

Where the template would like something like the following:

<script type="text/x-kendo-template" id="dialogTemplate">
    <p> Delete ProductID: <strong>#= ProductID #</strong> ? </p>
    <p> ShipName: #= ProductName #. </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>
</script>

• Attach click handlers to the desired buttons and prepare a delete request for the current data item instance:
  

<script type="text/javascript">
    function onClick(e){
         var tr = $(e.target).closest("tr");
         var data = this.dataItem(tr);
         ...

        $("#yesButton").click(function () {
            var grid = $("#grid").data("kendoGrid");
            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)
            dialog.close();
        })
        $("#noButton").click(function () {
            dialog.close();
        })
    }

</script>

Here is a visual representation of the aforementioned approach. For your convenience, I am also attaching a runnable sample that further showcases the mentioned above:

Telerik REPL for ASP.NET Core Example

I hope this helps.

Kind Regards,
Alexander
Progress Telerik

[Luke]

Thanks Alexander.

"Currently, there is no built-in integration for directly altering the appearance of the Delete window."

It would be nice to set the editor template for commands individually. I know the create and edit use the same template by default though.

This was very helpful.

var dialog = $("#deleteDialog").data("kendoDialog");  // Get the dialog's reference.
var dialogTemplate = kendo.template($("#dialogTemplate").html()); // Instantiate a dialog template.
dialog.content(dialogTemplate(data)); // Set the dialog's content.

$("#yesButton").click(function () {
    var grid = $("#grid").data("kendoGrid");
    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)
    dialog.close();
})
$("#noButton").click(function () {
    dialog.close();
})

I had set up a custom command but it was just posting to my controller without the grid making the request. This is much cleaner.

[Alexander]

Hi Luke,

Thank you for the heads up and I'm glad that the provided solution has suited you well during your endeavors. Indeed, currently, the Grid does not expose a built-in configuration for specifying a customary external template, independently for the commands on-the-fly.

If you consider this a feasible feature that should be introduced, I would recommend logging a feature request within our feedback portal:

• https://www.telerik.com/support/feedback

In general, feature requests are prioritized based on the community interest, demand, and severity in addition to our internal priorities. And based on those aspects, are considered for future implementation.

I hope this helps.