I have a grid declared as:
columns: [
{ title:
""
, width:
"55px"
, template: kendo.template($(
"#serviceActionsTemplate"
).html()) },
{ field:
"serviceDate"
, title:
"Service Date"
, type:
"date"
, template:
"#= kendo.toString(kendo.parseDate(serviceDate), '"
+ vm.dateFormat +
"') #"
, width:
"120px"
},
{ field:
"serviceType"
, title:
"Service Type"
, width:
"150px"
},
{ field:
"referenceNumber"
, title:
"Ref Number"
, width:
"100px"
},
{ field:
"odometer"
, title:
"Odometer"
, type:
"number"
, format:
"{0:n0}"
, attributes:{style:
"text-align:right;"
}, width:
"100px"
},
{ field:
"engineHours"
, title:
"Engine Hrs"
, type:
"number"
, format:
"{0:n0}"
, attributes: { style:
"text-align:right;"
}, width:
"100px"
},
{ field:
"totalCost"
, title:
"Total Cost"
, type:
"number"
, format:
"{0:c2}"
, attributes: { style:
"text-align:right;"
}, aggregates: [
"sum"
], footerTemplate:
"<div style='float: right'>#= kendo.toString(sum, 'c2') #</div>"
, width:
"90px"
},
{ field:
"itemId"
, title:
"ItemId"
, type:
"number"
, width:
"90px"
, hidden:
true
},
{ field:
"serviceId"
, title:
"ServiceId"
, type:
"number"
, width:
"90px"
, hidden:
true
}
],
autoBind:
false
,
dataSource: vm.serviceListGridData,
editable:
"inline"
,
filterable:
true
,
groupable:
false
,
height: 400,
navigatable:
true
,
pageable:
false
,
resizable:
true
,
scrollable:
true
,
sortable: { mode:
"multiple"
}
}
The html:
<md-tab label=
"Servicing"
>
<md-content>
<div id=
"vehicleServicingList"
name=
"vehicleServicingList"
>
<section class=
"page-bar"
>
<md-button ng-click=
"vm.addServicing($event)"
ng-disabled=
"!vm.security.allowCreateServicing"
aria-label=
"Add Servicing"
>
<md-tooltip>Add New Servicing</md-tooltip>
<md-icon md-svg-icon=
"plus"
></md-icon> Add
</md-button>
<md-button ng-click=
"vm.editServicing($event)"
ng-disabled=
"vm.security.editLevelServicing < 1 || vm.selectedServices.length != 1"
aria-label=
"Edit Servicing"
>
<md-tooltip>Edit Selected Servicing</md-tooltip>
<md-icon md-svg-icon=
"pencil"
></md-icon>
</md-button>
<md-button ng-click=
"vm.removeMultipleServices($event)"
ng-disabled=
"!vm.security.allowDeleteServicing || vm.selectedServices.length < 1"
aria-label=
"Delete Selected Servicing"
>
<md-tooltip>Delete Selected Servicing</md-tooltip>
<md-icon md-svg-icon=
"delete"
></md-icon>
</md-button>
</section>
<kendo-grid id=
"serviceListGrid"
name=
"serviceListGrid"
options=
"vm.serviceListGridOptions"
></kendo-grid>
</div>
</md-content>
</md-tab>
When I attempt to click the checkbox in the first column the grid moves and then I try again and it moves again until it pushes the toolbar off the top.
Please see attached images of how it looks before the click on checkbox and after. The grid seems to push the tabs, toobar and column headers off the top.