locked grid column causes contents to shrink

4 posts, 0 answers
  1. Elliot
    Elliot avatar
    4 posts
    Member since:
    Aug 2014

    Posted 31 May 2015 Link to this post

    I am using angularjs and have a kendo grid defined as follows

     MVC View

    <div id="cumulativeResultView" class="txtLeft" ng-show="currentTab === 'cummulativeView'">
            <div id="clinReportContainer" >
                <div id="kendoGrid" kendo-grid k-options="resultGridOptions" k-rebind="resultGridOptions"
                      style="height:550px; width: 600px;margin-top:45px"></div>
            </div>
        </div>
        <script id="clinReportCellTemplate" type="text/x-kendo-template">
            <span class='ellipsisTxt'>
                #=testCode{0}.result ? testCode{0}.result :'' #
                <span ng-show="showUnits(dataItem, '#=testCode{0}.testCode#') ">#=testCode{0}.units#</span>
            </span>
        </script>

    angular controller

    01.$scope.showUnits = function (dataItem, testCode) {
    02.    if (dataItem['testCode' + testCode] !== undefined)
    03.        return dataItem[testCode].units === 'N';
    04.    else return false;
    05.}
    06.var gridColumns = [
    07.    {
    08.        field: 'collectDate',
    09.        title: 'Collect Date',               
    10.        locked: true,               
    11.        width: '150px'
    12.    },
    13.];
    14.angular.forEach(uniqueTestCodes, function (testCode, key) {
    15.    gridColumns.push({
    16.        field: 'testCode'+testCode,
    17.        title: testCode,
    18.        template:kendo.format($('#clinReportCellTemplate')[0].innerHTML,testCode),
    19.        width:'120px'
    20.    });
    21.});
    22. 
    23.$scope.reportGridData = gridData;
    24.$scope.resultGridOptions = {
    25.    dataSource: { data: gridData },
    26.    columns: gridColumns,
    27.};

     

    When the locked property is set on the Collect date column, the grid contents are minimized and when the page is resized, the unlocked columns size appropriately, but the locked column shows no data. If I remove the locked property the gird displays as expected. What do I need to do to get the locked column to behave?

  2. Dimo
    Admin
    Dimo avatar
    8445 posts

    Posted 02 Jun 2015 Link to this post

    Hello Elliot,

    I am not sure I understand your scenario correctly, but if the browser window is resized while the Grid is not visible, then the widget layout may break (this is something we should fix in the future). In this case, please execute resize() once the Grid becomes visible.

    http://docs.telerik.com/kendo-ui/web/grid/appearance#initialize-the-grid-inside-a-hidden-container

    If your scenario is different and the above information is not applicable, send a runnable example for inspection.

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Elliot
    Elliot avatar
    4 posts
    Member since:
    Aug 2014

    Posted 02 Jun 2015 in reply to Dimo Link to this post

    Hi Dimo,

    Calling resize()  fixed the content, but the locked column contents still had a height of 0px for '.k-grid-content-locked'. I added an additional call to remove the height attribute from the '.k-grid-content-locked' div​ and that has gotten it working for now.

     

    Thanks,

    Elliot

  4. Gaurav
    Gaurav avatar
    4 posts
    Member since:
    Mar 2016

    Posted 15 Dec 2016 in reply to Elliot Link to this post

    Hi,

    I have encountered similar issues with locked columns where columns could be dynamically defined or statically.

    I used to see just one unnamed column with scattered styles and all the defined columns with width as '0px'

    Locked property requires the width to be defined for all the columns if used in column object. I thought of just replying to similar post so that it would be helpful.

Back to Top