There are some questions about the grid I'm using

[lorryl]

Hi,

There are some questions about the grid I'm using, please help me, I've been struggling the grid for a month.

The following three questions are related. Please read them all. I've upload the demo code.

1. I am using the grid editing in a single click. I want that when adding, the focus will be on the "Order ID", and when click the record for Edit, it will be located to the currently selected cell(Yes, my test result is that sometimes after clicking for edit, the focus does not go to the selected cell, there  is no any focus in the edit line.).

I followed your document link, but I cannot get my effect when using ejs-textbox control:

https://ej2.syncfusion.com/angular/documentation/grid/edit/#reactive-forms

2. I have a custom toolbar button, for adding a default records. But when the default data is added, there is a problem in positioning, and not in edit state.

I want when click  the custom add button, the default data will be added to the bottom of grid, and the new record will be in editing state, and focus the "Order ID" field.

The wrong position:

The way I can think of is to add timeout, but the method is very bad. I hope a better way.

3. I have a form group valid check when the requestType is "save" in actionbegin, and I have the sync validator for "CustomerID" for check the value is exists in the server.

When I click the custom add button, I make the grid end edit first if the current grid state is in edit, and then add the default record. 

The question is the "this.grid.endEdit() " executes the action begin method is asynchronous, the "this.grid.addRecord(row, index);" should wait for validation to execute.

Maybe the "this.grid.addRecord(row, index);" should execute after the "save" type of action complete, I don't know.

Please help me, thanks.

Attachment: griddemoforadd_4aacf247.rar

[Balaji Sekar]

Hi lorryl, 

 

Thanks for your valuable patience. 

 

Query #1: I am using the grid editing in a single click. I want that when adding, the focus will be on the "Order ID", and when click the record for Edit, it will be located to the currently selected cell(Yes, my test result is that sometimes after clicking for edit, the focus does not go to the selected cell, there  is no any focus in the edit line.). 

Based on your query we have achieved the single click edit option using mousedown event which is bind on the Grid’s load event. We have edit a row using startEdit method when single click on Grid’s row. 

 

To achieve the adding action to focus on “OrderID” input component using the actionComplete event with requestType of “add” and we can focusing on selected cell when click the record for edit using the  actionComplete event with requestType  of “beginEdit”. 

 

Please refer the below code example and sample for more information. 

 

[app.component.ts] 

 actionComplete(args: DialogEditEventArgs): void { 

    if (args.requestType === "beginEdit" || args.requestType === "add") { 

      // Set initial Focus 

      if (args.requestType === "beginEdit") { 

        var proxy = this; 

        proxy["event"] = event; 

        setTimeout( 

          function(e) { 

            var target = this.event.target; 

            if (target.classList.contains("e-rowcell")) { 

              var colIndex = Number(target.getAttribute("aria-colindex")); 

              var field = this.grid.getColumnByIndex(colIndex).field; 

              var formEle = this.grid.editModule.formObj.element; 

              var inputEle = formEle.querySelector("[name=" + field + "]"); 

              var component = inputEle 

                .closest(".e-rowcell") 

                .querySelector(".e-control"); 

              if (component) { 

                component.ej2_instances[0].focusIn(); 

              } else { 

                inputEle.focus(); 

              } 

              console.log(inputEle); 

            } 

          }.bind(proxy), 

          100 

        ); 

      } else if (args.requestType === "add") { 

        setTimeout( 

          function(e) {             

            var formEle = this.grid.editModule.formObj.element; 

            formEle 

              .querySelector("[name='OrderID']") 

              .ej2_instances[0].focusIn(); 

          }.bind(this), 

          100 

        ); 

      } 

    } 

  } 

Sample link: https://stackblitz.com/edit/angular-phqee6-3pwbg1  

Query #2:  I have a custom toolbar button, for adding a default records. But when the default data is added, there is a problem in positioning, and not in edit state. 

Before proceeding this query we need to confirm that you want adding new record only through programmatically while click on custom toolbar button or you need to edit a row after added new record in this Grid so please ensure your exact requirement to us. If we misunderstood on your query please share more details about your query with us that will help to validate further. 

Query #3: I have a form group valid check when the requestType is "save" in actionbegin, and I have the sync validator for "CustomerID" for check the value is exists in the server. 

Based on your query we have prevented the save action in actionBegin event using “args.cancel=’true’” and you can call your server side validation method in this event. Once succeed the server validation then you will call endEdit method with update flag variable value. 

To achieved your requirement using actionBegin and actionComplete with requestType of “save”. Please refer the below code example for more information. 

[app.component.ts] 

Public flag:Boolean=true; 

actionBegin(args) { 

    if (args.requestType === "save" && this.flag ) { 

      args.cancel=true; 

     // Here you can call the server side validation 

     //Once done the server validation, you need to save the edited record   programmatically using endEdit method as given below 

     this.flag=false;  

     this.grid.endEdit() 

} 

} 

 

actionComplete(args){ 

    if(args.requestType == “save” && !this.flag){ 

  this.flag=true; 

} 

} 

 

Help Documentation:     https://ej2.syncfusion.com/angular/documentation/api/grid/#actionbegin  

                                                https://ej2.syncfusion.com/angular/documentation/api/grid/#actioncomplete  

 

Regards, 

Balaji Sekar 

 

[lorryl]

For Query #2:  I have a custom toolbar button, for adding a default records. But when the default data is added, there is a problem in positioning, and not in edit state. 

I want that when click  the custom add button, the default row data will be added in the bottom of grid, and make the added record be in editing state, and focus the "Order ID" field.

that is I want adding new record through programmatically while click on custom toolbar button, and I need to edit the added row after added new record in this Grid, and focus the "Order ID" field.

In my grid, I have the code: "this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal', newRowPosition: 'Bottom' };",

and "this.grid.addRecord(row, index);" can't achieve the effect I want. Please help me.

After adding new default data, I have a lot of validation on this data, so I need to put it in editing status immediately.

You can see the code in my updated demo.

[Balaji Sekar]

Hi lorryl, 

 Query #2:  I have a custom toolbar button, for adding a default records. But when the default data is added, there is a problem in positioning, and not in edit state.  

Based on your query we have added new record with default value using addRecord method in the toolbarClick event and set the global variable(“isCustomadd”) as true. Once rendered newly added record to Grid’s DOM then we have selected that row using selectRow method and move this row in edit state by using “startEdit” method of Grid in the actionComplete event with requestType of “save” with global variable. 

Please refer the below code example and sample for more information. 

[app.component.ts] 

toolbarClick(e) { 

    switch (e.item.id) { 

      case "toolbar_add": 

        this.isCustomadd = true; 

        let row: any = { 

          OrderID: 101, // You should add PrimaryKey column value then only we can perform CRUD action properly 

          CustomerName: "Default", 

          Freight: 0, 

          OrderDate: new Date().toString(), 

          ShipCountry: "Default" 

        }; 

        this.grid.addRecord(row, this.grid.pageSettings.pageSize - 1); 

    } 

  } 

 actionComplete(args: DialogEditEventArgs): void { 

   .    .    .    . 

    if (args.requestType == "save" && this.isCustomadd) { 

      this.isCustomadd = false; 

      this.grid.selectRow(this.grid.pageSettings.pageSize - 1); // select the clicked row by using the rowIndex 

      this.grid.editModule.startEdit(); // Call the startEdit method to edit the selected row 

    } 

  } 

Sample link: https://stackblitz.com/edit/angular-phqee6-rpskxp  

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

Regards, 

Balaji Sekar