How to alphabetic order toolpanel in Data Grid

Questions
1

Hi,
reading ag-grid documentation, it show how to order the toolPanel:

const columnDefs = [
  { headerName: "Athlete", field: "athlete" },
  { headerName: "Age", field: "age" },
  { headerName: "Country", field: "country" },
  { headerName: "Year", field: "year" },
  { headerName: "Date", field: "date" },
  { headerName: "Sport", field: "sport" },
];

const sortedColumnDefs = [...columnDefs].sort((a, b) => a.headerName.localeCompare(b.headerName));

const gridOptions = {
  columnDefs: columnDefs, 
  sideBar: {
    toolPanels: [
      {
        id: "columns",
        labelDefault: "Columns",
        labelKey: "columns",
        iconKey: "columns",
        toolPanel: "agColumnsToolPanel",
        toolPanelParams: {
          suppressSyncLayoutWithGrid: true, 
          columnLayout: sortedColumnDefs 
        }
      }
    ],
    defaultToolPanel: "columns"
  }
};

// Inicializar el grid
new agGrid.Grid(document.getElementById('myGrid'), gridOptions);

With that information I try to do that in servoy, but it throw multiples errors.

This is what I try to do.
First I have to order the columns:

var columnDefs=[],_sortedColumnDefs=[];

for (var i = 0; i < elements.grid.columns.length; i++) {
			columnDefs.push(elements.grid.getColumn(i));
		}
function sortByName(arr) {
			return arr.sort(function(a, b) {
		        var nameA = scopes.utl_convert.utl_parseHeaderTitle(a.headerTitle).toLowerCase();
		        var nameB = scopes.utl_convert.utl_parseHeaderTitle(b.headerTitle).toLowerCase();
		       
		        if (a.headerTitle && a.headerTitle.indexOf('%%')>-1)
		        if (nameA < nameB) {
		            return -1;
		        }
		        if (nameA > nameB) {
		            return 1;
		        }
		        return 0; // Son iguales
		    });
		}
		_sortedColumnDefs = sortByName(columnDefs);

Then I try to set in the gridOptions from the grid:

var sideBar= {
		    toolPanels: [
		      {
		        id: "columns",
		        labelDefault: "Columns",
		        labelKey: "columns",
		        iconKey: "columns",
		        toolPanel: "agColumnsToolPanel",
		        toolPanelParams: {
		          suppressSyncLayoutWithGrid: true,
				  suppressColumnSelectAll: true,
				  suppressColumnFilter:false,
				  suppressPivotMode: true,
				  suppressRowGroups: false,
				  suppressValues: true,
				  columnLayout: _sortedColumnDefs
		        }
		      }
		    ]
		  }
		elements.grid.gridOptions.sideBar = sideBar;

Does anyone know how to do it?

Servoy version 2024.3.3 -releaseNumber 3946 (builddate: 2024-07-26 09:16)
Servoy NG-Grid 2024.3.5

2

Hi,
has anyone been in this situation?
If you has a grid with a lot of fields is to difficult to find a field.
Is there any one from servoy who know how to do it?

3

hi,

your sortByName needs to be a client side js function, because that is used by aggrid in the browser, but now it is a servoy js function, so server side js;
you should use clientutils.generateBrowserFunction to create the client side js, have a look here: https://docs.servoy.com/reference/servo … tionstring