Get Free Trial

How to trigger sort on clicking the column header?

Subramanian asked on November 9, 2020

I wanted to sort the column when clicks on the column header. Currently, it works only by clicking the small arrow icon. If I clicked the column header it opens the filter dialog box which I don’t want instead it should be sort.
Can you please suggest to me?

2 answers

Illia Yatsyshyn Illia Yatsyshyn Flexmonster November 10, 2020

Thank you for reaching out.
We suggest checking out the JSFiddle we have prepared to demonstrate the recommended approach.
More information about this approach can be found below:
First, disable the default filtering controls to avoid opening the filter after a click on the header. It is achievable using the grid.showFilter property of the Options Object:

options: {
  grid: {
    showFilter: false

Next, use the customizeCell API call to replace default sorting controls with custom ones:

flexmonster.customizeCell((cell, data) => {
  if (data.type == "header") {
    cell.text = `${data.hierarchy.caption} (${getFlatSortType(data.hierarchy.uniqueName)})`;

function getFlatSortType(uniqueName) { //use this function to retrieve the sorting type of the field
  let flatSort = flexmonster.getFlatSort();
  flatSort = flatSort.filter(item => item.uniqueName == uniqueName);
  return flatSort.length > 0 ? flatSort[0].sort : "unsorted";

Finally, subscribe to the celldoubleclick event and perform sorting after it is triggered:

flexmonster.on("celldoubleclick", (cell) => {
  if (cell.type == "header") { //check if the clicked cell is header
    let currSortType = getFlatSortType(cell.hierarchy.uniqueName); //get current sorting type
    let sortTypeToSet; //declare new sorting type
    switch (currSortType) { //initialize new sorting type based on the current sorting
      case "unsorted":
        sortTypeToSet = "asc";
      case "asc":
        sortTypeToSet = "desc";
      case "desc":
        sortTypeToSet = "unsorted";
    flexmonster.setFlatSort([{ //apply resulting sorting type to the corresponding field using the setFlatSort method
      uniqueName: cell.hierarchy.uniqueName,
      sort: sortTypeToSet

Please note that the celldoubleclick event is a temporary workaround. It is because of a known issue with a cellclick event, which is currently not triggered after clicking on header cells. We will notify you as soon as this issue is fixed so that you could use the cellclick event instead.
Please let us know if it works for you.
Feel free to reach out in case any further questions arise.
Best regards,

Illia Yatsyshyn Illia Yatsyshyn Flexmonster August 19, 2021

We are glad to inform you that the issue with dispatching celldoubleclick instead of cellclick after a single click on flat table headers was fixed.
You are welcome to update the component:
Please let us know if everything works.
Best regards,

Please login or Register to Submit Answer