onChange event for data table column combo

Webix JS
1

I can’t seem to be abel to invoke the combo onChange event of my column combo, i guessing i’m missing something essential :slight_smile:


<code class="js">
{
	id: "assignedtx_combo_value", width: 350, 
	header: ["Assigned TX", { content: "textFilter" }],
	editor: "combo", options: Data.txComboCollection,
	on: {
		"onChange": (newValue: any, oldValue: any) => {
			console.log("asd a" + newValue + " " + oldValue);
			webix.message(newValue);
		}
	},
	suggest: {
		template: "#value#",
		filter: function (obj: any, filter: string) {
			return obj.value.toString().toLowerCase()
			.indexOf(filter.toString().toLowerCase()) !== -1;
		},
		body: {
			template: "#value#",
			yCount: 15
		}
	}
}
`
2

Hello,

You can use either of the events to track the changes:

  • the onValueSuggest event of the combo editor suggest;
  • or the onBeforeEditStop event of the datatable;

Please, check the following snippet: https://webix.com/snippet/645ed273

3

Hi Helga.

I already use the onBeforeEditStop event. The problem is that i need an event before the value is change to verify that a valid input was entered. If you type in a unvalid option or leave the text field empty, the value is automatically set to the first option of the suggest/combo. I need it to keep is original/old value if an unvalid input was entered. When the onBeforeEditStop or onValueSuggest is triggered the value and old state is already set to the first option, so i don’t know if the user selected option 1 or it was automatically set becasue of an invalid input.

In your snippet, click to open the combo/suggest popup. In the text field clear all text or type in an unvalid value and press the enter key. The value of new is automatcally set to the first option, which is 1 in your example. I need it to keep it’s old value if an empty or invalid input was entered.

4 
onBeforeEditStop: function (state, editor){
   if (state.value is wrong) {
     editor.setValue(state.old);
     return false;
   }
}
5

Hi Intregral. I check the rules properties, but it seems i get the same result. The original entered invalid value from the combo/suggest is already set to value of the first option when the rule is triggered. I think i need to handle this on the combo/suggest level, preferably on the onChange event.


<code class="js">
rules: {
"assignedtx_combo_value": function (value: any) {
	console.log("value is: " + value); // returns option 1, not the original input
	//return value > 0
}
`
6

check edited answer

7

What i need is.

// onChange for the column combo


<code class="js">
on: {
	"onChange": (newv: string, oldv: string) => {

		// Check if the entered input is a valid value.
		let input = Data.txComboCollection.find((item) => item.value === newv);

		// Prevent the change if the entered value is not valid.
		if (input === undefined) {

		}
	}
}

`

8

@stiross,

The combo editor in Datatable is not a UI Combo in fact. There’s an HTML input with a suggest list linked to it, so there can’t be any onChange event.

You can still make use of the onBeforeEditStop and rewrite the old value as:

onBeforeEditStop:function(values, editor){
   if(editor.column == "assignedtx_combo_value"){
        //if value is not correct or empty
        if(!values.value || !editor.getInputNode().value)
            // delay the operation intil editing is completed 
            webix.delay(function(){
                this.updateItem(editor.row, {[editor.column]: values.old})}, 
            this);
   }
}

https://webix.com/snippet/95bc79eb

9

Hi Helga.

Your snippets work if the text field is empty, but it still reverts to option 1 if you enter an invalid input.

  1. Open the combo
  2. Enter a invalid option like abc and press enter.
  3. The cell value is set to the value of option 1, not the old value.

Integral: The state.value is already set to the value of option 1 by the time the onBeforeEditStop is triggered. So i have no way of knowing if state.value is set to the value of option 1 purposfully by a user and therefor valid, or if it was set by the combo due to an invalid input and the old value should be preserved.

10

It this functionality is not possible. Maybe there is a way to keep the column type as normal text field and invoke a popup anchored to the cell with a filterable list of options. You can then selected a new value and then be able to validate the input before you change the cell value programmatically.

11 
onBeforeEditStop: function (state, editor){
   if (editor.column === 'assignedtx_combo_value') {
     var nodeValue = (editor.getInputNode().value || "").toUpperCase();
     var selectedItem = editor.getPopup().getList().getItem(state.value);
     if (!selectedItem) {
         editor.setValue(state.old);
         return false;
     }
     var selectedItemValue = selectedItem.value.toString().toUpperCase();
     if (nodeValue !== selectedItemValue) {
         editor.setValue(state.old);
         return false;
     }
   }
}
12

Thanks integral. That works :slight_smile: