This is a migrated thread and some comments may be shown as answers.

Strange Moving Behavior

1 Answer 12 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Elliot asked on 04 Oct 2016, 01:09 PM

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">
        <div id="vehicleServicingList" name="vehicleServicingList">
            <section class="page-bar">
                <md-button ng-click="vm.addServicing($event)" ng-disabled="!" aria-label="Add Servicing">
                    <md-tooltip>Add New Servicing</md-tooltip>
                    <md-icon md-svg-icon="plus"></md-icon> Add
                <md-button ng-click="vm.editServicing($event)" ng-disabled=" < 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 ng-click="vm.removeMultipleServices($event)" ng-disabled="! || vm.selectedServices.length < 1" aria-label="Delete Selected Servicing">
                    <md-tooltip>Delete Selected Servicing</md-tooltip>
                    <md-icon md-svg-icon="delete"></md-icon>
            <kendo-grid id="serviceListGrid" name="serviceListGrid" options="vm.serviceListGridOptions" ></kendo-grid>

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.

1 Answer, 1 is accepted

Sort by
Alexander Popov
Telerik team
answered on 06 Oct 2016, 09:40 AM
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.

Alexander Popov
Telerik by Progress
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
Asked by
Top achievements
Rank 1
Answers by
Alexander Popov
Telerik team
Share this question