AngularJS +kendo UI Grid Template

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{##:P age##}# "},
{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);
});
}
};
};

AngularJS +kendo UI Grid Template