Despite the COVID-19 outbreak, our team continues operating at full speed. We are always here to support and answer all your questions.

Feel free to reach out by filling this quick form.

Fill the form
Get Free Trial

How to trigger sort on clicking the column header?

Answered
Subramanian asked on November 9, 2020

Hi,
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?

1 answer

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster November 10, 2020

Hello,
 
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";
        break;
      case "asc":
        sortTypeToSet = "desc";
        break;
      case "desc":
        sortTypeToSet = "unsorted";
        break;
    }
    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

Please login or Register to Submit Answer