--------------------------------HTML----------------------------------------
<div>
<div id="example" class="k-content">
<div id="grdTest">
</div>
<div id="Mydetails">
</div>
</div>
</div>
--------------------------------Script----------------------------------------
<script>
$(document).ready(function () {
debugger;
$('#grdTest').kendoGrid({
dataSource: {
type: "odata",
transport: {
read: {
contentType: "application/json; charset=utf-8",
type: "POST",
url: '/Users/Users/GetUserMasterList'
}
},
pageSize: 10,
type: "json"
},
width: 400,
scrollable: true,
sortable: true,
resizable: true,
filterable: true,
navigatable: true,
selectable: "multiple",
//For column detain Template
detailTemplate: kendo.template($("#Detailtemplate").html()),
//Detail Expand Click
detailInit: detailInit,
pageable: {
numeric: true,
//refresh: true,
pageSizes: [5, 10, 15],
previousNext: true,
input: true,
info: true
},
reorderable: true,
groupable: true,
dataBound: function () {
debugger;
}
,
columns: [{
field: "UserName",
//width: 290,
title: "User"
},
{
width: 40, template: "<input type='checkbox' class='chkbxq' #= Active == '1' ? checked='checked' : '' # />", headerTemplate: "<input id='selectall' class='chkbx' type='checkbox' onclick='ToggleChkBox(this.checked); ' />", attributes: { "class": "myClass", style: "padding: .5em .6em .4em .6em" }
}
]
});
});
//Detail Template Click
function detailInit(e) {
var detailRow = e.detailRow;
detailRow.find(".tabstrip").kendoTabStrip({
animation: {
open: { effects: "fadeIn" }
}
});
//Bind Building in Detail Template
$.post("/Users/Users/GetBuilding", { inUserID: e.data.UserID }, function (DataDetail1) {
if (DataDetail1 != null) {
$(e.detailRow.find(".User")).kendoGrid({
dataSource: DataDetail1,
scrollable: false,
sortable: true,
pageable: true
//,
//columns: [{ field: "POID", title: "PO ID", width: 80 }, { field: "PODetailID", title: "Detail ID", width: 80 }, { field: "Description", title: "Description", width: 400 }, { command: { text: "ViewDetails", click: showDetailDetails }, width: 100}]
});
//bind paging on load
var grid1 = $(e.detailRow.find('.User')).data("kendoGrid");
grid1.dataSource.pageSize(5);
grid1.refresh();
}
});
}
</script>
------------------------------Template-----------------------------------
<script type="text/x-kendo-template" id="Detailtemplate">
<div class="tabstrip">
<ul>
<li class="k-state-active">
User Permission
</li>
</ul>
<div>
<div class="User"></div>
</div>
</div>
</script>
No comments:
Post a Comment