1. Home
  2. Forum
  3. React - EJ 2
  4. Keychange event

Keychange event

Hi,

I have a grid in which a field is numeric.
I want to compute some data when the field is changed. 
I'm using an edit object like below:

this.quantityEdit = {
create: () => {
this.quantityEditElem = document.createElement('input');
return this.quantityEditElem;
},
destroy: () => {
this.quantityEditObj.destroy();
},
read: () => {
return this.quantityEditObj.value;
},
write: (args) => {
this.quantityEditObj = new NumericTextBox({
floatLabelType: 'Auto',
placeholder: "Cantitate",
value: args.rowData[args.column.field],
enabled: true,
change: this.onChangeQuantity,
});
this.quantityEditObj.appendTo(this.quantityEditElem);
}

};
I've bound the change event  and see the event triggered when using the up/down spinner.

The question is: how can I have the same for a keydown event (e.g. the value is changed from keyboard input, not from the spinner)?

Thanks,

5 Replies 1 reply marked as answer
TS Thiyagu Subramani Syncfusion Team December 22, 2020 02:23 AM UTC

Hi Walter, 

Thanks for contacting Syncfusion support. 

Based on your shared information, we have achieved your requirement by checking the event type in change event arguments. Please refer to the below code and sample link. 

write: (args) => { 
          this.dropObj = new NumericTextBox({ 
            floatLabelType: 'Auto', 
            placeholder: "Cantitate", 
            value: args.rowData[args.column.field], 
            enabled: true, 
            change: function (args) {  
              if(args.event.type != "mouseup"){ 
              console.log('changed') 
              } 
          }, 
          }); 
          this.dropObj.appendTo(this.elem); 
        } 



Please get back to us, if you need any further assistance. 

Regards, 
Thiyagu S 


WK Walter Konnerth December 28, 2020 08:39 PM UTC

Hi,

Thanks for the example!
It works OK for the mouseup event.
What I need is to read the value "on the fly", that means I need to read the value as soon as the user changes it from the keyboard (something like a keyup event).

How could I achieve this?

Thanks,

TS Thiyagu Subramani Syncfusion Team December 30, 2020 02:16 AM UTC

Hi Walter, 

Thanks for your update. 

By default in EJ2 Grid the edit’s read method is used to read the value from the component at the time of save only. Please refer to the below documentation. 

 


But based on your shared information we suspect that you want to read the value whenever value entered in that text box. To achieve this we have added only input EventListener to the required numeric element like below to notify the typed values in required input. 

After saving this, entered value will be returned in read. Please refer to the below code and modified sample. 

 write: (args) => { 
          this.dropObj = new NumericTextBox({ 
            floatLabelType: 'Auto', 
            placeholder: "Cantitate", 
            value: args.rowData[args.column.field], 
            enabled: true, 
            change: function (args) {  
              if(args.event.type != "mouseup"){ 
              console.log('changed') 
              } 
          }, 
          }); 
          this.dropObj.appendTo(this.elem); 
          this.elem.addEventListener("input", function(){ 
               console.log(Number(this.elem.value)); // you can get entered value here whenever you typing value in input. 
          }.bind(this)); 
        } 


Please get back to us, if you need any further assistance. 

Regards, 
Thiyagu S 


Marked as answer
WK Walter Konnerth December 30, 2020 11:08 AM UTC

Thanks, this did the trick!

TS Thiyagu Subramani Syncfusion Team December 31, 2020 05:05 AM UTC

Hi Walter, 

Thanks for your update. 

We are happy to hear that the provided solution works at your end. 

Please get back to us, if you need any further assistance. 

Regards, 
Thiyagu S 


Loader.
Up arrow icon