Dynamically loading data Listbox in tree grid.

[elaya rajad]

If one of the column in tree grid is listbox. I want to load a data for list box in each row the listbox should load different data.

 

I tried to load the data in list box when i click the pop button in list loading in the table header. But not coming.

 

Please help me how to load the listbox dyanmically with different data in each row.

 

 

[Jack Lee]

Class('App', 'linb.Com',{
    Instance:{
        iniComponents : function(){
            // [[code created by jsLinb UI Builder
            var host=this, children=[], append=function(child){children.push(child.get(0))};
            
            append(
                (new linb.UI.Block)
                .setHost(host,"ctl_block2")
                .setLeft(110)
                .setTop(30)
                .setWidth(480)
                .setHeight(140)
                .setBorderType("inset")
            );
            
            host.ctl_block2.append(
                (new linb.UI.TreeGrid)
                .setHost(host,"ctl_treegrid2")
                .setRowNumbered(true)
                .setEditable(true)
                .setHeader([{"id":"col1", "width":80, "type":"label", "caption":"col1"}, {"id":"col2", "width":180, "type":"listbox", "editorListItems":["a1", "b1", "c1"], "caption":"col2"}])
            );
            
            append(
                (new linb.UI.SButton)
                .setHost(host,"ctl_sbutton5")
                .setLeft(260)
                .setTop(190)
                .setCaption("Add Row List-1")
                .onClick("_ctl_sbutton5_onclick")
            );
            
            append(
                (new linb.UI.SButton)
                .setHost(host,"ctl_sbutton6")
                .setLeft(380)
                .setTop(190)
                .setCaption("Add Row List-2")
                .onClick("_ctl_sbutton6_onclick")
            );
            
            append(
                (new linb.UI.SButton)
                .setHost(host,"ctl_sbutton31")
                .setLeft(120)
                .setTop(190)
                .setCaption("Add Col Default List")
                .onClick("_ctl_sbutton31_onclick")
            );
            
            append(
                (new linb.UI.SButton)
                .setHost(host,"ctl_sbutton44")
                .setLeft(530)
                .setTop(190)
                .setCaption("Add Any")
                .onClick("_ctl_sbutton44_onclick")
            );
            
            return children;
            // ]]code created by jsLinb UI Builder
        },
        _ctl_sbutton5_onclick : function (profile,e,src,value){
            var ns = this;
            ns.ctl_treegrid2.insertRows(["list-1",{editorListItems:["a","b","c"]}]);
        },
        _ctl_sbutton6_onclick : function (profile,e,src,value){
            var ns = this;
            ns.ctl_treegrid2.insertRows(["list-2",{editorListItems:["1","2","3"]}]);
        },
        _ctl_sbutton31_onclick : function (profile,e,src,value){
            var ns = this;
            ns.ctl_treegrid2.insertRows(["col default list"]);
        },
        _ctl_sbutton44_onclick : function (profile,e,src,value){
            var ns = this;
            ns.ctl_treegrid2.insertRows(["date picker",{type:"date"}]);
        }
    }
});

[elaya rajad]

Hi Lee,

 

Thanks for reply, my problem is i am loading the rows from database and one of my column is list box. On list box i want to load the items from database when i click list box. i tried with many method like onRowActive, onCellClick like that. Please suggest.

 

WWR

 

Elayaraja.D

[Jack Lee]

You can use onBeginEdit event:

Class('App', 'linb.Com',{
    Instance:{
        iniComponents : function(){
            // [[code created by jsLinb UI Builder
            var host=this, children=[], append=function(child){children.push(child.get(0))};
            
            append(
                (new linb.UI.Block)
                .setHost(host,"ctl_block2")
                .setLeft(110)
                .setTop(30)
                .setWidth(480)
                .setHeight(140)
                .setBorderType("inset")
            );
            
            host.ctl_block2.append(
                (new linb.UI.TreeGrid)
                .setHost(host,"ctl_treegrid2")
                .setRowNumbered(true)
                .setEditable(true)
                .setHeader([{"id":"col1", "width":80, "type":"label", "caption":"col1"}, {"id":"col2", "width":180, "type":"listbox", "editorListItems":["a1", "b1", "c1"], "caption":"col2"}])

                .onBeginEdit("_ctl_treegrid2_onbeginedit")

            append(
                (new linb.UI.SButton)
                .setHost(host,"ctl_sbutton25")
                .setLeft(120)
                .setTop(230)
                .setCaption("Add special")
                .onClick("_ctl_sbutton25_onclick")

            );
            
            return children;
            // ]]code created by jsLinb UI Builder
        },
        _ctl_sbutton5_onclick : function (profile,e,src,value){
            var ns = this;
            ns.ctl_treegrid2.insertRows(["list-1",{editorListItems:["a","b","c"]}]);
        },
        _ctl_sbutton6_onclick : function (profile,e,src,value){
            var ns = this;
            ns.ctl_treegrid2.insertRows(["list-2",{editorListItems:["1","2","3"]}]);
        },
        _ctl_sbutton31_onclick : function (profile,e,src,value){
            var ns = this;
            ns.ctl_treegrid2.insertRows(["col default list"]);
        },
        _ctl_sbutton44_onclick : function (profile,e,src,value){
            var ns = this;
            ns.ctl_treegrid2.insertRows(["date picker",{type:"date"}]);

        },
        _ctl_sbutton25_onclick : function (profile,e,src,value){
            var ns = this;
            ns.ctl_treegrid2.insertRows(["custom",{special:true}]);
        },
        _ctl_treegrid2_onbeginedit : function (profile,cell,editor){
            editor.setItems(["Loading..."]);
             _.asyRun(function(){
                   editor.setItems(["from","backend"]);
             },1500);
        }
    }
});