Query regarding Custom Editor for Data table

Webix JS
1

Hi,

I am writing a custom editor for datatable using Jquery Select2 plugin for multiselect.

It works fine with single selection. However when I select multiple options, then nothing is saved and the cell becomes blank.

The “getValue()” functions returns the multiple selected options array but nothing is set to the cell.

Please let me know what I am missing in the custom editor?

		webix.editors.select2Editor = {
				focus : function() {
					this.getInputNode().focus();
				},
				getValue : function() {			
					if( $(this.getInputNode())!= undefined &&  $(this.getInputNode()).val() != null){
						return $(this.getInputNode()).val();
					}
					return this.getInputNode().value || "";
				},
				setValue : function(t) {
					$(this.getInputNode()).val($(".select2-editor").val());
				},
				getInputNode : function() {
					return this.node.firstChild;
				},
				render : function() {
					//create a simple multi-select box using config options.			
					var options = this.config.options;
					var keys  = Object.keys(options);
					
					var select_box = "<select class='select2-editor'  multiple='multiple' view_id='selectView'>";
					for(var i=0;i<keys.length;i++){
						select_box += "<option value='"+keys[i]+"'>"+options[keys[i]]+"</option>";
					}
					
					select_box +="</select>";
					
					return webix.html.create("div", {
						"class" : "webix_dt_editor"
					}, select_box);
				},

				afterRender : function() {
					$('.select2-editor').select2(); //make it select2 editor
				}
			};
2

Hi,

Your code is correct except for several things you might have not known about:

  • the trick with processing of multiple options does the optionslist parameter in the column configuration. It was not documented somehow.
  • you also need to alter setValue() and getValue() functions of your editor, so that it can pre-select current value on rendering as well as process multiple options separated by delimiter.

Check the following snippet, please: http://webix.com/snippet/b65686c2

3

Thanks Helga, much appreciated!

4

Just one more question -

Can we use a different delimiter other than “,” (comma)?

When I enter delimiter as semicolon ( “;”) in the above snippet, it does not work.

5

No, within this approach delimiter cannot be changed - the required delimiter for optionslist has a specific use case and for now its value is hardcoded.

But you can use another pattern:

  • get rid of delimiter while getting and setting values of your editor;
  • define a template for the column to define the way its values should be displayed. And join array values with a semicolon or anything you wish;

Check this snippet for details: http://webix.com/snippet/5943aed0

6

Thanks Helga