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

[Cesar Smerling]

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);
    }
}

[Manivannan Padmanaban]

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 

    <ejs-treegrid #treegrid ………… (load)='load($event)' ……>        <e-columns>            <e-column field='taskID' headerText='Task ID' isPrimaryKey='true' width='90' textAlign='Right' [validationRules]='taskidrules'></e-column>            <e-column field='taskName' [edit]='valueEditOptions' headerText='Task Name' editType='stringedit' width=220 [validationRules]='tasknamerules'></e-column>………………………….        </e-columns>    </ejs-treegrid>

// 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]

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 updated

https://stackblitz.com/edit/angular-cebu4b-x59hby?file=app.component.ts

[Cesar Smerling]

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.

[Gowri Loganathan]

  

 

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 

[Cesar Smerling]

Thank, that works!

[Gowri Loganathan]

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]

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]

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.ts

Screenshot:-

We need some more additional details to find the cause of the issue. Share us the following details.

1. Complete TreeGrid code details.
2. Video Demo to replicate the problem.
3. If possible replicate it in the above sample and revert us back.
4. Share exact requirement you need to achieve.

Regards,

Farveen sulthana T

[Umer Farooq]

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]

Hi Umer,

Thanks for the update.

We are glad to hear your query has been solved.

Regards,

Pon selva