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

locked grid column causes contents to shrink

3 Answers 247 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Elliot
Top achievements
Rank 1
Elliot asked on 31 May 2015, 07:27 PM

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?

3 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 02 Jun 2015, 04:25 PM
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!
0
Elliot
Top achievements
Rank 1
answered on 02 Jun 2015, 06:14 PM

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

0
Gaurav
Top achievements
Rank 1
answered on 15 Dec 2016, 07:06 PM

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.

Tags
Grid
Asked by
Elliot
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Elliot
Top achievements
Rank 1
Gaurav
Top achievements
Rank 1
Share this question
or