Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
230
Who do it get the header to freeze during scroll in igHierarchical grid
posted

Like this:

http://www.igniteui.com/grid/multi-column-headers

I don't want multi-column headers really, just to freeze the column headers during scroll in each level of my hierarchical grid.

Please point me in the right direction and thanks!

Alex

Parents
No Data
Reply
  • 230
    posted

    "How do I get"  :)  Thanks.

    My grid layers have no scroll bars, so maybe it does this automatically.  Not sure how to limit grid layers so they produce a scroll bar.

    Thanks!

Children
  • 17590
    Suggested Answer
    Offline posted in reply to Alex Grape

    Hello Alex,

    Thank you for posting in our community.

    By design igGrid has fixedHeaders option which is set to true. This means that headers will be fixed and only the grid data will be scrollable. In order to limit parent and child grid my suggestion is to set height option for both of them. In this scenario when the container`s height exceeds the value set in height option a scrollbar will appear.  When this happens and user scrolls the header will remain visible and only the grid data will be scrolled.

    I created a small sample illustrating my suggestion for your reference. In my igHierarchicalGrid initialization I am setting height for both parent and layout. For example:

    $("#hierarchicalGrid").igHierarchicalGrid({
                    width: "100%",
        height: "400px",
                    autoGenerateColumns: false,
                    dataSource: northwind,
                    responseDataKey: "results",
                    dataSourceType: "json",
                    features: [
         {
          name: "Sorting",
                            inherit: true
                        },
                        {
          name: "Paging",
                            pageSize: 5,
                            type: "local",
                            inherit: true
                        }
                    ],
                    columns: [
                       { key: "EmployeeID", headerText: "Employee ID", dataType: "number", width: "0%", hidden: true },
                       { key: "FirstName", headerText: "First Name", dataType: "string", width: "20%" },
                       { key: "LastName", headerText: "Last Name", dataType: "string", width: "20%" },
                       { key: "Title", headerText: "Title", dataType: "string", width: "20%" },
                       { key: "Address", headerText: "Address", dataType: "string", width: "25%" },
                       { key: "City", headerText: "City", dataType: "string", width: "15%" }
                    ],
                    autoGenerateLayouts: false,
                    columnLayouts: [
                        {
                            key: "Orders",
                            responseDataKey: "results",
                            width: "800px",
          height: "200px",
                            autoGenerateColumns: false,
                            primaryKey: "OrderID",
                            columns: [
                                { key: "OrderID", headerText: "Order ID", dataType: "number", width: "20%" },
                                { key: "CustomerID", headerText: "Customer ID", dataType: "string", width: "0%", hidden: true },
                                { key: "ShipName", headerText: "Ship Name", dataType: "string", width: "20%" },
                                { key: "ShipAddress", headerText: "Ship Address", dataType: "string", width: "20%" },
                                { key: "ShipCity", headerText: "Ship City", dataType: "string", width: "20%" },
                                { key: "ShipCountry", headerText: "Ship Country", dataType: "string", width: "20%" }
                            ]
                        }
                    ]
                });

    Please have a look at my sample and let mw know whether it helps you achieve your requirement, If this is not an accurate demonstration of what you are trying to achieve please feel free to modify it and send it back to me.

    I hope you find my information helpful.

    igGridHierarachicalGridFixedheaders.zip