Datatable: Operations/Event on template -text box using webix

Webix JS
#1

I have created a row with only text boxes as my first row on the data table using cell template concept.

webix.ready(function(){
   grid = new webix.ui({
  	container:"testA",
  	view:"datatable",
  	rowHeight:100,
  	columns:[
  		{header:"Shot", template:"<input type='text'>"},
  		{id:"title",	header:"Film title"},
  		{id:"year",	header:"Released"},
  		{id:"votes",	header:"Votes" }
  	],
  	
  	autoheight:true,
  	autowidth:true,
  	data:small_film_set
  });
});

Now I want if I enter some value in that text box. I should be able to change the CSS of all the cell right to the text box. How to get this event as I enter value is this text box.

Kindly tell the way of the above problem. If possible kindly share some kind of sample code.

P.S. - Webix provides custom radio button and text box, but didn’t provide custom textbox with various events out of the box.

#2

You can use inline-text editor
http://docs.webix.com/datatable__editing.html#inlinetext
http://docs.webix.com/samples/15_datatable/04_editing/09_inline_editors.html

With it you will have onAfterEditStop event after changing the value and moving focus from the input

#3

Above logic will update values only on focus change. The latest dev. version supports the live-edit functionality, which updates/colors data as you edit it

If you have a support subscription and need the latest version then you can contact us at support@webix.com

#4

Thanks maksim for update.
Regarding the solution you suggested, which event to be capture so that changes are reflected simultaneously while updating the text box?

P.S. As shown in the video also, while updating the value in text box, changes are getting reflected simultaneously.

#5

Video use the updated version of code, which was not released yet ( will be available in March ). In existing version it is not so easy to detect the correct moment and value ( there is an onKeyPress event, which will fire when any key pressed while component is in focus, and you can get active editor value by using grid.getEditor().getValue()