Kendo Grid Custom Delete

[Bharathi]

Hi ,

            I'm trying to add custom delete command in the grid , When clicking the delete button I have to call a popup window with textbox entering reason to delete the record and save the reason in different table and delete the selected record from the grid... I'm not able to create a delete popup. Any help appreciated. Thank you

<h2>Delete Selected Transaction</h2>
<br />

@* The DIV where the Kendo grid will be initialized *@
<div id="grid"></div>


<script id="popup_editor" type="text/x-kendo-template">
<p>  <h4> Enter Reason to Delete this Transaction</h4></p>
<div class="k-edit-label"><label for="Notes">Notes</label></div>
<textarea name="Notes" data-bind="value: Notes" class="k-textbox" required validationMessage="Notes is required." style="height: 100px;"></textarea>

</script>




<script>

    $(function () {
        $("#grid").kendoGrid({
            dataSource: {
                transport: {
                    read: {
                      url: "GetJournalsFromLoadByID",
                      contentType: "application/json; charset=utf-8",
                      type: "POST",
                      cache: true,
                      data: {
                                tkey: @Request["tkey"]
                            }
                    },

                     update: {
                    url: "@Url.Action("EditingPopup_Delete","Journals")",
                    type: "POST",
                    complete: function(e) {
                        alert("Successfully Deleted - Transactionn");
                        $("#grid").data("kendoGrid").dataSource.read();
                        },
                    error: function (e) {
                       alert("Manage: DeleteTransaction -> Ajax Error!");
                    }
                },


                    parameterMap: function (data, operation) {

                         if (operation != "read") {
                        var result = {};
                            for (var i = 0; i < data.models.length; i++) {
                            var tk = data.models[i];
                            var c = new Date(tk.CreatedDate);
                            tk.CreatedDate = kendo.toString(new Date(c), "F");
                            for (var member in tk) {
                                result["newTkey[" + i + "]." + member] = tk[member];
                            }
                        }
                        return result;
                    }
                    else {
                         return JSON.stringify(data)
                    }


                    }
              },
                schema: {
                    data: "Data",
                    total: "Total",
                    model: {
                    id: "TRANSACTION_KEY",
                    fields: {
                        TRANSACTION_KEY: { editable: false, nullable: true },
                        Notes: { editable: true, validation: { required: true } }

                    }
                }




                },
                pageSize: 1000,
                serverPaging: true,
                serverFiltering: true,
                serverSorting: true
            },
            groupable: true,
            columnMenu: true,
            filterable: true,
            sortable: true,
            pageable: true,
            columns: [
            { field: "TRANSACTION_KEY", title: "TRANSACTION_KEY", width: "100px" },
            { field: "FISCAL_YEAR ", title: "FISCAL_YEAR", width: "150px" },
            { field: "ACCOUNTING_PERIOD", title: "ACCOUNTING_PERIOD", width: "150px" },
            { field: "Notes", width:"250px" },
            { command: ["edit"], title:"Update Delete Reason", width:"200px"}],     //["edit","destroy"]
            editable: {
            mode: "popup",
            template: kendo.template($("#popup_editor").html())
        }
        });
    });

</script>



<script type="text/kendo-template" id="message">
<div class="k-widget k-tooltip k-tooltip-validation k-invalid-msg field-validation-error" style="margin: 0.5em; display: block; " data-for="#=field#" data-valmsg-for="#=field#" id="#=field#_validationMessage">
            <span class="k-icon k-warning"> </span>#=message#<div class="k-callout k-callout-n"></div></div>
</script>

<script type="text/javascript">
    var validationMessageTmpl = kendo.template($("#message").html());

    function error(args) {
        if (args.errors) {
            var grid = $("#grid").data("kendoGrid");
            grid.one("dataBinding", function (e) {
                e.preventDefault();   // cancel grid rebind if error occurs

                for (var error in args.errors) {
                    showMessage(grid.editable.element, error, args.errors[error].errors);
                }
            });
        }
    }

    function showMessage(container, name, errors) {
        //add the validation message to the form
        container.find("[data-valmsg-for=" + name + "],[data-val-msg-for=" + name + "]")
        .replaceWith(validationMessageTmpl({ field: name, message: errors[0] }))
    }
</script>

[Dimo]

Hi Bharathi,

It looks like you are trying to execute a custom routine by using the Grid's edit command, but this routine is not related to editing. This makes your implementation hackish and prone to unexpected side effects. I recommend you to use a custom command, which will pop a Kendo UI Window and after the user fills the reason to delete and it is saved via Ajax, you will close the Window and delete the Grid row via the Grid API.

http://docs.telerik.com/kendo-ui/api/web/grid#configuration-columns.command

http://docs.telerik.com/kendo-ui/api/web/grid#configuration-columns.command.click

http://docs.telerik.com/kendo-ui/api/web/window

http://docs.telerik.com/kendo-ui/api/web/grid#methods-removeRow

If CRUD operations are executed in batches (which is not the case currently), you will need to saveChanges manually:

http://docs.telerik.com/kendo-ui/api/web/grid#methods-saveChanges

Regards,
Dimo
Telerik