Dynamic UI modification

You can use dhx.ui not only for creating new objects but also for updating the existing ones.

 
All the functionality mentioned here is applicable only to the layout and layout-based components.

There are 2 possible scenarios:

Remember, if you are going only to manipulate visibility of the predefined set of elements - using of dhx.ui is not the best choice for you.
Using the show(), hide() and showBatch() methods is much better in this situation. Read details in the related how-to - ”Manipulating visibility of elements”.

Let's take as an example, the layout as in:

dhx.ui({
	id:"my_layout",
	rows:[{
			view:"toolbar",
			id:"tbar1",
			elements:[{ view:"label", label:"My toolbar"}]
		},
		{
			view:"template",
			id:"content",
			template:"some content"
	}]		
});

Replacing the entire content

dhx.ui(new_content,layout_id)
  • new_content - (array) an array of objects that will replace the related cols(or rows) of the current layout.
  • layout_id - (id) the layout id referred to as $$('id')

 
Note, if the upper level element of the layout is 'cols' - the method will place the specified array in columns, if 'rows' - in rows.

To change the layout content to the following:

var new_content = [{
            view:"list",
            url:"data/users.php",
            template:"#name#"
}];

call the next command:

dhx.ui(new_content, $$('my_layout'));

Replacing the content of a certain layout cell

When you don't want to redraw the entire layout but a single cell, use the next dhx.ui overload:

dhx.ui(new_content,layout_id,cell_id)
  • new_content - (object) an object that will replace the related cell of the layout
  • layout_id - (id) the layout id referred to as $$('id')
  • cell_id - (id) the layout cell id referred to as 'id'

replacing by a different component

To replace the content of the second cell (the template) by a list:

var new_content = {
	    view:"list",
            url:"data/users.php",
            template:"#name#"
};

call the next command:

dhx.ui(new_content, $$('my_layout'),"mytemplate");

redefining the same component

In case you need to redefine the same component, you should remember one important thing - the new id of the component must differ from the current one.

For example, to change the toolbar by this new one:

var new_toolbar = {
	view:"toolbar",
	id:"tbar2", //the new view id must differ from the current id
	elements:[{ view:"button", id:"button1", type:"round", label: "Click me!"}]
};

call this command:

dhx.ui(new_toolbar, $$('my_layout'),"tbar1" );//


There is one more trick with the toolbar.
This component contains its collection of elements and if you want to change the elements of the component - you have one more variant:

dhx.ui(new_element,toolbar_id);
//i.e.
dhx.ui([{ view:"button", id:"button1", type:"default", label: "Click me!", width:20}],$$('tbar1'));

Reloading the layout from the server

To load a new configuration from the server - you can use the following technique:

dhx.ajax("config.json", function(text){
    dhx.ui(dhx.DataDriver.json.toObject(text), $$('layout_id'));
});

where the config.json contains the new configuration.

Related sample: ui/template/03_ajax_ui.html