How to Handle Different Column Orders and Visibility for Different Users

[omerix]

Hello,

Now I remember, can I use parameterized saveState and loadState for the need I wrote below?

It looks like adding a parameter to saveState might help achieve what I need.

For example, I want to save different states for different users like this:

saveState('A'); 
saveState('B');

Then, I want to load the respective state using something like:

loadState('A'); 
loadState('B');

Would it be possible to achieve this while using the same grid (e.g., id='grid_editing'), but loading different states based on the user?

I need to configure different column orders settings for different users in ParamQuery.

So far, I have been using drag-and-drop to adjust the column order and then saving the state using saveState to store the configuration in localStorage.

Is this the correct approach, or is there a better way to handle this?

For example, for User A, I use the following colModel:

Code: [Select]

colModel: [
    {title: "Product ID"},
    {title: "Product Name"},
    {title: "Quantity Per Unit"},
    {title: "Unit Price"}
]



For User B, I save a different configuration where some columns are reordered, and one column is hidden:

Code: [Select]

colModel: [
    {title: "Product Name"},
    {title: "Unit Price"},
    {title: "Quantity Per Unit"},
    {title: "Product ID",hidden:true}
]


Is saveState the right approach to make these user-specific settings permanent or should I use something different?

Actually, the example I wanted is here, but VueJs is used.
https://paramquery.com/pro/demos/vue_switch_data


For example consider colModel like this https://paramquery.com/pro/demos/editing_batch

Code: [Select]

            colModel: [
                { title: "Product ID", dataType: "integer", dataIndx: "ProductID", editable: false, width: 80 },
                {
                    title: "Product Name", width: 165, dataType: "string", dataIndx: "ProductName",
                    validations: [
                        { type: 'minLen', value: 1, msg: "Required" },
                        { type: 'maxLen', value: 40, msg: "length should be <= 40" }
                    ]
                },
                {
                    title: "Quantity Per Unit", width: 140, dataType: "string", align: "right", dataIndx: "QuantityPerUnit",
                    validations: [
                        { type: 'minLen', value: 1, msg: "Required." },
                        { type: 'maxLen', value: 20, msg: "length should be <= 20" }
                    ]
                },
                {
                    title: "Unit Price", width: 100, dataType: "float", dataIndx: "UnitPrice",
                    validations: [{ type: 'gt', value: 0.5, msg: "should be > 0.5" }],
                    render: function (ui) {
                        var cellData = ui.cellData;
                        if (cellData != null) {
                            return "$" + parseFloat(ui.cellData).toFixed(2);
                        }
                        else {
                            return "";
                        }
                    }
                },
                { hidden: true },
                {
                    title: "Units In Stock", width: 100, dataType: "integer", dataIndx: "UnitsInStock",
                    validations: [
                        { type: 'gte', value: 1, msg: "should be >= 1" },
                        { type: 'lte', value: 1000, msg: "should be <= 1000" }
                    ]
                },
                {
                    title: "Discontinued", width: 100, dataType: "bool", align: "center", dataIndx: "Discontinued",
                    editor: false,
                    type: 'checkbox',
                    validations: [{ type: 'nonEmpty', msg: "Required" }]
                },
                {
                    title: "", editable: false, minWidth: 83, sortable: false,
                    render: function (ui) {
                        return "<button type='button' class='delete_btn'>Delete</button>";
                    },
                    postRender: function (ui) {
                        console.log('postRender');
                        var rowIndx = ui.rowIndx,
                            grid = this,
                            $cell = grid.getCell(ui);

                        $cell.find("button").button({ icons: { primary: 'ui-icon-scissors' } })
                        .bind("click", function () {

                            grid.addClass({ rowIndx: ui.rowIndx, cls: 'pq-row-delete' });

                            setTimeout(function () {
                                var ans = window.confirm("Are you sure to delete row No " + (rowIndx + 1) + "?");
                                grid.removeClass({ rowIndx: rowIndx, cls: 'pq-row-delete' });
                                if (ans) {
                                    grid.deleteRow({ rowIndx: rowIndx });
                                }
                            },100)
                        });
                    }
                }
            ],

I want to change the order like this.

Code: [Select]

const userSettings = {
    "A": [
        {title: "Product ID"},
        {title: "Product Name"},
        {title: "Quantity Per Unit"},
        {title: "Unit Price"}
    ],
    "B": [
        {title: "Product Name"},
        {title: "Unit Price"},
        {title: "Quantity Per Unit"},
        {title: "Product ID"}
    ]
};

const userId = "B";  // SET B User

console.log("User B's Column Settings:", userSettings[userId]);


[paramvir]

Normally users work on separate browsers and the state is saved in their browsers.

it doesn't make sense to store the states for different users in a common local storage unless you can clarify it a bit more.

You can load different colModel for different users in server side code.

[omerix]

I solved it by loading different colModel in the backend. Thank you.