Kendo-grid locked column and grouping

14 posts, 0 answers
  1. Nik
    Nik avatar
    4 posts
    Member since:
    Oct 2014

    Posted 23 Oct 2014 Link to this post

    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
                        }
                    ]
                });
            });
  2. Piyush Bhatt
    Piyush Bhatt avatar
    17 posts
    Member since:
    Oct 2014

    Posted 23 Oct 2014 Link to this post

    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.
  3. Kendo UI is VS 2017 Ready
  4. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 27 Oct 2014 Link to this post

    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!
     
  5. Nik
    Nik avatar
    4 posts
    Member since:
    Oct 2014

    Posted 28 Oct 2014 in reply to Alexander Popov Link to this post

    Hello Alexander.
    Thanks a lot. It works.
  6. Piyush Bhatt
    Piyush Bhatt avatar
    17 posts
    Member since:
    Oct 2014

    Posted 28 Oct 2014 Link to this post

    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
  7. Daniel
    Daniel avatar
    4 posts
    Member since:
    May 2015

    Posted 14 Jan Link to this post

    This solution was working perfectly until release 2016.1.112

    Please could someone tell what changed?

  8. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 18 Jan Link to this post

    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!
     
  9. Fredde
    Fredde avatar
    1 posts
    Member since:
    Oct 2015

    Posted 23 Feb in reply to Alexander Popov Link to this post

    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

     

  10. Daniel
    Daniel avatar
    1 posts
    Member since:
    Feb 2014

    Posted 24 Feb Link to this post

    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?

  11. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 25 Feb Link to this post

    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!
     
  12. Sylvain
    Sylvain avatar
    24 posts
    Member since:
    Feb 2011

    Posted 21 Nov in reply to Alexander Popov Link to this post

    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?
  13. Sylvain
    Sylvain avatar
    24 posts
    Member since:
    Feb 2011

    Posted 22 Nov in reply to Sylvain Link to this post

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

  14. Sylvain
    Sylvain avatar
    24 posts
    Member since:
    Feb 2011

    Posted 22 Nov in reply to Sylvain Link to this post

    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();
  15. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 23 Nov Link to this post

    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.
Back to Top
Kendo UI is VS 2017 Ready