Enable edit with keyboard and hitting in enter in edit mode doesn't update the value

Question

Hi I have requeriments to use the tree grid with keyboard, i want to add some keyboards actions, how can this be achieved?

1) Parent rows collapse/expand on space click

2) Enter enable edit mode (cell edition)

The other problem I have is when I hit enter inside the edit mode the value is not updated but when I lost focus on click it does

I use the [edit] option that draws differents components depending on condition, here is the code:

this.valueEditOptions = {
    create: () => {
        this.valueSourceElem = document.createElement('input');
        return this.valueSourceElem;
    },
    read: () => {
        return this.valueComponent.value;
    },
    destroy: () => {
        this.valueComponent.destroy();
    },
    write: (args: { rowData: BaselineRow, column: Column }) => {
        if(args.rowData.definition.rowType === BaselineRowType.Node_Content){
            const matSet = args.rowData.definition.allowedMaterials;

            this.valueComponent = new ComboBox({
                dataSource: matSet,
                sortOrder: 'Ascending',
                value: args.rowData.definition.material,
                cssClass: 'scs-cell-editable',
                showClearButton: false,
            });
            this.valueComponent.focus = () => {this.valueComponent.showPopup()};
        }
        if(args.rowData.definition.rowType % 2 !== 0 ||
            args.rowData.definition.rowType === BaselineRowType.Material_Component_Value){
            //String type
            if(args.rowData.propertyUnit.includes("String")){
                this.valueComponent = new TextBox({
                    value: args.rowData.propertyValue+'',
                });
            }
            //Numeric type
            else{
                this.valueComponent = new NumericTextBox({
                    value: <number>args.rowData.propertyValue,
                    showClearButton:false,
                    showSpinButton: false,
                    step: 0,
                })
            }
        }
        this.valueComponent.appendTo(this.valueSourceElem);
    }
}

Gowri Loganathan · Accepted Answer

Hi Cesar, 
 
Thanks for the update. 
 
Query: With TextBox and NumericTextBox when hit enter leaving edit mode the values doesn't not update. But when I click outside yes. 
 
We are able to reproduce the reported issue when using TextBox component while editing and on further analyzing we could see that the reported issue occurs when we return this.valueComponent.value in the read function. In this, this.valueComponent.value the edited value is not returned so while press enter the value is not updated as expected. To avoid this we suggest you to return the value in the element as shown in below code snippet. 
 
Code 




ngOnInit(): void { 
    
            this.valueEditOptions = { 
           ......... 
            read: () => {              
               return this.valueSourceElem.value; //return the edited text value here          
           }, 
           .......... 
            } 
               } 
 
Screenshot 
  
  
 
Modified Sample link : https://stackblitz.com/edit/angular-cebu4b-cdfnd9 
 
Please revert us if you need more assistance. We will be happy to assist you. 
 
Regards, 
Gowri V L

Manivannan Padmanaban · Answer

Hi Cesar, Greetings from Syncfusion Forums. Query 1: Parent rows collapse/expand on space click && Query 2: Enter enable edit mode (cell edition) We have achieved your requirement by binding the keyDownHandler to the Tree Grid in load event. And based on key pressed we have performed the below actions. a) When space key is clicked, using collapseRow and expandRow method of Tree Grid we have collapsed and expanded the row respectively. b) When enter key is clicked, using editCell method of Tree Grid we have enabled editing for the clicked cell. Refer to the below code example, // HTML page

………………………….

// TS Page …………..export class AppComponent {………… @ViewChild('treegrid') public treegrid: TreeGridComponent; ngOnInit(): void { …… this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: "Cell" };…………………………. this.valueEditOptions = { create: () => { this.valueSourceElem = document.createElement('input'); return this.valueSourceElem; }, read: () => { debugger return this.valueComponent.value; }, destroy: () => { this.valueComponent.destroy(); }, write: (args: { rowData: BaselineRow, column: Column }) => { this.valueComponent = new ComboBox({ dataSource: this.treegrid.grid.dataSource, sortOrder: 'Ascending', value: args.rowData.taskName, cssClass: 'scs-cell-editable', fields: { text: 'taskName', value: 'taskName' }, showClearButton: false, });………………………………………. } } } load() { document.getElementsByClassName('e-treegrid')[0].addEventListener('keydown', this.keyDownHandler.bind(this)); // bind the keyDownHandler in load event. } keyDownHandler(e: any) { if (e.keyCode === 32) { // space key var record = this.treegrid.getSelectedRecords()[0]; if (record.expanded) { this.treegrid.collapseRow(this.treegrid.getSelectedRows()[0], record); // based on record status expand/collpase the row. } else { this.treegrid.expandRow(this.treegrid.getSelectedRows()[0], record); } e.preventDefault(); } if (e.keyCode === 13) { // enter key var cellIndex = e.target.cellIndex; if (e.target.closest('tr') !== null) { var rowIndex = e.target.closest('tr').rowIndex; this.treegrid.editCell(rowIndex, this.treegrid.grid.getColumnByIndex(cellIndex).field); // edit the particular cell when enter key is pressed. } } } } Also, refer to the below API documentation links. https://ej2.syncfusion.com/angular/documentation/api/treegrid#load https://ej2.syncfusion.com/angular/documentation/api/treegrid#expandrow https://ej2.syncfusion.com/angular/documentation/api/treegrid#collapserow https://ej2.syncfusion.com/angular/documentation/api/treegrid#editcell Query 3: when I hit enter inside the edit mode the value is not updated but when I lost focus on click it does We are unable to reproduce the reported issue at our end. On enter key is pressed the edited value get saved. For your convenience we have created the sample, refer to the below link. https://stackblitz.com/edit/angular-cebu4b-g2wesz After referred the above sample, still facing an issue. Please get back to us with the below details. 1. Share the complete tree grid code example. 2. Share the screenshot Or video demonstration of the issue. Provided details will help us, to resolve the reported issue as early as possible. Regards, Manivannan Padmanaban

Cesar Smerling · Answer

Hello!For query1 and 2 I'll try what you mentioned.For query 3 I updated the stack blitz that is failing. It seems that the problem is I use a TextBox or a NumericTextBox in the edit component.In my case we have  a column with diffrents value types and editors, this are draw depending on some conditions in the row. I was able to create this components, but with TextBox and NumericTextBox when hit enter leaving edit mode the values doesn't not update. But when I click outside yes.One comment, if you log in the read() method you will this that this.valueComponent.value is updated.Here is the stackblitz updatedhttps://stackblitz.com/edit/angular-cebu4b-x59hby?file=app.component.ts

Cesar Smerling · Answer

Another comment if you add the blur() metod to the valueComponent in the write method to check the value its runs after the read() method.

Cesar Smerling · Answer

Thank, that works!

Gowri Loganathan · Answer

Hi Cesar, 
 
We are happy to hear that your issue has been resolved. 
 
Please get back to us if you need more assistance. 
 
Regards, 
Gowri V L

Umer Farooq · Answer

Hi

Gowri Loganathan,I have the exactly same issue as mentioned in above query :

Query: With TextBox and NumericTextBox when hit enter leaving edit mode the values doesn't not update. But when I click outside yes.

I have tried doing the same as you mentioned to fix the issue by picking the value from valueSorceElem.value, the value is shown by pressing enter now but I don't get  the updated value after I click again and change event is not called on pressing enter as well.Looking forward.Umer Farooq

Farveen Sulthana Thameeztheen Basha · Answer

Hi Umer Farooq,Query#:- the value is shown by pressing enter now but I
don't get  the updated value after I
click again and change event is not called on pressing enter as well.We have checked your reported problem by preparing sample
but we are unable to replicate the problem at our end(on clicking the update
Icon as well as pressing the Enter). Change event will only trigger on changing
the value using the icons. It will not trigger on pressing Enter key. Refer to
the sample link:- https://stackblitz.com/edit/angular-bjvuwp?file=app.component.html,app.component.tsScreenshot:-We need some more additional details to find the cause of
the issue. Share us the following details.
 Complete
     TreeGrid code details.
 Video
     Demo to replicate the problem.
 If possible
     replicate it in the above sample and revert us back.
 Share
     exact requirement you need to achieve.
Regards,Farveen sulthana T

Umer Farooq · Answer

Thanks Farveen Sultana,

I have achieved the required event trigger by explicitly calling the fousOut() method in read callback. So it triggers the change callback on enter and Tab press now.

Regards,

Umer

Pon Selva Jeganathan · Answer

Hi Umer,Thanks for the update.We are glad to hear your query has been solved.Regards,Pon selva