Create Custom Editor in Detail Template
Environment
| Product | Progress® Kendo UI® Grid for jQuery |
| Operating System | Windows 10 64bit |
| Preferred Language | JavaScript |
Description
How can I create custom editor in the detail template of the Kendo UI Grid for jQuery?
Solution
The following example demonstrates how to create a custom editor in a Grid detail template.
<div id="grid"></div>
<script type="text/x-kendo-template" id="template">
<div class="tabstrip">
<ul>
<li class="k-active">Contact Information</li>
<li>Orders</li>
</ul>
<div>
<div class='employee-details'>
<span class="field-name">First Name: </span> <input type="text" class="k-input k-textbox k-input-solid k-input-md k-rounded-md" data-bind="value:FirstName"/><br />
<span class="field-name"> Last Name: </span> <input type="text" class="k-input k-textbox k-input-solid k-input-md k-rounded-md" data-bind="value:LastName"/><br />
<span class="field-name"> Country: </span> <input type="text" class="k-input k-textbox k-input-solid k-input-md k-rounded-md" data-bind="value:Country"/><br />
</div>
</div>
<div>
<div class="orders"></div>
</div>
</div>
</script>
<script>
var element = $("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
},
pageSize: 5,
serverPaging: true,
serverSorting: true,
schema: {
model: {
id: "EmplyeeID",
fields: {
FirstName: "FirstName",
LastName: "LastName",
Country: "Country"
}
}
}
},
height: 450,
sortable: true,
pageable: true,
detailTemplate: kendo.template($("#template").html()),
detailInit: detailInit,
toolbar: [{ text:"Save Changes", className: "grid-save-changes"}],
columns: [
{
field: "FirstName",
title: "First Name"
},
{
field: "LastName",
title: "Last Name"
},
{
field: "Country"
},
{
field: "City"
},
{
field: "Title"
}
]
});
function detailInit(e) {
var detailRow = e.detailRow;
var model = e.data;
kendo.bind(detailRow,model);
model.bind('change',function(e){
var tr = $('tr[data-uid='+model.uid+']');
$('#grid').data().kendoGrid.expandRow(tr);
})
detailRow.find(".tabstrip").kendoTabStrip({
animation: {
open: { effects: "fadeIn" }
}
});
detailRow.find(".orders").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize:6,
filter: { field: "EmployeeID", operator: "eq", value: e.data.EmployeeID }
},
scrollable: false,
sortable: true,
pageable: true,
columns: [
{ field: "OrderID", width: 70 },
{ field: "ShipCountry", title:"Ship Country", width: 100 },
{ field: "ShipAddress", title:"Ship Address" },
{ field: "ShipName", title: "Ship Name", width: 200 }
]
});
}
</script>
<style>
.employee-details .k-input{
width:50%;
}
.field-name{
width: 100px;
display: inline-block;
}
</style>