Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

Column re-sizing when header has style of 'position:fixed'

6 Answers 1034 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Abhishek
Top achievements
Rank 1
Abhishek asked on 30 Sep 2014, 03:01 PM
Hi,

 We have a case where we have applied the css style of 'position: fixed' on thead element of the grid. We have given the grid header columns as certain widths. Now when we try to resize the column, resize handle doesn't appear - we change its top position and then it appears. But still the column resize event doesn't fire.
 We can't use the grid's locked property as we don't want scroll bar on the grid, but it should be on the page.

 Could you please let me know where is the issue. 

Thanks a lot.

6 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 02 Oct 2014, 02:26 PM
Hello Abhishek,

The described scenario is considered too hackish and is not supported due to the numerous complications and side effects.

You can use a fixed Grid header when scrolling is enabled. and the Grid header area is in a separate <table>. I have provided an example below. However, it really doesn't make much sense, given that you can use an auto-expanding 100% high Grid with a lot less hassle, as in the following jsFiddle example:

http://jsfiddle.net/dimodi/war0v0u3/


<!DOCTYPE html>
<html>
<head>
    <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <style>
     
        html,
        body
        {
            margin: 0;
            padding: 0;
        }
     
        #grid,
        #grid .k-grid-header
        {
            width: 100%;
            border-width: 0;
            padding: 0 !important;
        }
         
        #grid .k-grid-header
        {
            position: fixed;
            top: 0;
            z-index: 2;
        }
         
        #grid > .k-grid-content
        {
            overflow: visible !important;
        }       
    </style>
</head>
<body>
     
        <div id="example">
            <div id="grid"></div>
 
            <script>
                $(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" },
                                        ShipCity: { type: "string" },
                                        ShipName: { type: "string" },
                                        OrderDate: { type: "date" },
                                        ShippedDate: { type: "date" }
                                    }
                                }
                            },
                            pageSize: 100
                        },
                        sortable: true,
                        resizable: true,
                        pageable: true,
                        columns: [
                            {
                                field: "OrderDate",
                                title: "Order Date",
                                width: 120,
                                format: "{0:MM/dd/yyyy}"
                            },
                            {
                                field: "ShipCountry",
                                title: "Ship Country"
                            },
                            {
                                field: "ShipCity",
                                title: "Ship City"
                            },
                            {
                                field: "ShipName",
                                title: "Ship Name"
                            },
                            {
                                field: "ShippedDate",
                                title: "Shipped Date",
                                format: "{0:MM/dd/yyyy}",
                                width: 200
                            },
                            {
                                field: "OrderID",
                                title: "ID",
                                width: 80
                            }
                        ]
                    });
                     
                    $(document.body).css("padding-top", $("#grid > .k-grid-header").height());
                    var w = $("#grid .k-grid-header-wrap").width();
                    $("#grid .k-grid-header-wrap").css("width", w - kendo.support.scrollbar());
                });
            </script>
        </div>
 
 
</body>
</html>


Regards,
Dimo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Abhishek
Top achievements
Rank 1
answered on 09 Oct 2014, 05:00 AM
Hi Dimo,

 I fully understand that it is hackish!. But our scenario is that we want to have scroll on the page instead of on the grid. Also we want to freeze grid headers and support column re-sizing. So what is the best approach to solve this? If you want I can open a support ticket for this?

 Thanks a lot in advance.
0
Accepted
Dimo
Telerik team
answered on 10 Oct 2014, 06:54 AM
Hello Abhishek,

Here is a modified version of my previous example, which features improved column resizing and horizontal scrolling support.

http://dojo.telerik.com/ewis

I would like to stress once again upon the fact that the demonstrated implementation is a hack. I still don't see the justification behind using it. Keep in mind that you may encounter undesired side effects, limitations or cross-browser issues.

Regards,
Dimo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Abhishek
Top achievements
Rank 1
answered on 31 Oct 2014, 05:18 PM
Thanks Dimo. The sample solved a lot of issues, though I realize that as you said that this may have some limitations. But this is what is required.

Thanks a lot.
0
Abhishek
Top achievements
Rank 1
answered on 04 Nov 2014, 03:07 PM
Hi Dimo,
 One more question on this - is it possible to use grid's virtual scroll using the above solution (having page level scroll bar)? In other words, is it possible to have page level scroll bar and use grid's virtual scroll behavior together?

Thanks a lot.
0
Dimo
Telerik team
answered on 04 Nov 2014, 04:42 PM
Hi Abhishek,

No, using virtual scrolling in this case is not possible.

Regards,
Dimo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Abhishek
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Abhishek
Top achievements
Rank 1
Share this question
or