Show Custom Editor Using the Selected Item outside the Grid
Environment
| Product | Progress® Kendo UI® Grid for jQuery |
| Operating System | Windows 10 64bit |
| Preferred Language | JavaScript |
Description
How can I show a custom editor which uses the currently selected item outside the Kendo UI Grid for jQuery?
Solution
The following example demonstrates how to use a custom editor, which uses the currently selected item, outside the Grid.
<style>
label{display:block;width:25em;position:relative;line-height:2.6;}
label > .k-textbox, label > .k-button, label > .k-widget{position:absolute;right:0;width:15em;}
label > .checkbox{position:absolute;right:12.4em;top:.3em;font-size:1.1em;}
#grid{margin:2em 0 0;}
</style>
<div id="example">
<form id="gridEditor">
<label>ProductName <input type="text" name="ProductName" data-bind="value: ProductName" required="true" class="k-textbox" /></label>
<label>UnitsInStock <input type="number" name="UnitsInStock" data-role="numerictextbox" required="true" min="0" data-bind="value: UnitsInStock" /></label>
<label>Discontinued <input type="checkbox" name="Discontinued" data-bind="checked: Discontinued" class="checkbox" /></label>
<label>Save changes <button type="button" id="saveChanges" class="k-button">Submit</button></label>
<span class="k-invalid-msg" data-for="ProductName"></span>
<span class="k-invalid-msg" data-for="UnitsInStock"></span>
</form>
<div id="grid"></div>
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 10,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true } }
}
}
}
});
var selectedRow = null;
$("#gridEditor").kendoValidator();
var grid = $("#grid").kendoGrid({
dataSource: dataSource,
change: function(e){
selectedRow = e.sender.select();
var item = e.sender.dataItem(selectedRow);
kendo.bind($("#gridEditor"), item);
},
dataBound: function(e){
if (selectedRow) {
var tr = $("[data-uid='"+ selectedRow.attr("data-uid") +"']");
e.sender.select(tr);
}
if (!selectedRow || !tr[0]) {
grid.select(grid.tbody.children().eq(0));
}
},
pageable: true,
selectable: true,
height: 400,
toolbar: [{template: "<button id='addNew' type='button' class='k-button'>Add new record</button>"}],
columns: [
{ field: "ProductName", title: "Product Name"},
{ field: "UnitsInStock", title:"Units In Stock", width: 200 },
{ field: "Discontinued", width: 200 }]
}).data("kendoGrid");
$("#addNew").click(function(){
var newItem = grid.dataSource.insert({},0);
grid.dataSource.page(1);
grid.select($("[data-uid='"+ newItem.uid +"']"));
});
$("#saveChanges").click(function(){
grid.dataSource.one("requestEnd", function(e) {
alert("Success");
});
grid.saveChanges();
});
});
</script>
</div>