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

Kendo-grid locked column and grouping

13 Answers 867 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Nik
Top achievements
Rank 1
Nik asked on 23 Oct 2014, 09:23 AM
I have grid with locked (frozen) column and grouping like this:

http://demos.telerik.com/kendo-ui/grid/frozen-columns

But I have only one frozen column and small width.

And when I group by column with long string values (eg ship address),
these group values in group header displayed in multiple lines.

Screen 1
Screen 2

How show group header in one line even if first part of grid (with locked columns) has small width?

Source example

$(document).ready(function() {
            $("#grid").kendoGrid({
                dataSource: {
                    type: "odata",
                    transport: {
                        read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
                    },
                    schema: {
                        model: {
                            fields: {
                                OrderID: { type: "number" },
                                ShipCountry: { type: "string" },
                                ShipName: { type: "string" },
                                ShipCity: { type: "string" },
                                ShipAddress: { type: "string" }
                            }
                        }
                    },
                    pageSize: 30,
                    group: { field: "ShipName" }
                },
                height: 540,
                sortable: true,
                reorderable: true,
                groupable: true,
                resizable: true,
                filterable: true,
                columnMenu: true,
                pageable: true,
                columns: [ {
                        field: "OrderID",
                        title: "Order ID",
                        locked: true,
                        lockable: false,
                        width: 50
                    }, {
                        field: "ShipCountry",
                        title: "Ship Country",
                        width: 300
                    }, {
                        field: "ShipCity",
                        title: "Ship City",
                        width: 300
                    },{
                        field: "ShipName",
                        title: "Ship Name",
                        width: 300
                    },  {
                        field: "ShipAddress",
                        width: 400
                    }
                ]
            });
        });

13 Answers, 1 is accepted

Sort by
0
Piyush Bhatt
Top achievements
Rank 1
answered on 23 Oct 2014, 08:44 PM
We have the exact same problem - it looks like anything within .k-grid-content-locked cannot be expanded outside of it. If we set the overflow: visible then the locked column values show up outside of the grid. This needs to be resolved.
0
Alexander Popov
Telerik team
answered on 27 Oct 2014, 09:26 AM
Hello Nik, Piyush,

I am afraid that this behavior is currently not supported out of the box, because locked and regular columns are rendered in separate table elements.
It is possible to use the Grid's dataBound event to manually move the text to the wider table and leave the expand/collapse button in the locked table's cells. Here is an example how this could be implemented.

Regards,
Alexander Popov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Nik
Top achievements
Rank 1
answered on 28 Oct 2014, 03:27 PM
Hello Alexander.
Thanks a lot. It works.
0
Piyush Bhatt
Top achievements
Rank 1
answered on 28 Oct 2014, 04:08 PM
Here is the reusuable function - also notice that it makes the grouping row height same as other row heights. Hope this helps.

kendo.ui.Grid.fn.fixGroupableLockColumn = function () {
    var grid = this;
    try {
        if (this.lockedTable != undefined) {
            var height = grid.tbody.find("tr:not(.k-grouping-row)").find(":eq(0)").css("height");
            this.lockedTable.find(".k-grouping-row").css("height", height).each(function (index) {
                var arrow = $(this).find("a");
                grid.tbody.find(".k-grouping-row").css("height", height);
                grid.tbody.find(".k-grouping-row:eq(" + index + ") td").text($(this).text());
                $(this).find("p").text(" ").append(arrow);
            });
        }
    }
    catch (err) { console.log(err); }
}//fixGroupableLockColumn
0
Daniel
Top achievements
Rank 1
answered on 14 Jan 2016, 01:57 PM

This solution was working perfectly until release 2016.1.112

Please could someone tell what changed?

0
Alexander Popov
Telerik team
answered on 18 Jan 2016, 11:52 AM
Hello Daniel,

I tried comparing the results between the example I originally shared and the one using the latest version. I got exactly the same results, so would you please let me know if I am missing something?

Regards,
Alexander Popov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Fredde
Top achievements
Rank 1
answered on 23 Feb 2016, 01:05 PM

Hi Alexander,

There is a bug in the latest version. Changing to "2016.1.112" in your example breaks the collapse functionality of the grouping when a locked column exists (only the first row is hidden). You can see the same bug in the demo page of frozen columns (http://demos.telerik.com/aspnet-mvc/grid/frozen-columns)

Br, Fredrik

 

0
Daniel
Top achievements
Rank 1
answered on 25 Feb 2016, 05:48 AM

I am having the same problem mentioned by Fredde. Just to elaborate a little, drag the Ship Country column into the grouping section, and then collapse the "Ship Country: Argentina" grouping row. It will only collapse the first row of the columns that aren't locked.

Is this a logged bug that can be tracked? Any known workaround?

0
Alexander Popov
Telerik team
answered on 25 Feb 2016, 11:44 AM
Hello Daniel,

I apologize for the misunderstanding.
The issue was fixed shortly after the release which introduced it. I would recommend upgrading to the latest internal build, where it is no longer present.

Regards,
Alexander Popov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Sylvain
Top achievements
Rank 1
answered on 21 Nov 2016, 12:51 PM
Hi Alexander, I'm using your sample from your last post or from this page : http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Layout/change-group-header-position-when-locked-columns-are-used
It's not working out of the box, when you try it in Dojo, you will notice that after grouping for any column the '.k-grouping-row' is very tall,
after that if you resize a bit any column, the row will have the correct height, is there any way to workaround this?
0
Sylvain
Top achievements
Rank 1
answered on 22 Nov 2016, 01:37 PM

I fixed my issue using this (not very pretty), any better way?: 

//Makes sure the height of group headers is correct
grid._applyLockedContainersWidth();
grid._syncLockedContentHeight();
grid._syncLockedHeaderHeight();

0
Sylvain
Top achievements
Rank 1
answered on 22 Nov 2016, 01:39 PM
I fixed the issue using those three lines (not very pretty). Any other suggestions?

//Makes sure the height of group headers is correct
grid._applyLockedContainersWidth();
grid._syncLockedContentHeight();
grid._syncLockedHeaderHeight();
0
Alexander Popov
Telerik team
answered on 23 Nov 2016, 11:18 AM
Hello Sylvain,

This looks like an acceptable solution for resizing the grouping row.

Regards,
Alexander Popov
Telerik by Progress
Kendo UI is ready for Visual Studio 2017 RC! Learn more.
Tags
Grid
Asked by
Nik
Top achievements
Rank 1
Answers by
Piyush Bhatt
Top achievements
Rank 1
Alexander Popov
Telerik team
Nik
Top achievements
Rank 1
Daniel
Top achievements
Rank 1
Fredde
Top achievements
Rank 1
Daniel
Top achievements
Rank 1
Sylvain
Top achievements
Rank 1
Share this question
or