Kendo Grid inside Kendo Window / Modal

[code language=”html”]
<div id="window">
<div id="lookup-grid" class="grid"></div>
</div>
[/code]

[code language=”javascript”]
var ds;

function OpenLookup() {
ds.read();
var dialog = $("#window").data("kendoWindow");
dialog.open().center();
}

function SelectItem(e) {
e.preventDefault();
var data = this.dataItem(getDataRowGrid(e));
$(‘#window’).data(‘kendoWindow’).close();
$(‘#TableCustomerId’).val(data.CustomerId);
$(‘#TableCustomerCode’).val(data.CustomerCode);
$(‘#TableCustomerName’).val(data.CustomerName);
}

$(document).ready(function () {
ds = new kendo.data.DataSource({
pageable: true,
pageSize: 10,
serverFiltering: true,
serverPaging: true,
serverSorting: true,
sortable:true,
transport: {
read: {
url: "@Url.Action("Binding", "Customer", new { area = "" })",
dataType: "json",
type:"POST",
},
parameterMap: function (options, operation) {
if (operation !== "read" && options != ”) {
return kendo.stringify(options);
}
else if (operation == "read") {
return options;
}
}
},
schema: {
data: "data",
total: "total",
model: {
fields: {
//…
}
}
},
filter: { field: ‘CustomerType’, operator: ‘eq’, value: ‘@CustomerTypeEnum.PERSONAL.ToString()’ }
});

$("#lookup-grid").kendoGrid({
dataSource: ds,
autoBind: false,
filterable: kendoGridFilterable,
pageable: true,
sortable: true,
resizable: true,
columns: [
{
command: [
{
name: "view",
text: "view",
click: SelectItem,
imageClass: "glyphicon glyphicon-ok",
template: ‘<a class="k-button-icon #=className#" title="view" #=attr# href="javascript:"><span class="#=imageClass#"></span></a>’
},
],
width: 50
},
{
field: "CustomerCode",
title: "Customer ID",
},
{
field: "CustomerName",
title: "Customer Name",
},
],
});

$(‘#window’).kendoWindow({
title: "CIF Lookup",
width: 650,
visible: false,
modal: true,
});
});
[/code]

Chandra Oemaryadi has written 244 articles

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>