6
Views
1
Comments
Outsystems Data grid add sort on row header check box column to reverse the sort

Hi 

I have row header multiselect checkbox in data grid and all other field has basic sort of ASC and DESC.

But I want to reset  to its original default order when click on first multiselect checkbox column.

And as well wanted to add icon and tooltip inside multiselect checkbox column.


Thanks

Yash

DataGrid_Focus_Updated.oml
2026-01-28 16-57-48
Mihai Melencu
Champion

Hi @Buddy_Outsystems ,


You can use the following JS in the OnInitialize event to implement the reset sort and the icon & tooltip, I highlighted the parts where you can edit the icon/tooltip.

const gridObj = OutSystems.GridAPI.GridManager.GetGridById($parameters.GridWidgetId);

  • if (gridObj && gridObj.provider) {
  •     const grid = gridObj.provider;
  •     const view = grid.collectionView;

  •     if (!grid.__originalOrderStored) {
  •         view.sourceCollection.forEach(function (item, index) {
  •             item.__originalOrder = index;
  •         });

  •         grid.__originalOrderStored = true;
  •     }

  •     grid.formatItem.addHandler(function (s, e) {
  •         if (e.panel === s.topLeftCells) {
  •             const selectorColIndex = s.rowHeaders.columns.length - 1;

  •             if (e.col === selectorColIndex) {
  •                 e.cell.title = "Click to reset to default order"; // Change tooltip text here 
  •                 e.cell.style.position = "relative";
  •                 e.cell.style.cursor = "pointer";

  •                 if (!e.cell.querySelector(".reset-sort-icon")) {
  •                     const icon = document.createElement("span");
  •                     icon.className = "reset-sort-icon";
  •                     icon.innerHTML = "↕"; // Change icon here

  •                     icon.style.position = "absolute";
  •                     icon.style.left = "4px";
  •                     icon.style.top = "50%";
  •                     icon.style.transform = "translateY(-50%)";
  •                     icon.style.fontSize = "12px";
  •                     icon.style.lineHeight = "12px";
  •                     icon.style.pointerEvents = "none";

  •                     e.cell.appendChild(icon);
  •                 }
  •             }
  •         }
  •     });

  •     grid.hostElement.addEventListener("click", function (event) {
  •         const ht = grid.hitTest(event);

  •         if (!ht || ht.panel !== grid.topLeftCells) {
  •             return;
  •         }

  •         const selectorColIndex = grid.rowHeaders.columns.length - 1;

  •         if (ht.col === selectorColIndex) {
  •             setTimeout(function () {
  •                 view.sortDescriptions.clear();

  •                 view.sortDescriptions.push(
  •                     new wijmo.collections.SortDescription("__originalOrder", true)
  •                 );

  •                 view.refresh();
  •                 setTimeout(function () {
  •                     view.sortDescriptions.clear();
  •                     view.refresh();
  •                 }, 0);
  •             }, 0);
  •         }
  •     });
  • }

Result:



Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.