To add data items into dataview use the method add:
view.add({
id:"some id",
property:"some value"
});
If "id" isn't defined, it will be autogenerated.
The method remove will help you to delete a data item from dataview:
view.remove("some id");
//or
view.remove(["idA","idB","idC","idD"]);
Related sample: Add/delete data on runtime
To enable the item's editing ability the following steps need to be completed:
view = new dhtmlXDataView({
container:"data_container",
edit:true,
type:{
template:"#Package# : #Version#<br/>#Maintainer#",
template_edit:"<input class='dhx_item_editor' bind='obj.Package'>"
}
});
The edit template works the same as the normal one plus the tags inside of it can have the bind attribute.
It means that during the switching to the edit state, a component will put the related properties into the inputs and on the edit-end command the properties will be filled from the inputs, respectively.
The editing process is triggered by dbl-click by default.
You can switch a cell to manual editing using the code below:
view.edit(id);
view.stopEdit();
A component is initialized in the multiselect mode by default. It can be controlled either by using the parameter of constructor or by JS API.
In the first case, use the code below:
var view = new dhtmlXDataView({
container:"some_html",
select:"multiselect"
});
...
view.define("select",true);
Possible values of the "select" parameter:
Single item can be selected by clicking on it.
Multiple items can be selected by using Ctrl and Shift keys while clicking on items.
To select an item by API the following commands can be used:
view.select(id);
view.unselect(id);
view.selectAll();
view.unselectAll();
var boolean= view.isSelected(id);
var id = view.getSelected();
Calling the select() or unselect() methods without parameter is equal to calling selectAll() or unselectAll(), respectively.
The getSelected() method returns the ID of the selected item in single selection mode. In multiselection mode if more than one element selected the method will return an array of IDs.
During the selection of items (by user or by API) the following events are generated:
In case of single selection all 3 events are generated. If multiselection is enabled and Ctrl-click or Shift-click occurs, only the onSelectChange event will be generated.
In multiselect mode the select command can use additional parameters:
// select in addition to existing ones
view.select(id,true); // the same as Ctrl-click
// select all the items from the previously selected till the current one
view.select(id,false,true); // same as Shift-click
Beware that the select method changes the selection only and doesn't affect the items' visibility. So you will need to use the show() method to ensure that an item is visible (scrolled into the visible part of dataview)
view.show(id);
Items can be sorted by any properties. The values in DataView are sorted as case-insensitive strings by default.
//sort all data by the Maintainer property in the ascending order
view.sort("#Maintainer#","asc");
//the same but in the desceding order
view.sort("#Maintainer#","desc");
If you need a custom sorting rule, you can define your own sorter function:
view.sort(function(objA, objB){
//objA and objB - are the objects which need to be compared
return objA.some_value > objB.some_value?1:-1;
},"asc");
A custom sorting method accepts two objects and must return 1 if the first object is greater than second one, or -1 otherwise.
The values of the direction parameter:
A dataset can be filtered by one of the multiple parameters. To apply a simple one-parameter filtering, you can use the code similar to the following one:
//will show the object where the string "Alex" exists in Maintainer's name
//filtering is case-insensitive by default
view.filter("#Maintainer#","Alex");
If you need to apply a more complex filtering, it can be implemented by means of providing the filtering method (filter()) as the first parameter:
view.filter(function(obj){
if (obj.valueA > 10 && obj.valueB < 100) return true;
return false;
});
The filtering method receives the object and the filtering value (if it was provided as a part of the filter() command). The result of the method must be true if the object needs to be shown and false otherwise.
Back to top