Strange Moving Behavior

2 posts, 0 answers
  1. Elliot
    Elliot avatar
    59 posts
    Member since:
    May 2012

    Posted 04 Oct 2016 Link to this post

    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.

  2. Alexander Popov
    Alexander Popov avatar
    1442 posts

    Posted 06 Oct 2016 Link to this post

    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.
Back to Top