Dataview multiselect

Webix JS
1

I would like to multiselect the items in dataview, when select the selected items should be changed with a overlay of a ‘tick’ icon or similar, so that the user can see the selection.
http://webix.com/snippet/a2bcd83e
How do I change the selected item template after selection?.

2

Redefining the template is not a good choice in this case.
You can embed an icon using CSS:

http://webix.com/snippet/5a7d4294

3

Thank you, working good. But how do I define via JS?. because the left and top property in CSS is static, whereas it will be vary according to the screen size for my project.

4

Then you don’t need the onSelectChange event, because the template refreshes automatically for the particular (selected) item:

http://webix.com/snippet/5ddb423c

5

By the way, the solution with CSS will work for any screen size, as position of the selection marker is defined relative to the size of a single dataview item. So it will look correctly for any screen size.

6

Hi maksim, no the css is not working for any screen size if the dataview definition is fit to screen with xCount of 2.
http://webix.com/snippet/299dc99a

7

If you change position to relative and add float:right all will work correctly.

.webix_dataview_item.webix_selected:before{
	position: relative; 
	content: "\\f05d";
	font-family:FontAwesome;
	font-size:20px; 
  	float:right;  
  	top:5px;
}

http://webix.com/snippet/c9049b1f

8

Works perfect. Thank you.