Column Locking Not Working in Angular Grid

4 posts, 0 answers
  1. Bob
    Bob avatar
    3 posts
    Member since:
    Sep 2014

    Posted 20 Oct Link to this post

    We get results like the attached "LockingNotWorking" snip, with locking: true.  On rare occasions it works more or less, i.e. the locked and unlocked columns show up, but different column heights.  If you you use the tiny scroll bar and start to resize a column it will snap into a correct format.  The attached "NoLocking" snip shows a normal view with no columns locked.  Here's the code:

    <div id="orcaangulargrid" ng-app="orcaGridApp" ng-controller="OrcaGridController">
        <div kendo-grid id="grid" k-options="gridOptions" k-ng-delay="gridOptions" class="expand-vertical" }></div>
    </div>

    angular.module("orcaGridApp", ["kendo.directives"]).controller("OrcaGridController", function ($scope) {
        $scope.gridOptions = {
            sortable: true,
            filterable: true,
            pageable: { pagesize: 25, pagesizes: [25, 50, 100, 500] },
            navigatable: true,
            editable: true,
            enabled: true,
            scrollable: true,
            resizable: true,
            height: 550,
            dataSource: {
                transport: {
                    read: {
                        url: "/DataSolutions/Grid/Read/" + formId + "?timePeriodId=" + timePeriodId + "&groupId=" + groupId + "&projectId=" + projectId,
                        type: "POST",
                    },
                    update: {
                        url: "/DataSolutions/Grid/Update/" + formId + "?timePeriodId=" + timePeriodId + "&groupId=" + groupId + "&projectId=" + projectId,
                        type: "POST"
                    },
                    create: {
                        url: "/DataSolutions/Grid/Create/" + formId + "?timePeriodId=" + timePeriodId + "&groupId=" + groupId + "&projectId=" + projectId,
                        type: "POST"
                    }
                },
                autoSync: true,
                batch: true,
                schema: {
                    model: {
                        id: "ContextId",
                        fields: {
                            ContextId: { editable: false, type: "" }
                            , ContextName: { editable: false, type: "" }
                            , m_94: { editable: false, type: "" }
                            , m_96: { editable: false, type: "" }
                            , m_76: { editable: false, type: "" }
                            , m_98: { editable: false, type: "" }
                            , m_77: { editable: false, type: "" }
                            , m_330: { editable: false, type: "" }
                            , m_89: { editable: false, type: "" }
                            , m_93: { editable: false, type: "" }
                            , m_91: { editable: false, type: "" }
                        }
                    },
                    data: "data",
                    total: "total"
                },
                pageSize: 25,
                serverPaging: true
            },
            columns: [
                { title: 'Practice Name', width: 150, filterable: true, field: 'ContextName', headerAttributes: { style: 'white-space: normal' }, template: '<span class="locked-column">#=ContextName#/></span>', locked: true }
            //{ title: 'Practice Name', field: 'ContextName', width: 150, editable: true, filterable: false, sortable: true, locked: true, template: '<span class="locked-column">#=ContextName#/></span>', headerAttributes: { style: 'white-space: normal' } }
                , { title: 'Practice Address', field: 'm_94', width: 100, filterable: false, sortable: false, headerAttributes: { style: 'white-space: nowrap' } }
                , { title: 'Practice City', field: 'm_96', width: 200, filterable: false, sortable: false, headerAttributes: { style: 'white-space: nowrap' } }
                , { title: 'WTF?', field: 'm_76', width: 100, filterable: false, sortable: false, headerAttributes: { style: 'white-space: nowrap' } }
                , { title: '*Practice Zip', field: 'm_98', width: 100, filterable: false, sortable: false, headerAttributes: { style: 'white-space: nowrap' } }
                , { title: 'What The Hell?', field: 'm_77', width: 200, filterable: false, sortable: false, headerAttributes: { style: 'white-space: nowrap' } }
                , { title: 'Other work organization type', field: 'm_330', width: 500, filterable: false, sortable: false, headerAttributes: { style: 'white-space: nowrap' } }
                , { title: 'Report Recipient Email', field: 'm_89', width: 100, filterable: false, sortable: false, headerAttributes: { style: 'white-space: nowrap' } }
                , { title: '200', field: 'm_93', width: 100, filterable: false, sortable: false, headerAttributes: { style: 'white-space: nowrap' } }
                , { title: 'Observed Fax Number', field: 'm_91', width: 100, filterable: false, sortable: false, headerAttributes: { style: 'white-space: nowrap' } }]
        };
    })

  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    356 posts

    Posted 24 Oct Link to this post

    Hi Bob,

    I am afraid the mentioned "LockingNotWorking" and "NoLocking" attachments are missing. Can you please make sure that all prerequisites, listed in the following section of our documentation are met:

    http://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance#locked-columns

    I have prepared a simple example, illustrating a resizable Grid with locked columns working as expected withi AngularJS:

    http://dojo.telerik.com/uHOpu/2

    If stripping the custom styles and logic does not resolve the issue, please send us an isolated runnable project, similar to the one above, so we can inspect it further, and determine what might be causing the undesired behavior. Thank you in advance.

    Regards,
    Dimiter Topalov
    Telerik by Progress
    Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
  3. Kendo UI is VS 2017 Ready
  4. Bob
    Bob avatar
    3 posts
    Member since:
    Sep 2014

    Posted 25 Oct Link to this post

    I'm reattaching  the 2 .png files.  The really frustrating thing is that sometimes the locking works, and sometimes if you refresh the page it works, so I think there is a timing related issue as to when the tables for the locked and unlocked columns are created.  I tried catching the dataBound event and doing a resize then, but that didn't help.  

    A couple of other data points:  the column locking seems to work better on a grid where the data is returned more slowly.  We have one datasource that needs to do some extensive calculations before returning and that works most of the time.  Also, we get some variations of the bad results - i.e.we get the columns but the locked and unlocked row sizes are different.

    BTW, when we get the result shown in LockingNotWorking.PNG.  file, if you use the tiny scroll bar to scroll over and start to resize the first column, all the columns pop into proper format.

  5. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 26 Oct Link to this post

    Hello Bob,

    Please try calling the Grid's resize method with a true argument:

    http://docs.telerik.com/kendo-ui/styles-and-layout/using-kendo-in-responsive-web-pages#individual-widget-resizing

    In addition, if the Grid is placed inside a container that changes its visibility or dimensions, the resize() method should be executed only after the Grid has become visible and the overall container layout has been set.

    If the above guidelines do not help to produce the desired result, we will need a live URL or an isolated runnable example in order to find out what exactly causes the problem and suggest how to resolve it.

    Regards,
    Dimo
    Telerik by Progress
    Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
Back to Top
Kendo UI is VS 2017 Ready