Strange Moving Behavior

[Elliot]

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.

[Alexander Popov]

Hello Elliot,

I reviewed the code snippets, however neither the template nor the function called on click are availble. I also noticed that no screenshots are atteched. That being said, I am not sure what exactly is causing the behavior you described.
Would you be able to share a sample Dojo where the issue is replicated? That will helps us understand what goes wrong.

Regards,
Alexander Popov
Telerik by Progress