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:
Any ideas?
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.
}