23
Views
3
Comments
Solved
[OutSystems Data Grid] Restrict Multi column sort to max 3 columns
outsystems-data-grid
Reactive icon
Forge asset by OutSystems
Application Type
Reactive

how to restrict multi column sort in Data Grid to max 3 columns?

Right now, we can sort any number of columns by holding down the Left Shift button on keyboard and clicking the column headers. How can I restrict it after 3 columns are sorted and do not allow user to sort any further?

I'm trying to figure this out without Javascript (client requirements).

Thanks,
Aman

2022-11-12 11-28-30
Gonçalo Martins
Staff
Solution

Hello @Aman Devrath,

I went through the Wijmo Flexgrid documentation and you can achieve this through extensibility by using the unsupported javascript APIs by adding the following code to a JS Node inside the Initialize event handler from the Grid block:

const MAX_SORT_COLUMNS = 3;

// Restrict sorting and filtering based on max limits
function enforceLimit(e, collection, property, maxLimit, message) {
    const col = e.getColumn(e.col);
    const bindings = new Set(collection.map((i) => i[property]));

    if (bindings.size >= maxLimit && !bindings.has(col.binding)) {
        e.cancel = true;
        // Add here the feedback or action you want, so this alert() is an example
        alert(message);
    }
}

// Store your provider instance
let theGrid = OutSystems.GridAPI.GridManager.GetGridById($parameters.GridWidgetId).provider;

// Restrict sorting to max 3 columns
theGrid.sortingColumn.addHandler((s, e) =>
    enforceLimit(
        e,
        s.collectionView.sortDescriptions,
        'property',
        MAX_SORT_COLUMNS,
        "Remove some column's sort state first"
    )
);

	

Hope it helps!

Best Regards,
GM

UserImage.jpg
Deepak Kumar Yogi

Hi @Aman Devrath, You can Use ActiveSort Variable in GridSortChange Event and check the count based on count you can restrict the sorting in Grid by having a variable Issorting allow in All columns.

2024-09-17 12-24-07
Rammurthy Naidu Boddu
Champion

Hi @Aman Devrath

In OnSortChangeEvent add one local variable named counter by default = 3 and later decrease when sort is changed. so that If counter reaches to 0 disable the sort option of the columns.  

2022-11-12 11-28-30
Gonçalo Martins
Staff
Solution

Hello @Aman Devrath,

I went through the Wijmo Flexgrid documentation and you can achieve this through extensibility by using the unsupported javascript APIs by adding the following code to a JS Node inside the Initialize event handler from the Grid block:

const MAX_SORT_COLUMNS = 3;

// Restrict sorting and filtering based on max limits
function enforceLimit(e, collection, property, maxLimit, message) {
    const col = e.getColumn(e.col);
    const bindings = new Set(collection.map((i) => i[property]));

    if (bindings.size >= maxLimit && !bindings.has(col.binding)) {
        e.cancel = true;
        // Add here the feedback or action you want, so this alert() is an example
        alert(message);
    }
}

// Store your provider instance
let theGrid = OutSystems.GridAPI.GridManager.GetGridById($parameters.GridWidgetId).provider;

// Restrict sorting to max 3 columns
theGrid.sortingColumn.addHandler((s, e) =>
    enforceLimit(
        e,
        s.collectionView.sortDescriptions,
        'property',
        MAX_SORT_COLUMNS,
        "Remove some column's sort state first"
    )
);

	

Hope it helps!

Best Regards,
GM

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