Integration dhtmlxforms with Tag-it

Suite and Optimus Suite 5
#1

Hi all,

I’m interested in to integrate Tag-it functionalities ( aehlke.github.io/tag-it/ ) with DHTMLX forms.

Have you ever integrated ?
Is it possible ?

Thank you a lot !!

Albert

#2

Hi
You can add to in dhtmlxForm item type “container” and init your Tag-it functionalities there
dhtmlx.com/docs/products/dhtmlxF … _grid.html
(like grid inserted in the form)

#3

Thanks for your idea,

but I’m not able to do it.

I have :

var str = [
	{ type:"settings" , labelWidth:80, inputWidth:250, position:"absolute"  },

…
{ type:“container” , name:“TAGS”, label:"<?php echo $cust_form18 ?>", rows:“2”, labelWidth:575, inputWidth:575, inputHeight:59, labelLeft:25, labelTop:400, inputLeft:25, inputTop:425 ,readonly:true }
];

var form_1 = b.attachForm(str);	
var tag = form_1.getContainer("TAGS");
   tag.tagit(); 
form_1.bind(grid_1);
#4

Do you really use grid to bind form with?

#5

Well,

I have 2 layouts, one of them with a grid and in the other I have a form where I show the same data than the grid but with more detail.

I would like to give the format of a “tag” in one of the form fields.

Could you help me to do an easy example ?

Thanks

albert

#6

Code demo for you (without tagit css):

[code]layout = new dhtmlXLayoutObject(“parentId”, “2U”);

		mygrid = layout.cells("a").attachGrid();
		mygrid.setImagePath("codebase/imgs/");
		mygrid.setHeader("Count,Name");
		mygrid.setColumnIds("Count,Name");
		mygrid.init();
		gridData = {rows:[
			{ id:1, data:["-1500", "A Time to Kill"]},
			{ id:2, data:["1000", "Blood and Smoke"]},
			{ id:3, data:["-200", "The Rainmaker"]},
			{ id:4, data:["350", "The Green Mile"]}
		]};
		mygrid.parse(gridData,"json");

		formData = [
			{type: "settings", offsetLeft: 10, labelWidth: 100},
			{type: "label", label: "Selected record"},
			{type: "input", name: "Count", value: "", labelWidth:100, label:"Count"},
			{type: "input", name: "Name", value: "", labelWidth:100, label: "Name"},
			{type: "container", name: "Cont", label: "Tags"}
		];
		myform = layout.cells("b").attachForm(formData);

		myform.attachEvent("onChange", function(){
			myform.save();
			mygrid.callEvent("onGridReconstructed",[])
		});
		myform.bind(mygrid);

		myform.getContainer("Cont").id = "myTags";
		$("#myTags").tagit({
			availableTags: ["c++", "java", "php", "javascript", "ruby", "python", "c"],
			autocomplete: {delay: 0, minLength: 2}
		});[/code]

Result:

Screenshot_1.jpg815×481 33.9 KB

#7

Perfect !
Thanks.

Last question,
is it possible to bind this container field to the grid ?

I mean, imagine in your grid data has a field named “Tags” and you want to show it in the form using Tag-it format.

I’m trying it but without success.

Regards

Albert

#8

If you try this sample - it is already binded.
It set via “onChange” event. Just try to select grid row - its data will fill form fields, edit any field in form and press, say, tab key… Form will save the data and set it to grid. Just add to the grid tags column (or any column type wich will collect tags).