I can't figure out what is going on here. I'm trying to make a custom directive for grids and will use element attributes to customize a given instance. In doing so i've made two files
grid-controller.js
grid-directive.js
For sake of brevity i've excluded a lot of the extra code.My problem is whenever I try to open the details of a row the row opens...closes...and the grid appears to refresh. It almost looks like something is crashing and the main grid is refreshing as a result.Here is the associated plunkr with the commented portions fleshed out.
grid-controller.js
app.controller(
'gridController'
, [
'$scope'
,
function
($scope ) {
//Initilization code
$scope.gridOptions = {
//Setup options
};
$scope.detailOptions =
function
(e) {
console.log(
'winning'
);
return
{
dataSource: {
transport: {
read: {
url:
"/detail"
+ e.OrderNumber +
".json"
,
dataType:
'json'
}
},
error:
function
(e) {
console.log(e);
},
pageSize:
true
,
serverPaging:
false
,
serverFiltering:
false
,
serverSorting:
false
,
},
columns: [
{
field:
"ItemCode"
,
label:
"lblItemCode"
,
title:
""
}, {
field:
"ItemDesc"
,
label:
"lblItemDesc"
,
title:
""
}, {
field:
"QuantityOrdered"
,
label:
"lblQuantityOrdered"
,
title:
""
}
],
scrollable:
false
,
sortable:
true
};
}
grid-directive.js
app.directive(
'grid'
,
function
() {
return
{
// Restrict E for element
restrict:
'E'
,
// Here we setup the template for the code we want to replace our directive
template: "<div> \n\
<div kendo-grid=
'grid'
\n\
k-options=
'gridOptions'
\n\
k-data-source=
'dataSource'
>\n\
</div> \n\
<script type=
'text/x-kendo-template'
\n\
id=
'details'
>\n\
<div kendo-grid >\n\
</div>\n\
</script>\n\
</div>",
replace:
true
,
scope: {
},
controller:
"gridController"
,
link:
function
(scope, element, attrs) {
//Gather some attribute data and set it to the gridOptions object
if
(scope.$eval(attrs.detailsGrid))
{
scope.gridOptions.detailTemplate = kendo.template($(
"#details"
).html());
scope.gridOptions.detailInit = scope.detailOptions;
}
//More customization code
scope.dataSource =
new
kendo.data.DataSource({
//Setup dataSource options for main grid
});
}
};
});