Form: move item

Suite and Optimus Suite 5
#1

If an item is placed into a form with absolute positioning, is it possible to move the item’s position after the form is rendered?

{ type:"input" , name:"test", label:"Test", labelWidth:50, labelAlign:"center", inputWidth:50, labelLeft:125, labelTop:125, inputLeft:125, inputTop:146  },

Suppose I needed to move this down 100px. Would it be possible to create a prototype to accomplish this such as:

form.moveItem('test', {labelLeft:125, labelTop:225, inputLeft:125, inputTop:246} )
#2

Hi

add once after dhtmlx.js is loaded

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

to move your item

myForm.setInputPosition("test", {inputTop:10});

you’re welcome :wink:

#3

This is working great for input items–thank you!!!

I also need to re-position a label. Following the same principle, I came up with this which is working:

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

I needed to move a few items and then show a group of items is the same location. This makes it possible.

On a side node, I have been creating a handful of complex forms which require absolute positioning. I’ve used Designer and then came up with something pretty cool you might want to see. It’s an object with a bunch of methods which at the end produce the form’s [ ] structure. I’ll email it

#4

How can a radio be moved?

dhtmlXForm.prototype.items.radio.setInputPosition = function(item, data) {
   ?? 
}

dhtmlXForm.prototype.setRadioPosition = function(name, value, data) {
  ??
};
#5

I figured it out:

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