or
var gridResult = $("#grid").kendoGrid({
dataSource: {
type: "aspnetmvc-ajax",
// type: "json",
transport: {
read: "Home/Products_Read"
},
schema: {
data: "data",
total: "total",
model: {
id: "products",
fields: {
Code: { editable: false },
Number: { editable: false },
Name: { editable: false },
Supplier: { editable: false },
Price: { editable: false, type: "number" },
Quantity: { editable: true, type: "number" },
Total: { editable: true, type: "number" }
}
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
selectable: "row",
sortable: true,
pageable: true,
columns: [
{ field: "Number", title: "Number", width: "100px" },
{ field: "Name", title: "Name" },
{ field: "Supplier", title: "Supplier", width: "100px" },
{ field: "Price", title: "Price", width: "100px", format: "{0:n}" },
{ field: "Quantity", title: "Quantity", width: "100px", template: '<
input
data-role
=
"numerictextbox"
data-bind
=
"value: Quantity"
data-max-value
=
"100"
class
=
"quantityTextArea"
/>' },
{ field: "Total", title: "Total", width: "100px", template: "#= Price #" }
],
rowTemplate:
'<
tr
data-uid
=
"#= Code #"
>' +
'<
td
><
span
>${Number}</
span
></
td
>' +
'<
td
><
span
>${Name}</
span
></
td
>' +
'<
td
><
span
>${Supplier}</
span
></
td
>' +
'<
td
><
span
>${Price}</
span
></
td
>' +
'<
td
><
input
data-role
=
"numerictextbox"
data-bind
=
"value: Quantity"
data-max-value
=
"100"
class
=
"quantityTextArea"
/></
td
>' +
'<
td
>#=Price*Quantity#</
td
>' +
'</
tr
>'
});
app =
new
kendo.mobile.Application($(document.body), {
initial:
"rootView"
,
transition:
'slide'
,
loading:
'<h1 class="loading-message">Loading...</h1>'
,
platform:
null
});
<
div
data-role
=
"view"
id
=
"showpostlayout"
data-layout
=
"defaultlayout"
data-reload
=
"true"
>
<
div
data-role
=
"header"
>
<
div
data-role
=
"navbar"
><
a
data-click
=
"closePost"
data-role
=
"button"
data-align
=
"right"
>Close</
a
> </
div
>
</
div
>
<
div
id
=
"mypost"
>
</
div
>
</
div
>
<
script
>
function closePost() {
$("#showpostlayout").kendoMobileModalView("close");
}
</
script
>
$grid = $("<
div
></
div
>");
$grid.filter(
'div'
).css(
"height"
,
'300px'
)
$grid.kendoGrid({});
ConstV7.prototype.resizeGrid =
function
(grid) {
var
gridElement = grid,
dataArea = gridElement.find(
".k-grid-content"
),
gridHeight = gridElement.innerHeight(),
otherElements = gridElement.children().not(
".k-grid-content"
),
otherElementsHeight = 0;
otherElements.each(
function
() {
otherElementsHeight += $(
this
).outerHeight();
});
dataArea.height(gridHeight - otherElementsHeight);
}