locked grid column causes contents to shrink

[Elliot]

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?

[Dimo]

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

[Elliot]

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

[Gaurav]

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.