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
Hello Aidan,
I am glad that you find my suggestion helpful.
Please let me know if you have any additional questions regarding this matter.
Hi Vasya,
I didn't realise that the doubleClick was tied to right hand side / resize cursor.
So your response resolved the issue.
Thanks
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.