Customize cell style dynamically

Find code here before you post.
Locked
linb
Site Admin
Posts: 102
Joined: Thu Apr 25, 2013 6:51 am

Customize cell style dynamically

Post by linb »

   
Class('App', 'xui.Com',{
    Instance:{
        iniComponents : function(){
            // [[Code created by CrossUI RAD Tools
            var host=this, children=[], append=function(child){children.push(child.get(0))};
            
            append(
                (new xui.UI.Pane)
                .setHost(host,"ctl_pane6")
                .setLeft(40)
                .setTop(20)
                .setWidth(490)
                .setHeight(320)
            );
            
            host.ctl_pane6.append(
                (new xui.UI.TreeGrid)
                .setHost(host,"ctl_treegrid2")
                .setRowNumbered(true)
                .setEditable(true)
                .setRowResizer(true)
                .setHeader([{"id":"col1", "width":80, "type":"input", "caption":"Method 1", "cellRenderer":function (cell){
                    if(cell.value.indexOf('2') != -1){
                        return "<"+"div style='background-color:#0000ff;height:100%'>" + cell.value + "<"+"/div>";
                    }else{
                        return cell.value;
                    }
                }}, {"id":"col2", "width":80, "type":"input", "caption":"Method 2", "cellRenderer":function (cell){
                    var prf=this;
                    if(cell.value.indexOf('2') != -1){
                        _.asyRun(function(){
                            if(prf && prf.boxing())
                                prf.boxing().updateCell(cell,{cellStyle:cell.value.indexOf('3') != -1?'background-color:#00ff00':'background-color:transparent'},true,false);
                        });
                    }
                    return cell.value;
                }}, {"id":"col3", "width":80, "type":"input", "caption":"Method 3"}])
                .setRows([{"cells":[{"value":"row1 col1", "id":"c_a"}, {"value":"row1 col2", "id":"c_b", "cellStyle":"background-color:transparent"}, {"value":"row1 col3", "id":"c_c", "cellStyle":"background-color:#00ff00"}, {"id":"c_d", "value":""}], "id":"a"}, {"cells":[{"value":"row2 col1", "id":"c_e"}, {"value":"row2 col2", "id":"c_f", "cellStyle":"background-color:transparent"}, {"value":"row2 col3", "id":"c_g"}, {"id":"c_h", "value":""}], "id":"b"}, {"cells":[{"value":"row3 col1", "id":"c_i"}, {"value":"row3 col2", "id":"c_j", "cellStyle":"background-color:#00ff00"}, {"value":"row3 col3", "id":"c_k"}, {"id":"c_l", "value":""}], "id":"c"}])
                .beforeCellUpdated("_ctl_treegrid2_beforecellupdated")
            );
            
            return children;
            // ]]Code created by CrossUI RAD Tools
        },
        _ctl_treegrid2_beforecellupdated : function (profile, cell, options, isHotRow){
            var ns = this, uictrl = profile.boxing();
            if(options.value.indexOf('1')!=-1){
                options.cellStyle='background-color:#00ff00';
            }else{
                options.cellStyle='background-color:transparent';
            }
        }
    }
});
Class('App', 'xui.Com',{
    Instance:{
        iniComponents : function(){
            // [[Code created by CrossUI RAD Tools
            var host=this, children=[], append=function(child){children.push(child.get(0))};
            
            append(
                (new xui.UI.Pane)
                .setHost(host,"ctl_pane6")
                .setLeft(40)
                .setTop(20)
                .setWidth(490)
                .setHeight(320)
            );
            
            host.ctl_pane6.append(
                (new xui.UI.TreeGrid)
                .setHost(host,"ctl_treegrid2")
                .setRowNumbered(true)
                .setEditable(true)
                .setRowResizer(true)
                .setHeader([{"id":"col1", "width":80, "type":"input", "caption":"Method 1", "cellRenderer":function (cell){
                    if(cell.value.indexOf('2') != -1){
                        return "<"+"div style='background-color:#0000ff;height:100%'>" + cell.value + "<"+"/div>";
                    }else{
                        return cell.value;
                    }
                }}, {"id":"col2", "width":80, "type":"input", "caption":"Method 2", "cellRenderer":function (cell){
                    var prf=this;
                    if(cell.value.indexOf('2') != -1){
                        _.asyRun(function(){
                            if(prf && prf.boxing())
                                prf.boxing().updateCell(cell,{cellStyle:cell.value.indexOf('3') != -1?'background-color:#00ff00':'background-color:transparent'},true,false);
                        });
                    }
                    return cell.value;
                }}, {"id":"col3", "width":80, "type":"input", "caption":"Method 3"}])
                .setRows([{"cells":[{"value":"row1 col1", "id":"c_a"}, {"value":"row1 col2", "id":"c_b", "cellStyle":"background-color:transparent"}, {"value":"row1 col3", "id":"c_c", "cellStyle":"background-color:#00ff00"}, {"id":"c_d", "value":""}], "id":"a"}, {"cells":[{"value":"row2 col1", "id":"c_e"}, {"value":"row2 col2", "id":"c_f", "cellStyle":"background-color:transparent"}, {"value":"row2 col3", "id":"c_g"}, {"id":"c_h", "value":""}], "id":"b"}, {"cells":[{"value":"row3 col1", "id":"c_i"}, {"value":"row3 col2", "id":"c_j", "cellStyle":"background-color:#00ff00"}, {"value":"row3 col3", "id":"c_k"}, {"id":"c_l", "value":""}], "id":"c"}])
                .beforeCellUpdated("_ctl_treegrid2_beforecellupdated")
            );
            
            return children;
            // ]]Code created by CrossUI RAD Tools
        },
        _ctl_treegrid2_beforecellupdated : function (profile, cell, options, isHotRow){
            var ns = this, uictrl = profile.boxing();
            if(options.value.indexOf('1')!=-1){
                options.cellStyle='background-color:#00ff00';
            }else{
                options.cellStyle='background-color:transparent';
            }
        }
    }
});
   

Locked