How do I set model values from detailTemplate?

[Shea]

I have a kendo grid (batch editable) with a detailTemplate. My detail template has two drop down lists (SubItem, and SubItemSerial). The SubItem is not showing the correct value when template is expanded.  Also when the value is changed on first drop down, in the change event, I set() the correct value on the grid's model. But as soon as I do this, the detail template closes right away, which I don't want to happen.

I am assuming that people often want to set a value from a detail template, but I could not find a good example. Here is what I have so far:

001.function MrItemsGrid(mr_ID, grid_id, is_editable, default_billable) {
002.    var self = this;
003.    self.mr_ID = mr_ID;
004.    self.GRID_ID = '#' + grid_id;
005.    self.HANDLER_URL = "/MaterialRequestItem";
006.    self.IS_EDITABLE = is_editable;
007.    self.DEFAULT_BILLABLE = default_billable;
008.
009.    self.mr_source = new kendo.data.DataSource({
010.        batch: true,
011.        filter: [],
012.        serverPaging: true,
013.        serverSorting: true,
014.        serverFiltering: true,
015.        serverGrouping: true,
016.        serverAggregates: true,
017.        type: "aspnetmvc-ajax",
018.        pageSize: 50,
019.        schema: {
020.            data: "Data",
021.            total: "Total",
022.            errors: "Errors",
023.            model: {
024.                id: "MaterialRequestItemId",
025.                fields: {
026.                    MaterialRequestItemId: { type: "string" },
027.                    MaterialRequisitionId: { type: "string", defaultValue: self.mr_ID },
028.
029.                    ItemID: { type: "number", defaultValue: 0 },
030.                    ItemName: { type: "string", defaultValue: "" },
031.
032.                    SubItemId: { type: "number", defaultValue: 0 },
033.                    SubItemName: { type: "string", defaultValue: "" },
034.
035.                    SubItemSerialId: { type: "number", defaultValue: 0 },
036.                    SubItemSerialNumber: { type: "string", defaultValue: "" },
037.
038.                    BusinessPartnerID: { type: "number", defaultValue: 0 },
039.                    BusinessPartnerName: { type: "string", defaultValue: "" },
040.
041.                    Description: { type: "string" },
042.
043.                    Price: { type: "number", defaultValue: 0 },
044.                    Quantity: { type: "number", defaultValue: 0, validation: { required: true, min: 0 } },
045.                    Total: { type: "number", defaultValue: 0 },
046.                },
047.            }
048.        },
049.
050.        transport: {
051.            prefix: "",
052.            read: {
053.                url: self.HANDLER_URL + "/Read?mrId=" + self.mr_ID,
054.                type: "GET",
055.                cache: false,
056.            },
057.            update: {
058.                url: self.HANDLER_URL + "/Update",
059.                type: "PUT",
060.            },
061.            create: {
062.                url: self.HANDLER_URL + "/Create",
063.                type: "POST",
064.            },
065.            destroy: {
066.                url: self.HANDLER_URL + "/Destroy",
067.                type: "DELETE",
068.            }
069.        },
070.
071.        error: GridCommon.showCallBackError
072.    });
073.
074.    self.items_src = new kendo.data.DataSource({
075.        transport: {
076.            read: {
077.                url: self.HANDLER_URL + "/GetItems",
078.                dataType: "json",
079.                type: "GET"
080.            }
081.        },
082.        error: GridCommon.showCallBackError
083.    });
084.
085.    self.vendors_src = new kendo.data.DataSource({
086.        transport: {
087.            read: {
088.                url: self.HANDLER_URL + "/GetVendors",
089.                dataType: "json",
090.                type: "GET"
091.            }
092.        },
093.        error: GridCommon.showCallBackError
094.    });
095.
096.    self.itemDropDownEditor = function(container, options) {
097.
098.        $('<input required data-text-field="ExtendedItemName" data-value-field="ItemName" data-bind="value:' + options.field + '"/>')
099.            .appendTo(container)
100.            .kendoComboBox({
101.                autoBind: false,
102.                serverFiltering: false,
103.                select: "",
104.                optionLabel: { ExtendedItemName: "", ItemID: 0 },
105.                dataSource: self.items_src,
106.                filter: "contains",
107.                change: function(e) {
108.                    options.model.set('ItemID', e.sender.dataItem().ItemID);
109.                }
110.            });
111.    };
112.
113.    self.vendorDropDownEditor = function (container, options) {
114.
115.        $('<input required data-text-field="BusinessPartnerName" data-value-field="BusinessPartnerName" data-bind="value:' + options.field + '"/>')
116.            .appendTo(container)
117.            .kendoComboBox({
118.                autoBind: false,
119.                filter: "contains",
120.                select: "",
121.                serverFiltering: false,
122.                optionLabel: { BusinessPartnerName: "", BusinessPartnerID: 0 },
123.                dataSource: self.vendors_src,
124.                change: function(e) {
125.                    options.model.set('VendorId', e.sender.dataItem().BusinessPartnerID);
126.                }
127.            });
128.    };
129.
130.    self.updateTotal = function (e) {
131.        var r = e.values.Price ? e.values.Price : e.model.Price;
132.        var q = e.values.Quantity ? e.values.Quantity : e.model.Quantity;
133.        e.model.set('Total', q * r);
134.    }
135.
136.    self.init = function () {
137.
138.        var tools = null;
139.        var row_commands = null;
140.        if (self.IS_EDITABLE) {
141.            tools = [
142.                { name: "save", text: "Save" },
143.                { name: "create", text: "Add" },
144.                { name: "cancel", text: "Cancel" }
145.            ];
146.            row_commands = [{
147.                name: "destroy",
148.                template: '<a href="##" class="k-grid-delete"></a>'
149.            }]
150.        } else {
151.            $(self.GRID_ID).addClass('readonly');
152.        }
153.        $(self.GRID_ID).kendoGrid({
154.            toolbar: tools,
155.            save: self.updateTotal,
156.            detailTemplate: kendo.template($("#SubItem").html()),
157.            detailInit: self.detailInit,
158.            dataBound: function () {
159.//              this.expandRow(this.tbody.find("tr.k-master-row").first());
160.            },
161.
162.            columns: [
163.                { field: "ItemName", title: "Item Type", editor: self.itemDropDownEditor },
164.                { field: "BusinessPartnerName", title: "Vendor", editor: self.vendorDropDownEditor },
165.                { field: "Description" },
166.                { field: "Price", title: "Price", format: "{0:c}", width: 90, editor: GridCommon.notEditable },
167.                { field: "Quantity", title: "QTY", width: 65, editor: GridCommon.numberEditor },
168.
169.                { field: "Total", editor: GridCommon.notEditable, format: "{0:c}", width: 95 },
170.                { command: row_commands, width: 40 }
171.            ],
172.
173.            pageable: true,
174.            scrollable: true,
175.            editable: self.IS_EDITABLE,
176.            navigatable: true,
177.            sortable: true,
178.            batch: true,
179.
180.            dataSource: self.mr_source,
181.            saveChanges: GridCommon.saveAll
182.        });
183.    }
184.
185.    self.items_src = new kendo.data.DataSource({
186.        transport: {
187.            read: {
188.                url: "/EquipmentEntry/GetItems",
189.                dataType: "json",
190.                type: "GET"
191.            }
192.        },
193.
194.        error: GridCommon.showCallBackError
195.    });
196.
197.    self.tempSubItemId = null;
198.
199.    self.detailInit = function (context) {
200.        var detailRow = context.detailRow;
201.        var masterRow = context.masterRow;
202.        var mrModel = context.data;
203.        var grid = this;
204.        var viewCollection = grid.dataSource.view();
205.
206.        var subItemContainer = detailRow.find(".sub-item");
207.        var subItemSerialContainer = detailRow.find(".sub-item-serial");
208.
209.        $('<input required data-text-field="ExtendedItemName" data-value-field="ExtendedItemName" data-bind="value: ?ItemID" data-mr-sub-uid="'+ mrModel.uid +'"/>')
210.            .appendTo(subItemContainer)
211.            .kendoDropDownList({
212.                autoBind: false,
213.                dataTextField: "ExtendedItemName",
214.                dataValueField: "ItemID",
215.                dataSource: self.items_src,
216.                optionLabel: { ExtendedItemName: GridCommon.emptyText, ItemID: 0 },
217.                change: function (ee) {
218.                    var ds = $(self.GRID_ID).data('kendoGrid').dataSource;
219.                    var mrUid = ee.sender.element.data('mr-sub-uid');
220.                    var mr = grid.dataSource.getByUid(mrUid);
221.                    var newItem = ee.sender.dataItem();
222.                    mr.set('SubItemId', newItem.ItemID);
223.                    mr.set('SubItemName', newItem.ItemName);
224.                    //self.tempSubItemId = ee.sender.dataItem().ItemID;
225.                }
226.            });
227.
228.
229.        $('<input required data-text-field="Description" data-value-field="Description" data-bind="value:SubItemSerialId"/>')
230.            .appendTo(subItemSerialContainer)
231.            .kendoDropDownList({
232.                autoBind: false,
233.                dataTextField: "Description",
234.                dataValueField: "ItemSerialID",
235.                optionLabel: { Description: GridCommon.emptyText, ItemSerialID: 0 },
236.                dataBound: function () {
237.                    if (this.dataSource.data().length == 0) {
238.                        this.enable(false);
239.
240.                        this.text("No items found");
241.                    }
242.                },
243.                dataSource: {
244.                    transport: {
245.                        read: {
246.                            url: "/EquipmentEntry/GetSerials",
247.                            dataType: "json",
248.                            type: "GET",
249.                            data: function () {
250.                                return {
251.                                    itemid: self.tempSubItemId,
252.                                    exclude_List: "0"
253.                                };
254.                            }
255.                        }
256.                    },
257.
258.                    error: GridCommon.showCallBackError
259.                }
260.            });
261.    }
262.}

Any ideas?

[Petur Subev]

Hello Shea,

I am not sure why exactly "SubItemId" is not bound successfully, and we need a project to investigate further.

 Regarding the second question - this rebinding of the outer Grid is expected, because the 'change' event of the inner Grid is actually the 'change' event of the master Grid (you are using the same dataSource). The Grid will automatically respond to that change and refresh itself, thus the expanded details will become collapsed.

You can try to again re-open the collapsed detailView, similar way to the approach used in this JsBin.

Kind Regards,
Petur Subev
Telerik

[Shea]

I did get this working. I had to manually do the cascading, though it is a a bit of a mess. It is part of a very large project, so I don't have time to bundle up just the relevant code. But here is the JS for what I got working. I am sure there is a cleaner way to do it, but this is what I ended up with:

001.function MrItemsGrid(mr_ID, grid_id, is_editable, default_billable) {
002.    var self = this;
003.    self.mr_ID = mr_ID;
004.    self.GRID_ID = '#' + grid_id;
005.    self.HANDLER_URL = "/MaterialRequestItem";
006.    self.IS_EDITABLE = is_editable;
007.    self.DEFAULT_BILLABLE = default_billable;
008.
009.    self.mr_source = new kendo.data.DataSource({
010.        batch: true,
011.        filter: [],
012.        serverPaging: true,
013.        serverSorting: true,
014.        serverFiltering: true,
015.        serverGrouping: true,
016.        serverAggregates: true,
017.        type: "aspnetmvc-ajax",
018.        pageSize: 50,
019.        schema: {
020.            data: "Data",
021.            total: "Total",
022.            errors: "Errors",
023.            model: {
024.                id: "MaterialRequestItemId",
025.                fields: {
026.                    MaterialRequestItemId: { type: "string" },
027.                    MaterialRequisitionId: { type: "string", defaultValue: self.mr_ID },
028.
029.                    ItemID: { type: "number", defaultValue: 0 },
030.                    ItemName: { type: "string", defaultValue: "" },
031.
032.                    SubItemId: { type: "number", defaultValue: null },
033.                    SubItemName: { type: "string", defaultValue: "" },
034.
035.                    SubItemSerialId: { type: "number", defaultValue: null },
036.                    SubItemSerialNumber: { type: "string", defaultValue: "" },
037.
038.                    BusinessPartnerID: { type: "number", defaultValue: null },
039.                    BusinessPartnerName: { type: "string", defaultValue: "" },
040.
041.                    Description: { type: "string" },
042.
043.                    Price: { type: "number", defaultValue: 0 },
044.                    Quantity: { type: "number", defaultValue: 0, validation: { required: true, min: 0 } },
045.                    Total: { type: "number", defaultValue: 0 },
046.                },
047.            }
048.        },
049.
050.        transport: {
051.            prefix: "",
052.            read: {
053.                url: self.HANDLER_URL + "/Read?mrId=" + self.mr_ID,
054.                type: "GET",
055.                cache: false,
056.            },
057.            update: {
058.                url: self.HANDLER_URL + "/Update",
059.                type: "PUT",
060.            },
061.            create: {
062.                url: self.HANDLER_URL + "/Create",
063.                type: "POST",
064.            },
065.            destroy: {
066.                url: self.HANDLER_URL + "/Destroy",
067.                type: "DELETE",
068.            }
069.        },
070.
071.        error: GridCommon.showCallBackError
072.    });
073.
074.    self.items_src = new kendo.data.DataSource({
075.        transport: {
076.            read: {
077.                url: GridCommon.ITEMS_HANDLER_URL + "/GetItems",
078.                dataType: "json",
079.                type: "GET"
080.            }
081.        },
082.        error: GridCommon.showCallBackError
083.    });
084.
085.    self.items_with_serials_src = new kendo.data.DataSource({
086.        transport: {
087.            read: {
088.                url: GridCommon.ITEMS_HANDLER_URL + "/GetItems?withSerials=true",
089.                dataType: "json",
090.                type: "GET"
091.            }
092.        },
093.
094.        error: GridCommon.showCallBackError
095.    });
096.
097.    self.vendors_src = new kendo.data.DataSource({
098.        transport: {
099.            read: {
100.                url: GridCommon.BP_HANDLER_URL + "/GetVendors",
101.                dataType: "json",
102.                type: "GET"
103.            }
104.        },
105.        error: GridCommon.showCallBackError
106.    });
107.
108.    self.itemDropDownEditor = function(container, options) {
109.
110.        $('<input required data-text-field="ExtendedItemName" data-value-field="ItemName" data-bind="value:' + options.field + '"/>')
111.            .appendTo(container)
112.            .kendoComboBox({
113.                autoBind: false,
114.                serverFiltering: false,
115.                select: "",
116.                optionLabel: { ExtendedItemName: "", ItemID: 0 },
117.                dataSource: self.items_src,
118.                filter: "contains",
119.                change: function(e) {
120.                    options.model.set('ItemID', e.sender.dataItem().ItemID);
121.                }
122.            });
123.    };
124.
125.    self.vendorDropDownEditor = function (container, options) {
126.
127.        $('<input required data-text-field="BusinessPartnerName" data-value-field="BusinessPartnerName" data-bind="value:' + options.field + '"/>')
128.            .appendTo(container)
129.            .kendoComboBox({
130.                autoBind: false,
131.                filter: "contains",
132.                select: "",
133.                serverFiltering: false,
134.                optionLabel: { BusinessPartnerName: "", BusinessPartnerID: 0 },
135.                dataSource: self.vendors_src,
136.                change: function(e) {
137.                    options.model.set('VendorId', e.sender.dataItem().BusinessPartnerID);
138.                }
139.            });
140.    };
141.
142.    self.updateTotal = function (e) {
143.        var r = e.values.Price ? e.values.Price : e.model.Price;
144.        var q = e.values.Quantity ? e.values.Quantity : e.model.Quantity;
145.        e.model.set('Total', q * r);
146.    }
147.
148.    self.init = function () {
149.
150.        var tools = null;
151.        var row_commands = null;
152.        if (self.IS_EDITABLE) {
153.            tools = [
154.                { name: "save", text: "Save" },
155.                { name: "create", text: "Add" },
156.                { name: "cancel", text: "Cancel" }
157.            ];
158.            row_commands = [{
159.                name: "destroy",
160.                template: '<a href="##" class="k-grid-delete"></a>'
161.            }]
162.        } else {
163.            $(self.GRID_ID).addClass('readonly');
164.        }
165.        $(self.GRID_ID).kendoGrid({
166.            toolbar: tools,
167.            save: self.updateTotal,
168.            detailTemplate: kendo.template($("#SubItem").html()),
169.            detailInit: self.detailInit,
170.            dataBound: function () {
171.//              this.expandRow(this.tbody.find("tr.k-master-row").first());
172.            },
173.
174.            columns: [
175.                { field: "ItemName", title: "Item Type", editor: self.itemDropDownEditor },
176.                { field: "BusinessPartnerName", title: "Vendor", editor: self.vendorDropDownEditor },
177.                { field: "Description" },
178.                { field: "Price", title: "Price", format: "{0:c}", width: 90, editor: GridCommon.notEditable },
179.                { field: "Quantity", title: "QTY", width: 65, editor: GridCommon.numberEditor },
180.
181.                { field: "Total", editor: GridCommon.notEditable, format: "{0:c}", width: 95 },
182.                { command: row_commands, width: 40 }
183.            ],
184.
185.            pageable: true,
186.            scrollable: true,
187.            editable: self.IS_EDITABLE,
188.            navigatable: true,
189.            sortable: true,
190.            batch: true,
191.
192.            dataSource: self.mr_source,
193.            saveChanges: GridCommon.saveAll,
194.            remove: GridCommon.saveOnDelete
195.        });
196.    }
197.
198.    self.tempSubItemId = null;
199.
200.    self.detailInit = function (context) {
201.        var mrModel = context.data;
202.
203.        var detailRow = context.detailRow;
204.        var subItemContainer = detailRow.find(".sub-item");
205.        var subItemSerialContainer = detailRow.find(".sub-item-serial");
206.        var passThrough = detailRow.find("input[name=PassThrough]");
207.
208.        $(passThrough).prop('disabled', !self.IS_EDITABLE);
209.        $(passThrough).prop('checked', mrModel.PassThrough);
210.        passThrough.change(function (e) {
211.            mrModel.PassThrough = $(this).prop('checked');
212.            mrModel.dirty = true;
213.        });
214.
215.        $('<input required data-text-field="ExtendedItemName" data-value-field="ItemID" />')
216.            .appendTo(subItemContainer)
217.            .kendoComboBox({
218.                autoBind: false,
219.                dataTextField: "ExtendedItemName",
220.                dataValueField: "ItemID",
221.                dataSource: self.items_with_serials_src,
222.                filter: "contains",
223.                value: mrModel.SubItemId,
224.                text: mrModel.SubItemName,
225.                enable: self.IS_EDITABLE,
226.                optionLabel: { ExtendedItemName: "", ItemID: 0 },
227.                //optionLabel: { ExtendedItemName: GridCommon.emptyText, ItemID: 0 },
228.                //dataBound: function (ee) {
229.                //    this.value(0);
230.                //    if (this.dataSource.data().length === 0) {
231.                //        this.enable(false);
232.                //        this.text("No items with serial #'s found");
233.                //        console.log("No items with serial #'s found")
234.                //    } else {
235.                //        console.log('has ' + this.dataSource.data().length + ' items.')
236.                //        this.enable(true);
237.                //        this.text(GridCommon.emptyText);
238.                //    }
239.                //},
240.                change: function (ee) {
241.                    var newItem = ee.sender.dataItem();
242.                    if (!newItem)
243.                    {
244.                        return;
245.                    }
246.
247.                    mrModel.SubItemId = newItem.ItemID;
248.                    mrModel.SubItemName = newItem.ItemName;
249.                    mrModel.dirty = true;
250.
251.                    mrModel.SubItemSerialId = null;
252.                    mrModel.SubItemSerialNumber = null;
253.
254.                    //var serialDropDown = ee.sender.element.parent().parent().parent().find('.sub-item-serial').find('input').data('kendoComboBox');
255.                    var serialDropDown = ee.sender.element.parent().parent().parent().find('.sub-item-serial').find('input[data-role=combobox]').data('kendoComboBox');
256.                    serialDropDown.dataSource.read();
257.                    serialDropDown.select(0);
258.                }
259.            });
260.
261.
262.        $('<input required data-text-field="Description" data-value-field="ItemSerialId" />')
263.            .appendTo(subItemSerialContainer)
264.            .kendoComboBox({
265.                enable: self.IS_EDITABLE,
266.                text: mrModel.SubItemSerialNumber,
267.                value: mrModel.SubItemSerialId,
268.                filter: "contains",
269.                autoBind: true,
270.                dataTextField: "Description",
271.                dataValueField: "ItemSerialID",
272.                optionLabel: { Description: "", ItemSerialID: 0 },
273.                //optionLabel: { Description: GridCommon.emptyText, ItemSerialID: 0 },
274.                //dataBound: function (ee) {
275.                //    this.value(0);
276.                //    if (this.dataSource.data().length === 0) {
277.                //        this.enable(false);
278.                //        this.text("No items found");
279.                //        console.log("no items")
280.                //    } else {
281.                //        console.log('has ' + this.dataSource.data().length + ' serials.')
282.                //        this.enable(true);
283.                //        this.text(GridCommon.emptyText);
284.                //    }
285.                //},
286.                dataSource: {
287.                    transport: {
288.                        read: {
289.                            url: GridCommon.ITEMS_HANDLER_URL + "/GetSerials",
290.                            dataType: "json",
291.                            type: "GET",
292.                            data: function () {
293.                                console.log("Reading serials for subItemId = " + mrModel.SubItemName);
294.                                return {
295.                                    itemid: mrModel.SubItemId,
296.                                    exclude_List: "0"
297.                                };
298.                            }
299.                        }
300.                    },
301.
302.                    error: GridCommon.showCallBackError
303.                },
304.                change: function (ee) {
305.                    var newItem = ee.sender.dataItem();
306.                    if (!newItem) {
307.                        return;
308.                    }
309.                    mrModel.SubItemSerialId = newItem.ItemSerialID;
310.                    mrModel.SubItemSerialNumber = newItem.Description;
311.                    mrModel.dirty = true;
312.                }
313.            });
314.    }
315.}

If there are any obvious lines I can change to make things better, then please let me know.