Kendo-grid locked column and grouping

[Nik]

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
                    }
                ]
            });
        });

[Piyush Bhatt]

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.

[Lee]

Has this been resolved? It's been over 8 years. The workaround isn't exactly right. What should happen is the group titles remain in view even when scrolling horizontally and that they are left aligned with the table. 

[Piyush Bhatt]

Not sure really. We must have implemented some work around then.

[Neli]

The desired appearance is still not supported. You can take a look at the suggested approach by Alexander.

In addition, I would suggest you log the idea in our Feedback Portal. This way the community could vote for the idea and could be considered for implementation in a future release.

- https://feedback.telerik.com/kendo-jquery-ui

Regards,

Neli

[Alexander Popov]

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

 

 

[Nik]

Hello Alexander.
Thanks a lot. It works.

[Piyush Bhatt]

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

[Daniel]

This solution was working perfectly until release 2016.1.112

Please could someone tell what changed?

[Alexander Popov]

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

 

 

[Fredde]

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

 

[Daniel]

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?

[Alexander Popov]

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

 

 

[Sylvain]

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?

[Sylvain]

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();

[Sylvain]

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();

[Alexander Popov]

Hello Sylvain,

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

Regards,
Alexander Popov
Telerik by Progress