Filter grid rows by column list

Develop and Deploy Cross-Browser Web Apps .
Post Reply
support
Posts: 356
Joined: Sat Apr 27, 2013 9:22 am

Filter grid rows by column list

Post by support »

Q: Is there an option with TreeGrid tables that when you click on the column header it will display the list of unique entries in that column? This is similar to Excel which will quickly show the options in that column.

A: This is a demo for a column with editorListItems:
   
xui.Class('App', 'xui.Module',{
    Instance:{
        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.TreeGrid")
                .setHost(host,"xui_ui_treegrid2")
                .setLeft("0em")
                .setTop("0em")
                .setRowNumbered(true)
                .setHeader([
                    {
                        "id":"col1",
                        "caption":"col1",
                        "type":"input",
                        "width":"8em",
                        "editorListItems":[
                            {
                                "id":"a"
                            },
                            {
                                "id":"b"
                            },
                            {
                                "id":"c"
                            }
                        ]
                    }
                ])
                .setRows([
                    {
                        "cells":[
                            {
                                "value":"a"
                            }
                        ]
                    },
                    {
                        "cells":[
                            {
                                "value":"b"
                            }
                        ]
                    },
                    {
                        "cells":[
                            {
                                "value":"c"
                            }
                        ]
                    }
                ])
                .beforeRender("_xui_ui_treegrid2_beforerender")
            );

            return children;
            // ]]Code created by CrossUI RAD Studio
        },
        _popColList:function(col, colIndex, src, icon){
            var ns=this, grid = ns.xui_ui_treegrid2;
            
            if(!col._filter){
                var arr=[];
                xui.arr.each(col.editorListItems, function(item){
                  arr.push(item.id);
                });
                col._filter = arr.join(";");
            }
            
            var list = new xui.UI.List()
                .setHost(ns,"list_" + col.id)
                .setItems(col.editorListItems)
                .setDirtyMark(false)
                .setSelMode("multi")
                .setLabelPos("none")
                .setValue(col._filter)
                .onChange(function(p, oldV, newV){
                    // save filter here
                    col._filter = newV;
                    icon.setImageClass(col.editorListItems.length===newV.split(";").length ? "xui-icon-triangle-down" : "xui-icon-filter");
                    
                    // filter grid rows
                    var arr = newV.split(";");
                    grid.doFilter(function(row){
                        if(xui.isHash(row))
                           return arr.indexOf( row.cells[colIndex].value ) === -1;
                    });
                });

            xui('body').append(list);
            list.popUp(src, null, null, function(){
                list.destroy();
            });
        },
        _xui_ui_treegrid2_beforerender:function(profile){
            var ns = this,
                colIndex = 0,
                col = profile.properties.header[colIndex];
            
            // add an icon to the header
            col.colRenderer = function(prf, col){
                var icon = new xui.UI.Icon({
                    imageClass:"xui-icon-triangle-down", //xui-icon-filter
                    left:'auto',
                    top:'auto',
                    right:'1.25em',
                    bottom:'2px',
                    tips:'Click to filter'
                },{
                    onClick:function(p,e,src){
                        // pop filter list
                        ns._popColList(col, colIndex, src, p.boxing());

                        xui.Event.stopBubble(e);
                        return false;
                    }
                });
                prf.getSubNode('HCELLA', col._serialId).append(icon);
            };
        }
    }
});
xui.Class('App', 'xui.Module',{
    Instance:{
        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.TreeGrid")
                .setHost(host,"xui_ui_treegrid2")
                .setLeft("0em")
                .setTop("0em")
                .setRowNumbered(true)
                .setHeader([
                    {
                        "id":"col1",
                        "caption":"col1",
                        "type":"input",
                        "width":"8em",
                        "editorListItems":[
                            {
                                "id":"a"
                            },
                            {
                                "id":"b"
                            },
                            {
                                "id":"c"
                            }
                        ]
                    }
                ])
                .setRows([
                    {
                        "cells":[
                            {
                                "value":"a"
                            }
                        ]
                    },
                    {
                        "cells":[
                            {
                                "value":"b"
                            }
                        ]
                    },
                    {
                        "cells":[
                            {
                                "value":"c"
                            }
                        ]
                    }
                ])
                .beforeRender("_xui_ui_treegrid2_beforerender")
            );

            return children;
            // ]]Code created by CrossUI RAD Studio
        },
        _popColList:function(col, colIndex, src, icon){
            var ns=this, grid = ns.xui_ui_treegrid2;
            
            if(!col._filter){
                var arr=[];
                xui.arr.each(col.editorListItems, function(item){
                  arr.push(item.id);
                });
                col._filter = arr.join(";");
            }
            
            var list = new xui.UI.List()
                .setHost(ns,"list_" + col.id)
                .setItems(col.editorListItems)
                .setDirtyMark(false)
                .setSelMode("multi")
                .setLabelPos("none")
                .setValue(col._filter)
                .onChange(function(p, oldV, newV){
                    // save filter here
                    col._filter = newV;
                    icon.setImageClass(col.editorListItems.length===newV.split(";").length ? "xui-icon-triangle-down" : "xui-icon-filter");
                    
                    // filter grid rows
                    var arr = newV.split(";");
                    grid.doFilter(function(row){
                        if(xui.isHash(row))
                           return arr.indexOf( row.cells[colIndex].value ) === -1;
                    });
                });

            xui('body').append(list);
            list.popUp(src, null, null, function(){
                list.destroy();
            });
        },
        _xui_ui_treegrid2_beforerender:function(profile){
            var ns = this,
                colIndex = 0,
                col = profile.properties.header[colIndex];
            
            // add an icon to the header
            col.colRenderer = function(prf, col){
                var icon = new xui.UI.Icon({
                    imageClass:"xui-icon-triangle-down", //xui-icon-filter
                    left:'auto',
                    top:'auto',
                    right:'1.25em',
                    bottom:'2px',
                    tips:'Click to filter'
                },{
                    onClick:function(p,e,src){
                        // pop filter list
                        ns._popColList(col, colIndex, src, p.boxing());

                        xui.Event.stopBubble(e);
                        return false;
                    }
                });
                prf.getSubNode('HCELLA', col._serialId).append(icon);
            };
        }
    }
});
   

Post Reply