Search code examples
gridshieldui

How to trigger an event when shield-ui grid cell text box destroyed


As I mentioned in the question title I need to trigger an event as soon as Shield-ui grid editable cell textbox destroyed. Couldnt find a solution in their documentation.Any help would be appreciable. Thank you.

Here is my code so far ...

 $("#allTransGrid").shieldGrid({
                                    dataSource: {
                                        data: datad,
                                        schema: {
                                            fields: {
                                                mbr_id: {path: "mbr_id", type: String},
                                                lon_id: {path: "lon_id", type: String},
                                                center_name: {path: "center_name", type: String},
                                                grp_name: {path: "grp_name", type: String},
                                                mbr_name: {path: "mbr_name", type: String},
                                                lon_amt: {path: "lon_amt", type: Number},
                                                lon_int_amt: {path: "lon_int_amt", type: Number},
                                                loan_total: {path: "loan_total", type: Number},
                                                ind_inst: {path: "ind_inst", type: Number},
                                                today_pay: {path: "today_pay", type: Number, nullable: false},
                                                lon_id_as: {path: "lon_id_as", type: Number}
                                            }
                                        }
                                    },
                                    sorting: {
                                        multiple: true
                                    },
                                    paging: {
                                        pageSize: 12,
                                        pageLinksCount: 10
                                    },
                                    selection: {
                                        type: "row",
                                        multiple: true,
                                        toggle: false
                                    },
                                    columns: [
                                        {field: "mbr_id", width: "100px", title: "Member ID"},
                                        {field: "lon_id", width: "100px", title: "Loan ID"},
                                        {field: "center_name", title: "Center Name", width: "100px"},
                                        {field: "grp_name", title: "Group Name", width: "70px"},
                                        {field: "mbr_name", title: "Member Name", width: "170px"},
                                        {field: "lon_amt", title: "Loan Amount", width: "100px"},
                                        {field: "lon_int_amt", title: "Interest", width: "100px"},
                                        {field: "loan_total", title: "Total", width: "80px"},
                                        {field: "ind_inst", title: "Installment Amount", width: "120px"},
                                        {field: "today_pay", title: "Today Payment"}
                                    ],
                                    events: {
                                        editorCreating: function (e) {
                                            if (e.field == "ind_inst") {
                                                e.options = {enabled: false, max: 1000};
                                            }
                                            if (e.field == "loan_total") {
                                                e.options = {enabled: false, max: 500000};
                                            }
                                            if (e.field == "lon_int_amt") {
                                                e.options = {enabled: false, max: 100000};
                                            }
                                            if (e.field == "lon_amt") {
                                                e.options = {enabled: false, max: 100000};
                                            }
                                            if (e.field == "mbr_name") {
                                                e.options = {enabled: false};
                                            }
                                            if (e.field == "grp_name") {
                                                e.options = {enabled: false};
                                            }
                                            if (e.field == "center_name") {
                                                e.options = {enabled: false};
                                            }
                                            if (e.field == "lon_id") {
                                                e.options = {enabled: false};
                                            }
                                            if (e.field == "mbr_id") {
                                                e.options = {enabled: false};
                                            }
                                            if (e.field == "today_pay") {
                                                e.options = {max: 10000};
                                            }
                                        },
                                        detailCreated: function (e) {
                                            $.ajax({
                                                url: "PaymentCatcherGroupBy",
                                                cache: false,
                                                dataType: 'JSON',
                                                data: {loan_id: e.item.lon_id_as, c_id: center_id},
                                                success: function (data) {
                                                    $("<div/>")
                                                            .appendTo(e.detailCell)
                                                            .shieldGrid({
                                                                dataSource: {data: data},
                                                                sorting: {
                                                                    multiple: true
                                                                },
                                                                paging: {
                                                                    pageSize: 5
                                                                },
                                                                columns: [
                                                                    {field: "installment_num", title: "Week", editable: false},
                                                                    {field: "installmentAmount", title: "Installment Amount", editable: false},
                                                                    {field: "paidAmount", title: "Paid Amount", editable: false},
                                                                    {field: "dueDate", title: "Date Paid", type: Date, editable: false}
                                                                ], editing: {enabled: false}
                                                            });
                                                }, error: function (jqXHR, textStatus, errorThrown) {
                                                    alert('error');
                                                }
                                            });

                                        },
                                        command: function (e) {
//selectionChanged doesnt work here....
                                            if (e.commandName == "selectionChanged") {
                                                var toBeSelected = e.toBeSelected;
                                                console.log(toBeSelected);
                                                //   e.cancel = true;
                                            }

                                        }
                                    },
                                    editing: {
                                        enabled: true,
                                        event: "doubleclick",
                                        type: "cell"
                                    },
                                    scrolling: true,
                                    height: 600
                                });

After focus lost of the textbox I need to trigger an event :

enter image description here


Solution

  • There is no destroy event, associated with any of the editors in the control, when in edit mode. One option, depending on the final goal that you have would be to subscribe to the command event: http://www.shieldui.com/documentation/grid/javascript/api/events/command which should be triggered on save, after an edit. If that is not an option, please supply some additional information on what is the exact end result that you are after.