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
1145
Support a sequence of single clicks and double clicks on a column's header
posted

Currently if our user single clicks on a column header it will perform a sort ascending, the next single click will perform a sort descending, a third click will remove the sorting.

We now want to support auto column width resizing by double clicking.

However the sorting mechanism is intercepting the double click as two singles and so the auto-resizing does not occur.

Is it possible to support both a series of single clicks and double clicks on column headers?

Regards

Aidan

  • 17590
    Verified Answer
    Offline posted

    Hello Aidan,

    Thank you for posting in our community.

    By design when allowDoubleClickToResize option is enabled the column will be resized only when you click on the right border of the header cell. This means that even when Sorting is enabled this won`t interfere  with the resizing of this column. There is on option called handleTreshold that you could use. This property refers to the width in pixels of the resizing handle which is position at the right side of each resizable column header. Basically, this is the area on the right side of the header cell used for resizing purposes.  

    I made a small sample and I am attaching it for your reference. In my application I set the handleTreshold to 50 (the measure unit is pixels) and I am enabling Sorting feature. When you click on the cell header the sorting is applied. However, when you double click on the right side of the cell header cell is getting correctly resized according to the longest currently visible cell value. For example:

       $("#grid").igGrid({
                    autoGenerateColumns: false,
                    width: "100%",
                    height: "500px",
                    columns: [
                        { headerText: "Product ID", key: "ProductID", dataType: "number", width: "10%" },
                        { headerText: "Product Name", key: "Name", dataType: "string", width: "10%" },
                        { headerText: "Product Number", key: "ProductNumber", dataType: "string", width: "25%" },
                        { headerText: "Make Flag", key: "MakeFlag", dataType: "bool", width: "35%" }
                    ],
                    primaryKey: "ProductID",
                    dataSource: adventureWorks,
                    features: [
                        {
                            name: "Resizing",
                            allowDoubleClickToResize: true,
                            handleThreshold: 50
                        },
                        {
                            name: "Sorting"
                        }
                    ]
                });

    I hope you find my information helpful.

    Please let me know if you have any additional questions regarding this matter.

    igGridDoublieClickResizingSorting.zip