Hi all,
I look at the api and sample and didn't found it.
I would like the header width ajust according the tg size. this might not be a problem but I tried to put % and it's not working
here tipic header info { id, name,description,price,qte,total }
I want the id to be fix to 5%, name at 30% , description at 50%, price 5%, qte 5%, total 5% , it's there a way of doing this? I tried to put this at control init and it's not working
it's there a trick for doing this ?
I tried this example http://www.crossui.com/Forum/treegrid-c ... e-t92.html but dock fill does't seem to work.
Treegrid header size
Re: Treegrid header size
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.Dialog())
.setHost(host,"ctl_dialog2")
.setLeft(10)
.setTop(10)
.setWidth(531)
.setHeight(230)
.setCaption("TreeGrid : Colums width automatically fill space")
);
host.ctl_dialog2.append((new xui.UI.TreeGrid())
.setHost(host,"ctl_treegrid2")
.setRowNumbered(true)
.setRowHandler(false)
.setColHidable(true)
.setColMovable(true)
.setHeader([{"id":"id", "width":5, "type":"input", "caption":"id-5%", "relWidth":true}, {"id":"name", "width":30, "type":"input", "caption":"name-30%", relWidth:true}, {"id":"description", "width":50, "type":"input", "caption":"description-50%", relWidth:true}, {"id":"price", "width":5, "type":"input", "caption":"price-5%", relWidth:true}, {"id":"qte", "width":5, "type":"input", "caption":"qte-5%", relWidth:true}, {"id":"total", "width":5, "type":"input", "caption":"total-5%", relWidth:true}])
);
return children;
// ]]Code created by CrossUI RAD Tools
}
}
});
Last edited by support on Tue Dec 17, 2013 9:10 am, edited 1 time in total.
Re: Treegrid header size
thanks.
but when adding data into the grid the size of the cell is not equal the headers. I tried to put the same parameter when adding data to the grid, but not working
also dock:right for the Ui.Group dock right but dock height at the same time, I tried to differant method I tried puttin dock margin but it put a marge, what I would need is a sort of "dock padding" but the dock
is buggy I think.
check my code click on the button "Ajouter un item", the program add item and you can change value for Prix(price) and Qte, it calculate tax for invoice.
but when adding data into the grid the size of the cell is not equal the headers. I tried to put the same parameter when adding data to the grid, but not working
also dock:right for the Ui.Group dock right but dock height at the same time, I tried to differant method I tried puttin dock margin but it put a marge, what I would need is a sort of "dock padding" but the dock
is buggy I think.
check my code click on the button "Ajouter un item", the program add item and you can change value for Prix(price) and Qte, it calculate tax for invoice.
Code: Select all
// The default code is a com class (inherited from xui.Com)
Class('App', 'xui.Com',{
// Ensure that all the value of "key/value pair" does not refer to external variables
Instance:{
// To initialize instance(e.g. properties)
initialize : function(){
// To determine whether or not the com will be destroyed, when the first UI control be destroyed
this.autoDestroy = true;
// To initialize properties
this.properties = {};
},
// 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 Tools
var host=this, children=[], append=function(child){children.push(child.get(0));};
append((new xui.UI.MenuBar())
.setHost(host,"ctl_menubar5")
.setItems([{"id":"menu1", "sub":[{"id":"normal", "caption":"normal"}, {"id":"disabled", "caption":"disabled", "disabled":true}, {"id":"image", "caption":"image", "image":"img/demo.gif"}, {"type":"split"}, {"id":"checkbox 1", "caption":"checkbox 1", "type":"checkbox"}, {"id":"checkbox 2", "caption":"checkbox 2", "type":"checkbox"}], "caption":"Fichier"}, {"id":"menu2", "sub":[{"id":"sub menu 1", "caption":"sub menu 1", "add":"[Ctrl+F]", "sub":[{"id":"sub 1", "type":"radiobox"}, {"id":"sub 2", "type":"radiobox"}, {"id":"sub 3"}]}, {"id":"sub menu 2", "caption":"sub menu 2", "add":"[Ctrl+T]", "sub":["sub 3", "sub 4"]}], "caption":"menu2"}])
);
append((new xui.UI.ToolBar())
.setHost(host,"ctl_toolbar18")
.setItems([{"id":"toolSection1", "sub":[{"id":"toolNewMail", "caption":"New Mail", "tips":"New Mail Message", "image":"{/}img/allinone.gif", "imagePos":"-80px top"}], "caption":"toolSection1"}, {"id":"toolSection2", "sub":[{"id":"toolPrint", "tips":"print", "image":"{/}img/allinone.gif", "imagePos":"top left", "caption":""}, {"id":"toolMove", "tips":"Move to folder", "image":"{/}img/allinone.gif", "imagePos":"-64px top", "caption":""}, {"id":"toolDelete", "tips":"Delete", "image":"{/}img/allinone.gif", "imagePos":"-224px top", "caption":""}], "caption":"toolSection2"}, {"id":"toolSection3", "sub":[{"id":"toolReply", "tips":"reply", "caption":"Reply", "image":"{/}img/allinone.gif", "imagePos":"-160px top"}, {"id":"toolReplyAll", "tips":"Reply to all", "caption":"Reply to All", "image":"{/}img/allinone.gif", "imagePos":"-176px top"}, {"id":"toolForward", "tips":"Forward", "caption":"Forward", "image":"{/}img/allinone.gif", "imagePos":"-112px top"}, {"id":"toolRendReceive", "tips":"Rend / Receive", "caption":"Rend/Receive", "image":"{/}img/allinone.gif", "imagePos":"-192px top"}], "caption":"toolSection3"}])
);
append((new xui.UI.Layout())
.setHost(host,"ctl_layout30")
.setItems([{"id":"before", "pos":"before", "min":50, "size":250, "locked":false, "folded":false, "hidden":false, "cmd":true}, {"id":"main", "min":10}])
.setType("horizontal")
);
host.ctl_layout30.append((new xui.UI.ButtonViews())
.setHost(host,"ctl_buttonviews15")
.setItems([{"id":"idsoumission", "image":"{/}img/allinone.gif", "imagePos":"-80px top", "tips":"Soumission", "caption":"Soumission"}, {"id":"idfacture", "image":"{/}img/allinone.gif", "imagePos":"-96px top", "tips":"Facturation", "caption":"Facture"}, {"id":"contact", "image":"{/}img/allinone.gif", "imagePos":"-48px top", "tips":"Contact", "caption":"contact"}])
.setBarSize(28)
.setValue("idsoumission")
, "before");
host.ctl_buttonviews15.append((new xui.UI.Panel())
.setHost(host,"pan_soumission")
.setZIndex(1)
.setCaption("Soumission")
.setCustomStyle({"KEY":{"$gradients":""}})
, "idsoumission");
host.pan_soumission.append((new xui.UI.SButton())
.setHost(host,"ctl_sbutton275")
.setLeft(25)
.setTop(40)
.setWidth(160)
.setCaption("Modifier une soumission")
);
host.ctl_buttonviews15.append((new xui.UI.SButton())
.setHost(host,"btn_soumission")
.setLeft(30)
.setTop(40)
.setWidth(160)
.setCaption("Crée une soumission")
.onClick("_btn_soumission_onclick")
, "idsoumission");
host.ctl_layout30.append((new xui.UI.Block())
.setHost(host,"blc_soumission")
.setDock("fill")
.setZIndex(0)
.setVisibility("hidden")
.setCustomStyle({"KEY":{"$gradients":""}})
, "main");
host.blc_soumission.append((new xui.UI.SLabel())
.setHost(host,"ctl_slabel70")
.setDock("origin")
.setLeft(170)
.setTop(190)
.setCaption("Soumission")
.setCustomStyle({"KEY":{"font-size":"34pt", "$gradients":""}})
);
host.blc_soumission.append((new xui.UI.Block())
.setHost(host,"blc_addsoumission")
.setDock("fill")
.setVisibility("visible")
);
host.blc_addsoumission.append((new xui.UI.TreeGrid())
.setHost(host,"grid_soumission")
.setDock("width")
.setEditable(true)
.setRowHandler(false)
.setHeader([{"id":"idid", "type":"label", "width":5, "caption":"id",relWidth:true}, {"id":"idnom", "type":"combobox", "width":30, "caption":"Nom",relWidth:true}, {"id":"iddesc", "type":"combobox", "width":50, "caption":"Description",relWidth:true}, {"id":"idprice", "type":"currency", "width":5, "caption":"Prix",relWidth:true}, {"id":"idqte", "type":"number", "width":5, "caption":"Qte",relWidth:true}, {"id":"idtotal", "type":"currency", "width":5, "caption":"Total",relWidth:true}])
.afterUIValueSet("_grid_soumission_afteruivalueset")
.onRender("_grid_soumission_onrender")
.afterRowActive("_grid_soumission_afterrowactive")
.afterCellUpdated("_grid_soumission_aftercellupdated")
);
host.blc_addsoumission.append((new xui.UI.SButton())
.setHost(host,"btn_addinvoice")
.setLeft(20)
.setTop(210)
.setWidth(120)
.setCaption("Ajouter un item")
.onClick("_btn_addinvoice_onclick")
);
host.blc_addsoumission.append((new xui.UI.Div())
.setHost(host,"div6")
.setLeft(250)
.setTop(320)
.setWidth(100)
.setHeight(20)
);
host.blc_addsoumission.append((new xui.UI.Group())
.setHost(host,"ctl_group1")
.setLeft(270)
.setTop(210)
.setWidth(270)
.setHeight(230)
.setCaption("Calcule final")
.setToggleBtn(false)
);
host.ctl_group1.append((new xui.UI.Input())
.setHost(host,"txt_soustotal")
.setLeft(10)
.setTop(10)
.setWidth(240)
.setLabelSize(120)
.setLabelCaption("Sous-Total")
);
host.ctl_group1.append((new xui.UI.Input())
.setHost(host,"txt_tvq")
.setLeft(10)
.setTop(40)
.setWidth(240)
.setLabelSize(120)
.setLabelCaption("Taxe TVQ")
);
host.ctl_group1.append((new xui.UI.Input())
.setHost(host,"txt_tps")
.setLeft(10)
.setTop(70)
.setWidth(240)
.setLabelSize(120)
.setLabelCaption("Taxe TPS")
);
host.ctl_group1.append((new xui.UI.Input())
.setHost(host,"txt_accompte")
.setLeft(10)
.setTop(100)
.setWidth(240)
.setLabelSize(120)
.setLabelCaption("Dépot / Accompte")
);
host.ctl_group1.append((new xui.UI.Input())
.setHost(host,"txt_total")
.setLeft(10)
.setTop(170)
.setWidth(240)
.setLabelSize(120)
.setLabelCaption("Total")
);
host.blc_addsoumission.append((new xui.UI.SButton())
.setHost(host,"txt_createpdf")
.setLeft(410)
.setTop(450)
.setWidth(120)
.setCaption("Envoyez PDF")
);
return children;
// ]]Code created by CrossUI RAD Tools
},
// Give a chance to load other com
iniExComs : function(com, threadid){
window.selectedrow = "";
},
// 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;
},
// This instance's events
events : {"onRender":"_com_onrender"},
_ctl_image2_onclick:function (profile,e,src){
var ns = this, uictrl = profile.boxing();
},
_btn_soumission_onclick:function (profile,e,src,value){
var ns = this, uictrl = profile.boxing();
this.blc_addsoumission.setVisibility('visible');
},
_btn_addinvoice_onclick:function (profile,e,src,value){
var ns = this, uictrl = profile.boxing();
var hhh=[{"cells":[{"caption":"1","id":"1","width":5,relWidth:true},{"caption":"Nom du produit ou service","width":30,relWidth:true},{"caption":"Description","width":50,relWidth:true},{"caption":"0","width":5,relWidth:true},{"caption":"1","value":"1","width":5,relWidth:true},{"caption":"0","value":"1","width":5,relWidth:true}]}];
this.grid_soumission.insertRows(hhh,null,null,false);
},
_grid_soumission_aftercellupdated:function (profile,cell,options,isHotRow){
var ns = this, m = profile.boxing();
var rows=this.grid_soumission.getRows();
var therow = window.selectedrow;
var iPrice = therow.cells[3].value;
var iQte = therow.cells[4].value;
var iTotal = iPrice * iQte;
var headerItem = this.grid_soumission.getHeaderByCell(cell,'min');
// alert(iPrice + "-" + iQte + "-:" + iTotal);
switch(headerItem){
case "idprice": // if we are on column Price then update column total
this.grid_soumission.updateCellByRowCol(therow.id,"idtotal",{value:iTotal.toFixed(2),caption:String(iTotal.toFixed(2))});
break;
case "idqte": // if we are on column Price then update column total
this.grid_soumission.updateCellByRowCol(therow.id,"idtotal",{value:iTotal.toFixed(2),caption:String(iTotal.toFixed(2))});
break;
}
this.caltotal(rows);
},
// here I would like to call this function to calculate sum of column total
caltotal:function(rows){
iLen = rows.length;
var itotal = 0;
for(i=0;i<iLen;i++){
itotal = itotal + Number(rows[i].cells[5].value.toFixed(2));
}
var tps = this.roundNumber((itotal * 0.05 ),2);
var tvq = this.roundNumber((itotal * 0.09975),2);
var iTotalFinal = (Number(itotal)+Number(tps)+Number(tvq));
this.txt_tps.setUIValue("$"+tps);
this.txt_tvq.setUIValue("$"+tvq);
this.txt_tps.setValue("$"+tps);
this.txt_tvq.setValue("$"+tvq);
var iAccompte = this.txt_accompte.getUIValue();
if(iAccompte){
var iTotalFinalFinal = Number(iTotalFinal) - Number(iAccompte).toFixed(2);
}else{
iTotalFinalFinal = iTotalFinal;
}
this.txt_soustotal.setValue(itotal.toFixed(2));
this.txt_soustotal.setUIValue(itotal.toFixed(2));
this.txt_total.setUIValue(iTotalFinalFinal.toFixed(2));
this.txt_total.setValue(iTotalFinalFinal.toFixed(2));
},
roundNumber:function(number,decimals){
var newString;// The new rounded number
decimals = Number(decimals);
if (decimals < 1) {
newString = (Math.round(number)).toString();
} else {
var numString = number.toString();
if (numString.lastIndexOf(".") == -1) {// If there is no decimal point
numString += ".";// give it one at the end
}
var cutoff = numString.lastIndexOf(".") + decimals;// The point at which to truncate the number
var d1 = Number(numString.substring(cutoff,cutoff+1));// The value of the last decimal place that we'll end up with
var d2 = Number(numString.substring(cutoff+1,cutoff+2));// The next decimal, after the last one we want
if (d2 >= 5) {// Do we need to round up at all? If not, the string will just be truncated
if (d1 == 9 && cutoff > 0) {// If the last digit is 9, find a new cutoff point
while (cutoff > 0 && (d1 == 9 || isNaN(d1))) {
if (d1 != ".") {
cutoff -= 1;
d1 = Number(numString.substring(cutoff,cutoff+1));
} else {
cutoff -= 1;
}
}
}
d1 += 1;
}
if (d1 == 10) {
numString = numString.substring(0, numString.lastIndexOf("."));
var roundedNum = Number(numString) + 1;
newString = roundedNum.toString() + '.';
} else {
newString = numString.substring(0,cutoff) + d1.toString();
}
}
if (newString.lastIndexOf(".") == -1) {// Do this again, to the new string
newString += ".";
}
var decs = (newString.substring(newString.lastIndexOf(".")+1)).length;
for(var i=0;i<decimals-decs;i++) newString += "0";
//var newNumber = Number(newString);// make it a number if you like
return newString; // Output the result to the form field (change for your purposes)
},
_grid_soumission_afterrowactive:function (profile,row){
var ns = this, uictrl = profile.boxing();
window.selectedrow = row;
},
_com_onrender:function (com,threadid){
}
}
});
Re: Treegrid header size
It's a bug, we'll fixit in the next SVN version.
Re: Treegrid header size
Fixed, you can get the latest lib code from SVN.
Re: Treegrid header size
Do I need to replace the runtime only ?
I download it there http://code.google.com/p/crossui/ but the version said 1.0, and we are now 1.1
I tried it but don't work.
I download it there http://code.google.com/p/crossui/ but the version said 1.0, and we are now 1.1
I tried it but don't work.
Re: Treegrid header size
Our lib is 1.0, CrossUI RAD is 1.1.
SVN is the latest code, that can be added into CrossUI RAD in the next release.
SVN is the latest code, that can be added into CrossUI RAD in the next release.