onload() in GUI builder

[jovibals]

Hi,

         Can someone share what is the onLoad() function in GUI builder?


Thanks!

[linb]

Can't get your point

[jovibals]

Hi linb,


          Its something like when you load an html where you use onload() function. it shows like this.. i have a panel then inside panel is i have treegrid i'd like not to show it first the panel once i run for example index.js untill i press the button that's the time only the panel willl show. That is what i want to do.

          And one thing linb in treegrid, well.. treegrid is great it has a lot of functionalities also like sigma grid but m having a hard time to work with this. Is it is possible for example i have a button then when i pressed it rows or column will be added into the treegrid? Can you help me please.

Thanks in advance.

[linb]

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)                 .host(host,"block1")                 .setLeft(120)                 .setTop(40)                 .setWidth(370)                 .setHeight(280)             );                         host.block1.append((new linb.UI.TreeGrid)                 .host(host,"treegrid2")                 .setRowNumbered(true)             );                         append((new linb.UI.SButton)                 .host(host,"sbutton1")                 .setLeft(260)                 .setTop(340)                 .setCaption("sbutton1")                 .onClick("_sbutton1_onclick")             );                         return children;             // ]]code created by jsLinb UI Builder         },         events:{"onReady":"_onready"},         //set grid's header and rows in onready event         _onready:function (com, threadid) {             this.treegrid2             .setHeader([{"id":"col1", "width":80, "type":"label", "caption":"col1"}, {"id":"col2", "width":80, "type":"label", "caption":"col2"}, {"id":"col3", "width":80, "type":"label", "caption":"col3"}, {"id":"col4", "width":80, "type":"label", "caption":"col4"}])             .setRows([{"cells":[{"value":"row1 col1"}, {"value":"row1 col2"}, {"value":"row1 col3"}, {"value":"row1 col4"}], "id":"a"}, {"cells":[{"value":"row2 col1"}, {"value":"row2 col2"}, {"value":"row2 col3"}, {"value":"row2 col4"}], "id":"b"}, {"cells":[{"value":"row3 col1"}, {"value":"row3 col2"}, {"value":"row3 col3"}, {"value":"row3 col4"}], "sub":[["sub1", "sub2", "sub3", "sub4"]], "id":"c"}])         },         //set grid's header and rows at any time         _sbutton1_onclick:function (profile, e, src, value) {             this.treegrid2.setHeader(['1','2','3']).setRows([[11,22,33],[44,55,66]])         }     } });

[jovibals]

Hi linb,

       thank you for the reply. Again sorry if you didn't my point again. You example show how to clear treegrid and replace the header and the rows value. But what my question is.. id like to add new rows or new column inside treegrid without clearing or changing the value inside and only show the added blank row or column.

Thanks linb.

[linb]

You can use "insertRows" function to add rows dynamically.
You can't add new cols to the grid without refresh. But you can use "showColumn" to switch a column's visibility.
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.TreeGrid)                 .host(host,"treegrid2")                 .setDock("none")                 .setLeft(190)                 .setTop(60)                 .setRowNumbered(true)                 .setHeader([{"id":"col1", "width":80, "type":"label", "caption":"col1"}, {"id":"col2", "width":80, "type":"label", "caption":"col2"}, {"id":"col3", "width":80, "type":"label", "caption":"col3", "visibility":false}, {"id":"col4", "width":80, "type":"label", "caption":"col4"}])                 .setRows([{"cells":[{"value":"row1 col1"}, {"value":"row1 col2"}, {"value":"row1 col3"}, {"value":"row1 col4"}], "id":"a"}, {"cells":[{"value":"row2 col1"}, {"value":"row2 col2"}, {"value":"row2 col3"}, {"value":"row2 col4"}], "id":"b"}, {"cells":[{"value":"row3 col1"}, {"value":"row3 col2"}, {"value":"row3 col3"}, {"value":"row3 col4"}], "id":"c"}])             );                         append((new linb.UI.SButton)                 .host(host,"sbutton1")                 .setLeft(200)                 .setTop(300)                 .setWidth(120)                 .setCaption("Add Rows")                 .onClick("_sbutton1_onclick")             );                         append((new linb.UI.SButton)                 .host(host,"sbutton2")                 .setLeft(360)                 .setTop(300)                 .setWidth(120)                 .setCaption("Visible Column")                 .onClick("_sbutton2_onclick")             );                         return children;             // ]]code created by jsLinb UI Builder         },         _sbutton1_onclick:function (profile, e, src, value) {             this.treegrid2.insertRows([["1","1","1","1"],["2","2","2","2"]]);         },         _sbutton2_onclick:function (profile, e, src, value) {             this.treegrid2.showColumn('col3',true);         }     } });

[jovibals]

Hi linb,

        Thanks for the great example.  this is helpful.