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

Kendo Grid Custom Delete

1 Answer 1055 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Bharathi
Top achievements
Rank 2
Bharathi asked on 20 Aug 2014, 08:42 PM
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>

1 Answer, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 22 Aug 2014, 09:03 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Grid
Asked by
Bharathi
Top achievements
Rank 2
Answers by
Dimo
Telerik team
Share this question
or