AngularJS +Kendo UI Grid template

Posted 2020-10-06 mabel hua

var dataSource = new kendo.data.DataSource({
transport: {
dataType: "json",
read: inputUri + $stateParams.subjectID,
},
pageSize: 10,
});

$scope.mainGridOptions = {
dataSource: dataSource,
//height: 420,
scrollable: false,
sortable: true,
filterable: true,
//pageable: {
// refresh: true,
// pageSizes: true,
// buttonCount: 5
//},
selectable: true,
columns: [
{
field: "Name",
title: "Input Name",
width: "300px"
},
{
field: "Value",
title: "Value",
template: ‘<input type="text" value="#= Value#" />‘
},
{
field: "Page",
title: "Page",
template: ‘<input type="text" value="#= Page#" />‘
}
],
dataBound: function () {
this.expandRow(this.tbody.find("tr.k-master-row").first());
},
noRecords: true
};

$scope.detailGridOptions = function (dataItem) {
return {
dataSource: {
transport: {
dataType: "json",
read: baseUri + $stateParams.documentID,
},
filter: { field: "InputID", operator: "eq", value: dataItem.ID }
},
scrollable: true,
sortable: true,
pageable: false,
columns: [
{ title: "ID", width: "50px", template: "<span class=‘row-number‘></span>" },
{ field: "OptionValue", title: "Value", template: "#if(OptionValue == null) {#<textarea style=‘width:90%‘></textarea>#} else{##:OptionValue##}#" },
{ field: "Page", title: "Page", width: "80px", template: "#if(Page == null) {#<input type=‘text‘ style=‘width:90%‘/>#} else{##:Page##}#" },
{ template: ‘<input type="checkbox" #= IsAnswer ? \‘checked="checked"\‘ : "" # class="chkbx" ng-click="checkboxClicked(dataItem)"/>‘, width: "80px" }
],
selectable: true,
dataBound: function () {
var rows = this.items();
$(rows).each(function () {
var index = $(this).index() + 1;
var rowLabel = $(this).find(".row-number");
$(rowLabel).html(index);
});
}
};
};