Retrieving Current Sort Column, Sort Order, and Vertical Scrollbar Position in TreeGrid

[romain]

Hello CrossUI Community,

I've been using CrossUI for a while now and it's been incredibly helpful in streamlining my development process. I've run into a scenario where I need to refresh the data in a TreeGrid while preserving the user's current sort order and the vertical scrollbar position. Specifically, I'm looking for a way to programmatically retrieve the column currently being used for sorting, the direction of the sort (ascending or descending), and the current position of the vertical scrollbar. After refreshing the data, I aim to apply the same sort settings and scroll position to maintain the user experience.

Does anyone have insights on how to achieve this? Any guidance or code snippets would be greatly appreciated!

Thank you for your assistance!

[support]

Try the code bellow:

   

// The default code is a module class (inherited from xui.Module)
// Ensure that all the value of "key/value pair" does not refer to external variables
xui.Class('App', 'xui.Module',{
    Instance:{
        // Dependency classes
        Dependencies:[],
        // Required modules
        Required:[],

        // To initialize properties
        properties : {
            saved_sort:{
                column : "col1",
                order : true
            }
        },

        // To initialize instance(e.g. properties)
        initialize : function(){
        },

        // To initialize internal components (mostly UI controls)
        // *** If you're not a skilled, dont modify this function manually ***
        iniComponents : function(){
            // [[Code created by CrossUI RAD Studio
            var host=this, children=[], append=function(child){children.push(child.get(0));};
            
            append(
                xui.create("xui.UI.Block")
                .setHost(host,"xui_ui_block2")
                .setLeft("9.142857142857142em")
                .setTop("2.2857142857142856em")
                .setWidth("32.838095238095235em")
                .setHeight("11.504761904761905em")
            );
            
            host.xui_ui_block2.append(
                xui.create("xui.UI.TreeGrid")
                .setHost(host,"grid")
                .setLeft("0em")
                .setTop("0em")
                .setAltRowsBg(true)
                .setRowNumbered(true)
                .setHeader([
                    {
                        "id" : "col1",
                        "width" : "8em",
                        "type" : "input",
                        "caption" : "col1"
                    },
                    {
                        "id" : "col2",
                        "width" : "8em",
                        "type" : "input",
                        "caption" : "col2"
                    },
                    {
                        "id" : "col3",
                        "width" : "8em",
                        "type" : "input",
                        "caption" : "col3"
                    },
                    {
                        "id" : "col4",
                        "width" : "8em",
                        "type" : "input",
                        "caption" : "col4"
                    }
                ])
                .setRows([
                    {
                        "cells" : [
                            {
                                "value" : "A1"
                            },
                            {
                                "value" : "B1"
                            },
                            {
                                "value" : "C1"
                            },
                            {
                                "value" : "D1"
                            }
                        ]
                    },
                    {
                        "cells" : [
                            {
                                "value" : "A2"
                            },
                            {
                                "value" : "B2"
                            },
                            {
                                "value" : "C2"
                            },
                            {
                                "value" : "D2"
                            }
                        ]
                    },
                    {
                        "cells" : [
                            {
                                "value" : "A3"
                            },
                            {
                                "value" : "B3"
                            },
                            {
                                "value" : "C3"
                            },
                            {
                                "value" : "D3"
                            }
                        ]
                    },
                    {
                        "cells" : [
                            {
                                "value" : "A4"
                            },
                            {
                                "value" : "B4"
                            },
                            {
                                "value" : "C4"
                            },
                            {
                                "value" : "D4"
                            }
                        ]
                    },
                    {
                        "cells" : [
                            {
                                "value" : "A5"
                            },
                            {
                                "value" : "B5"
                            },
                            {
                                "value" : "C5"
                            },
                            {
                                "value" : "D5"
                            }
                        ]
                    }
                ])
                .afterColSorted("_treegrid_aftercolsorted")
            );
            
            append(
                xui.create("xui.UI.HTMLButton")
                .setHost(host,"btn_save")
                .setLeft("12.19047619047619em")
                .setTop("16em")
                .setCaption("Save Status")
                .onClick("_btn_save_onclick")
            );
            
            append(
                xui.create("xui.UI.HTMLButton")
                .setHost(host,"btn_restore")
                .setLeft("30.476190476190474em")
                .setTop("16em")
                .setCaption("Restore Status")
                .onClick("_btn_restore_onclick")
            );
            
            return children;
            // ]]Code created by CrossUI RAD Studio
        },

        // Give a chance to determine which UI controls will be appended to parent container
        customAppend : function(parent, subId, left, top){
            // "return false" will cause all the internal UI controls will be added to the parent panel
            return false;
        },
        _treegrid_aftercolsorted:function(profile, col){
            var ns = this, uictrl = profile.boxing();
            //keep the last sort
            ns.properties.last_sort = {
                column: col.id,
                order: col._order
            };
        }, 
        _btn_save_onclick:function(profile, e, src){
            var ns = this, grid_scroll_node=ns.grid.getSubNode("SCROLL22");
            //save the last sort
            ns.properties.saved_sort = xui.copy(ns.properties.last_sort);
            //save the scroll position
            ns.properties.saved_pos = {
                left: grid_scroll_node.scrollLeft(),
                top: grid_scroll_node.scrollTop()
            };
            
            xui.message("sort and scroll info were saved!");
        },
        _btn_restore_onclick:function(profile, e, src){
            var ns = this, saved_sort=ns.properties.saved_sort || {}, saved_pos=ns.properties.saved_pos || {};
            if(saved_sort.column){
                ns.grid.sortColumn(saved_sort.column, !saved_sort.order);            
            }
            
            ns.grid.getSubNode("SCROLL22").scrollLeft(saved_pos.left);
            ns.grid.getSubNode("SCROLL22").scrollTop(saved_pos.top);
            
            xui.message("sort and scroll info were restored!");
        }
        /*,
        // To determine how properties affects this module
        propSetAction : function(prop){
        },
        // To set all node's style in this modlue
        customStyle:{}
    },
    //To customize the default properties and event handlers
    Static:{
        $DataModel:{
        },
        $EventHandlers:{
        }
    */
    }
});

   

[romain]

Thank you for your reply.

I will test this code in my next page construction and will inform you if I am able to achieve this successfully.