or
$(
"#grid"
).kendoGrid({
dataSource: dataSource,
pageable:
true
,
resizable:
true
,
sortable:
true
,
filterable:
true
,
toolbar: [
"create"
],
save:
function
(e) {
e.model.dirty =
true
;
},
detailTemplate: kendo.template($(
"#template"
).html()),
detailInit: detailInit,
columns: [
//{ field: "id", title: "id Name" },
{ field:
"Server_Name"
, title:
"Server Name"
, width:
"150px"
},
{ field:
"Server_IP_Address"
, title:
"Server IP Address"
, width:
"120px"
},
{ field:
"Data_Center_City"
, title:
"City"
, width:
"56px"
},
{ field:
"Data_Center_Location"
, title:
"Data Center Location"
, width:
"156px"
},
{ field:
"Server_Type"
, title:
"Server Type"
, width:
"100px"
},
{ field:
"Server_Instance"
, title:
"Server Instance"
, width:
"120px"
},
{ field:
"Environment"
, title:
"Environment"
, width:
"100px"
, editor: appDropDownEditor },
{ command: [
"edit"
,
"destroy"
], title:
" "
, width:
"170px"
}],
editable:
"inline"
});
}
function
appDropDownEditor(container, options) {
$(
'<input required data-bind="value:'
+ options.field +
'"/>'
)
.appendTo(container)
.kendoMultiSelect({
dataTextField:
"text"
,
dataValueField:
"text"
,
dataSource: [ { text:
"PRD"
}, { text:
"QA"
}, { text:
"DEV"
} ]
});
}
public
ActionResult GetMenu()
{
_menu = GenerateMenuValues();
return
Json(_menu, JsonRequestBehavior.AllowGet);
}
private
List<MenuValues> GenerateMenuValues()
{
return
new
List<MenuValues>()
{
new
MenuValues(){Active =
"active"
, MenuText =
"Home"
, Url =
"\\#"
},
new
MenuValues(){MenuText =
"Web widget"
, Url=
"\\#"
, SubMenu =
new
List<MenuValues>()
{
new
MenuValues(){MenuText =
"Grid widget"
, Url = Url.Action(
"GridWidget"
,
"Home"
)},
new
MenuValues(){MenuText =
"Auto complete"
, Url = Url.Action(
"AutoCompleteWidget"
,
"Home"
)},
new
MenuValues(){MenuText =
"Combo box"
, Url = Url.Action(
"ComboBoxWidget"
,
"Home"
)},
new
MenuValues(){MenuText =
"Dropdown List"
, Url = Url.Action(
"DropdownListWidget"
,
"Home"
)},
new
MenuValues(){MenuText =
"Numeric text"
, Url = Url.Action(
"NumericTextbox"
,
"Home"
)},
new
MenuValues(){MenuText =
"Window"
, Url = Url.Action(
"WindowWidget"
,
"Home"
)},
new
MenuValues(){MenuText =
"Tree view"
, Url = Url.Action(
"TreeViewWidget"
,
"Home"
)},
new
MenuValues(){MenuText =
"Tab strip"
, Url = Url.Action(
"TabStrip"
,
"Home"
)}
}},
new
MenuValues(){MenuText =
"Data Source"
, Url = Url.Action(
"DataSource"
,
"Home"
)},
new
MenuValues(){MenuText =
"MVVM"
, Url = Url.Action(
"Mvvm"
,
"Home"
)}
};
}
<script type=
"text/x-kendo-template"
id=
"menuTemplate"
>
<div class=
"col-md-12"
>
<nav class=
"navbar navbar-static-top"
role=
"navigation"
>
<div class=
"navbar-header"
>
<a class=
"navbar-brand"
href=
"\#"
>Learning Kendo</a>
</div>
<ul class=
"nav navbar-nav"
>
<li>
#= MenuText # </li> // just to test that values are rendering
</ul>
</nav>
</div>
</script>
<script type=
"text/javascript"
>
$(document).ready(
function
() {
var
dataService =
'/DataServices/'
;
var
menuData = $.getJSON(dataService +
'GetMenu'
);
var
menuTemplate = kendo.template($(
'#menuTemplate'
).html())(menuData);
$(
'#templateMenu'
).html(menuTemplate);
});
</script>
.Scrollable(s => s.Virtual(true).Height(532))
public
ActionResult IndexEmployeesGridData([DataSourceRequest] DataSourceRequest request)
{
var model = _employeeService.GetEmployeesDataViewModel(request.Page, request.PageSize).Where(e => e.IsActive);
return
Json(model.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}
dataSource: {
transport: {
read: {
type: "POST",
url: "myurl",
dataType: "json",
contentType: "application/json; charset=utf-8"
},
parameterMap: function (options, operation) {
return { f: JSON.stringify("somedata") };
}
},
schema:
{
//some code here....
}
}
parameterMap: function (options, operation) {
}