Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Kshitij Punjani
200
Multi Sort - How to capture columns information on which sort is requested
posted

Hello,

I have a scenario, where I have turned on the Multi Sort on Hierarchical Grid columns. I need to do remote paging. Now I need to know what all columns a user has clicked upon, so that I could sort by data accordingly the controller and return back the sorted data.

I also need to persist this sorting columns request in DB so that when user tries to login again from a different machine the same sorting cold be applied on the Hierarchical Grid. The same persistence I need when user move columns around. Please help with any events I can capture which could pass all this data to back-end/Controller. And from there I will somehow store it in a DB table.

Thanks

KP

  • 17590
    Offline posted

    Hello Kshitij,

    Thank you for posting in our community.

    What I can suggest for achieving your requirement is saving the sorting expressions in the columnSorted event and saving the to your data base. Afterwards, when the grid is created again these filter expressions could be reapplied. For example if you would like to do this for the child grid the childGridCreated event could be used. In this event you could loop trough all the expressions saved and re apply them again.

    I made a small sample illustrating my suggestion for your reference. In my sample I am using global variable to save expressions in and I am destroying and recreating it to simulate that the user is closing the page and opening it again. For example:

    

     $("#hierarchicalGrid").igHierarchicalGrid({
                    width: "100%",
                    features: [
                        {
                            name: "Sorting",
                            mode: "multi"
                        }
                    ],
                    dataSource: data,
                    autoGenerateLayouts: false,
                    defaultChildrenDataProperty: "Products",
                    columnLayouts: [
                        {
                            name: "Products",
                            height: "300px",
                            childrenDataProperty: "Products",
                            dataBinding: function (evt, args) {
                                var grid = args.owner,
                                    ds = args.dataSource;
    

                                if (!ds ||
                                !ds.settings ||
                                !ds.settings.sorting) {
                                    return;
                                }
                            },
                            autoGenerateColumns: false,
                            fixedHeaders: true,
                            primaryKey: "Name",
                            columns: [
                            { key: "Name", headerText: "Name" },
                            { key: "Quantity", headerText: "Quantity" }
                            ],
                            features: [
                                {
                                    name: "Sorting",
                                    mode: "multi",
                                    persist: false,
                                    columnSorted: function (evt, ui) {
                                        var colKey = ui.columnKey,
                                            direction = ui.direction;
                                        expr = [];
                                        $(ui.owner.grid.dataSource.settings.sorting.expressions).each(function () {
                                            // in your scenario here you will have to send request to server to save expressions on the server
                                            expr.push({
                                                dir: this.dir,
                                                fieldName: this.fieldName,
                                                isSorting: this.isSorting
                                            });
                                        });
                                       
                                    }
                                }
                            ]
                        }
                    ]
                });
    

                $(document).delegate("#hierarchicalGrid", "igchildgridcreated", function (evt, ui) {
                    //in your real scenario a get request to the server should be made to retrieve expressions
                    if (expr.length != 0) {
                        $(expr).each(function () {
                            $("#" + $(ui.element).attr("id")).igGridSorting("sortColumn", this.fieldName, this.dir);
                        });
                    }
                });

    I am attaching my sample for your reference. Please have a look at this sample and let me know if you need any further assistance afterwards.

    igGridPersistSorting.zip