Programmaticaly change item's top and left positions

Suite and Optimus Suite 5
#1

With item’s “position: ‘absolute’” how do I change it’s top and left positions at runtime? I can not find it in docs. I’m hoping to avoid having to use removeItem()+addItem().

And another question. On this page in docs in regard to “absolute” positioning it says:
“it will be to the point when you need to change the default spacing between items”
docs.dhtmlx.com/form__positioning.html

Is there a way to change default spacing without “absolute” positioning?

#2

I had a similar question a while back, I needed to move form items which were absolute positioned. Here’s the code to move items, you should be able to modify to re-position to an x/y coordinate if needed.

dhtmlXForm.prototype.items.calendar.moveItem = function(item, data) {
   var i = item.childNodes[item._ll?1:0];
   if (data.inputLeft != null)  i.style.left  = parseInt(i.style.left) + parseInt(data.inputLeft)+"px";
   if (data.inputTop != null)   i.style.top   = parseInt(i.style.top)  + parseInt(data.inputTop)+"px";
   // label
   var t = item.childNodes[item._ll?0:1];
   if (data.labelLeft != null)  t.style.left  = parseInt(t.style.left) + parseInt(data.labelLeft)+"px";
   if (data.labelTop != null)   t.style.top   = parseInt(t.style.top)  + parseInt(data.labelTop)+"px";
};

dhtmlXForm.prototype.items.select.moveItem = function(item, data) {
   var i = item.childNodes[item._ll?1:0];
   if (data.inputLeft != null)  i.style.left  = parseInt(i.style.left) + parseInt(data.inputLeft)+"px";
   if (data.inputTop != null)   i.style.top   = parseInt(i.style.top)  + parseInt(data.inputTop)+"px";
   // label
   var t = item.childNodes[item._ll?0:1];
   if (data.labelLeft != null)  t.style.left  = parseInt(t.style.left) + parseInt(data.labelLeft)+"px";
   if (data.labelTop != null)   t.style.top   = parseInt(t.style.top)  + parseInt(data.labelTop)+"px";
};

dhtmlXForm.prototype.items.combo.moveItem = function(item, data) {
   var i = item.childNodes[item._ll?1:0];
   if (data.inputLeft != null)  i.style.left  = parseInt(i.style.left) + parseInt(data.inputLeft)+"px";
   if (data.inputTop != null)   i.style.top   = parseInt(i.style.top)  + parseInt(data.inputTop)+"px";
   // label
   var t = item.childNodes[item._ll?0:1];
   if (data.labelLeft != null)  t.style.left  = parseInt(t.style.left) + parseInt(data.labelLeft)+"px";
   if (data.labelTop != null)   t.style.top   = parseInt(t.style.top)  + parseInt(data.labelTop)+"px";
};

dhtmlXForm.prototype.items.container.moveItem = function(item, data) {
   var i = item.childNodes[item._ll?1:0];
   if (data.inputLeft != null)  i.style.left  = parseInt(i.style.left) + parseInt(data.inputLeft)+"px";
   if (data.inputTop != null)   i.style.top   = parseInt(i.style.top)  + parseInt(data.inputTop)+"px";
   // label
   var t = item.childNodes[item._ll?0:1];
   if (data.labelLeft != null)  t.style.left  = parseInt(t.style.left) + parseInt(data.labelLeft)+"px";
   if (data.labelTop != null)   t.style.top   = parseInt(t.style.top)  + parseInt(data.labelTop)+"px";
};

dhtmlXForm.prototype.items.checkbox.moveItem = function(item, data) {
   var i = item.childNodes[item._ll?1:0];
   if (data.inputLeft != null)  i.style.left  = parseInt(i.style.left) + parseInt(data.inputLeft)+"px";
   if (data.inputTop != null)   i.style.top   = parseInt(i.style.top)  + parseInt(data.inputTop)+"px";
   // label
   var t = item.childNodes[item._ll?0:1];
   if (data.labelLeft != null)  t.style.left  = parseInt(t.style.left) + parseInt(data.labelLeft)+"px";
   if (data.labelTop != null)   t.style.top   = parseInt(t.style.top)  + parseInt(data.labelTop)+"px";
};

dhtmlXForm.prototype.items.radio.moveItem = function(item, data, value) {
   var i = item.childNodes[item._ll?1:0];
   if (data.inputLeft != null)  i.style.left  = parseInt(i.style.left) + parseInt(data.inputLeft)+"px";
   if (data.inputTop != null)   i.style.top   = parseInt(i.style.top)  + parseInt(data.inputTop)+"px";
   // label
   var t = item.childNodes[item._ll?0:1];
   if (data.labelLeft != null)  t.style.left  = parseInt(t.style.left) + parseInt(data.labelLeft)+"px";
   if (data.labelTop != null)   t.style.top   = parseInt(t.style.top)  + parseInt(data.labelTop)+"px";
};

dhtmlXForm.prototype.items.template.moveItem = function(item, data) {
   var i = item.childNodes[item._ll?1:0];
   if (data.inputLeft != null)  i.style.left  = parseInt(i.style.left) + parseInt(data.inputLeft)+"px";
   if (data.inputTop != null)   i.style.top   = parseInt(i.style.top)  + parseInt(data.inputTop)+"px";
   // label
   var t = item.childNodes[item._ll?0:1];
   if (data.labelLeft != null)  t.style.left  = parseInt(t.style.left) + parseInt(data.labelLeft)+"px";
   if (data.labelTop != null)   t.style.top   = parseInt(t.style.top)  + parseInt(data.labelTop)+"px";
};

dhtmlXForm.prototype.items.button.moveItem = function(item, data) {
   var t = item.childNodes[0];
   if (data.labelLeft != null) t.style.left = parseInt(t.style.left) + parseInt(data.labelLeft)+"px";
   if (data.labelTop != null)  t.style.top  = parseInt(t.style.top)  + parseInt(data.labelTop)+"px";
};

dhtmlXForm.prototype.items.input.moveItem = function(item, data) {
   // input
   var i = item.childNodes[item._ll?1:0];
   if (data.inputLeft != null)  i.style.left  = parseInt(i.style.left) + parseInt(data.inputLeft)+"px";
   if (data.inputTop != null)   i.style.top   = parseInt(i.style.top)  + parseInt(data.inputTop)+"px";
   // label
   var t = item.childNodes[item._ll?0:1];
   if (data.labelLeft != null)  t.style.left  = parseInt(t.style.left) + parseInt(data.labelLeft)+"px";
   if (data.labelTop != null)   t.style.top   = parseInt(t.style.top)  + parseInt(data.labelTop)+"px";
};


dhtmlXForm.prototype.items.label.moveItem = function(item, data) {
   var t = item.childNodes[0];
   if (data.labelLeft != null) t.style.left = parseInt(t.style.left) + parseInt(data.labelLeft)+"px";
   if (data.labelTop != null)  t.style.top  = parseInt(t.style.top)  + parseInt(data.labelTop)+"px";
};

dhtmlXForm.prototype.moveItem = function(name, data, value) {
	if (this.getItemType(name) == 'radio') 
		this.doWithItem([name, value], "moveItem", data);
	else
		this.doWithItem(name, "moveItem", data);
};

Call it:

form.moveItem ('somefield', {labelTop:100, inputTop:100})
#3

That’s nice, I will try it. Thank you.

Should this not be a part of core DHTMLX API? Seems like an important function.

#4

Gonki, you can suggest this fearute here:
viewforum.php?f=10