How can I keep jqxGrid filter state and column order in sync with URL query para

[krishna_jpParticipant]

Hi everyone, I am working on an internal admin dashboard with Grid.

I am currently trying to solve this: How can I keep jqxGrid filter state and column order in sync with URL query params so users can share the same grid view?

So far, I verified this is not a CSS-only issue, but some edge cases break expected behavior.

What approach would you recommend here?

[adminKeymaster]

Hi,

Here is a complete, production-ready implementation wrapped into a single JavaScript code block.It handles initialization, debounces fast typing in filter inputs to protect browser history performance, and applies the saved state safely after data binding completes to prevent race conditions.javascript$(document).ready(function () {

    const source = {
        datatype: "json",
        datafields: [
            { name: 'id', type: 'number' },
            { name: 'name', type: 'string' },
            { name: 'role', type: 'string' },
            { name: 'status', type: 'string' }
        ],
        // Replace with your actual endpoint or local data array
        url: 'https://example.com' 
    };

    const dataAdapter = new $.jqx.dataAdapter(source);

    // --- 2. Initialize jqxGrid ---
    $("#jqxgrid").jqxGrid({
        width: '100%',
        source: dataAdapter,
        filterable: true,
        showfilterrow: true,
        sortable: true,
        columnsreorder: true,
        ready: function () {
            // Apply layout state as soon as the grid structural framework is ready
            applyGridStateFromURL();
        },
        columns: [
            { text: 'ID', datafield: 'id', width: 100 },
            { text: 'Name', datafield: 'name', width: 250 },
            { text: 'Role', datafield: 'role', width: 200 },
            { text: 'Status', datafield: 'status', width: 150 }
        ]
    });

    // --- 3. State Restoration Logic ---
    function applyGridStateFromURL() {
        const urlParams = new URLSearchParams(window.location.search);
        const gridViewParam = urlParams.get('gridview');

        if (!gridViewParam) return;

        try {
            // Decode string back to JSON layout object
            const decodedState = JSON.parse(decodeURIComponent(atob(gridViewParam)));
            
            // Inject unified layout configuration directly into jqxGrid
            $("#jqxgrid").jqxGrid('loadstate', decodedState);
        } catch (error) {
            console.error("Failed to parse or apply grid state from URL:", error);
        }
    }

    // --- 4. State Synchronization & Debounce Logic ---
    let stateUpdateTimer = null;

    $("#jqxgrid").on('filter columnreorder', function () {
        // Clear previous timer to prevent URL thrashing while user types fast in filter rows
        clearTimeout(stateUpdateTimer);

        stateUpdateTimer = setTimeout(function () {
            // Fetch complete structural layout array
            const fullState = $("#jqxgrid").jqxGrid('getstate');

            // Strip heavy structural metadata; preserve only filters and column sequencing
            const shareableState = {
                filters: fullState.filters,
                columns: fullState.columns
            };

            // Safely serialize and encode layout payload into a short base64 string
            const encodedState = btoa(encodeURIComponent(JSON.stringify(shareableState)));

            // Construct new URL parameter payload
            const url = new URL(window.location.href);
            url.searchParams.set('gridview', encodedState);

            // Commit to address bar without causing a heavy page lifecycle refresh
            window.history.replaceState({ path: url.toString() }, '', url.toString());
        }, 350); // 350ms buffer time balances user input fluidity with instant history commits
    });
});

Regards,
Peter

[Author]

Posts