cancel event "rowSelecting"

[Luis Carlos]

Good evening.

I would like to cancel the rowSelecting event when I am editing or adding a row.

Let me explain this in other words. I am adding a new row as you can see in the below image.

Thereupon, I click on another row, then the rowSelecting event starts. Once I am placed on this event, I would like to cancel it in order to keep adding that row.

How can I do it?

I will be awaiting for your reply, thank you in advance.

Regards, Luis Carlos.

[Vignesh Natarajan]

Hi Luis, 

 

Thanks for contacting Syncfusion support.  

 

Query: “I would like to cancel the rowSelecting event when I am editing or adding a row.” 

 

From your query, we understand that you need edit form to be maintained and cancel rowSelection. We have achieved your requirement by enabling the args.cancel in the rowSelecting event of ejGrid. Refer the below code example 

 

$("#Grid").ejGrid({ 

                // the datasource "window.gridData" is referred from jsondata.min.js 

                dataSource: window.gridData, 

                allowPaging: true, 

              rowSelecting: function(args){ 

              if(this.getContentTable().find(".gridform").length)  //to check whether there is edit form or not 

                args.cancel = true; 

              }, 

                editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true }, 

                toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] }, 

                columns: [ 

……………………………………………………………. 

            }); 

 

For your convenience we have prepared a sample which can be referred below 

 

Sample: https://jsplayground.syncfusion.com/5f1ciwyt  

 

Refer our API documentation for your reference 

 

https://help.syncfusion.com/api/js/ejgrid#events:rowselecting  

 

Please get back to us if you have further queries. 

 

Regards, 

Vignesh Natarajan 

[Luis Carlos]

Hi again.

Thank you for your reply, it was helpful.

However in your sample when I click on the button to go to the next page, the edit form disappears and it goes to the next page. I would like to keep in the edit form anyway.  Could you give any other suggestion?  

Thank you again. I will be waiting for your reply.

[Vignesh Natarajan]

Hi Luis, 

 

Thanks for the update. 

 

Query: “ I would like to keep in the edit form anyway” 

 

From your query, we understand that you need to maintain the editform while paging. We have achieved your requirement using actionBegin event of ejGrid.  

 

Refer the below code example 

 

$("#Grid").ejGrid({ 

                  // the datasource "window.gridData" is referred from jsondata.min.js 

                  dataSource: window.gridData, 

                  allowPaging: true, 

                  actionBegin: function(args){ 

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

                          if(this.getContentTable().find(".gridform").length){ 

                              args.cancel = true;// prevent the default paging action 

                              alert("record is being edited");     // alert the user  

                              var pag = this.getPager().ejPager("instance"); 

                              pag.setModel({currentPage: args.previousPage});  

                          } 

                      } 

                  }, 

               

                  enableAutoSaveOnSelectionChange: false, 

                  editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true }, 

                  toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] }, 

                  columns: [ 

…………………………………………………………………………….. 

                  ] 

              }); 

    

For your convenience we have modified the sample which can be referred below  

 

Sample: https://jsplayground.syncfusion.com/1be5ujvx  

 

Note: in the previous update we have provided solution for query “I would like to cancel the rowSelecting event when I am editing or adding a row” using rowSelecting event. Same behavior can be achieved by disabling the enableAutoSaveOnSelectionChange property of ejGrid  

 

Refer our API documentation for your reference 

 

https://help.syncfusion.com/api/js/ejgrid#members:enableautosaveonselectionchange  

 

https://help.syncfusion.com/api/js/ejgrid#events:actionbegin  

 

 

Regards,
Vignesh Natarajan 

[Luis Carlos]

Hi again.

Maybe I did not explain properly. Let me try it again.

When I am on a form (editing or adding a row), and accidentally I click on another row, on another page or on a column header in order to sort, I would like to remain in the form, not even select a row.

Therefore, in your last sample, the "enableAutoSaveOnSelectionChange" attribute is not useful because it allows selecting a row.

Thank you for your help, I will be awaiting your reply.

Regards, Luis Carlos.

[Vignesh Natarajan]

Hi Luis, 

 

Thanks for the update.  

 

From the latest update, we understand that you need to prevent all the actions (including row selection) when record is being is edited. So we suggest you to use the solution provided earlier using rowSelecting event along with below modified code. 

 

$(function () { 

        $("#Grid").ejGrid({ 

            // the datasource "window.gridData" is referred from jsondata.min.js 

            dataSource: window.gridData, 

            allowPaging: true, 

            allowSorting: true, 

            allowReordering: true, 

            showColumnChooser: true, 

            allowFiltering: true, 

            rowDragStart: function (args) { 

                if (this.getContentTable().find(".gridform").length) 

                    args.cancel = true; 

            }, 

            columnDragStart: function (args) { 

                if (this.getContentTable().find(".gridform").length) 

                    args.cancel = true; 

            }, 

            actionBegin: function (args) { 

                if (args.requestType != "cancel" && args.requestType != "save") { 

                    if (!ej.isNullOrUndefined(this.getContentTable())) { 

                        if (this.getContentTable().find(".gridform").length) { 

                            args.cancel = true; 

                            alert("record is being edited"); 

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

                                var pag = this.getPager().ejPager("instance"); 

                                pag.setModel({ currentPage: args.previousPage }) 

                            } 

                        } 

                    } 

                } 

            }, 

            rowSelecting: function (args) { 

                if (this.getContentTable().find(".gridform").length)  //to check whether there is edit form or not 

                    args.cancel = true; 

            }, 

……………………………………………………………………….. 

            columns: [ 

…………………………………………………………………………. 

            ] 

        }); 

    }); 

 

Refer the below sample for your reference 

 

Sample: https://jsplayground.syncfusion.com/ixleqhao  

 

Refer our help documentation for your reference 

 

https://help.syncfusion.com/api/js/ejgrid#events:columndragstart  

 

https://help.syncfusion.com/api/js/ejgrid#events:rowdragstart  

 

Regards, 

Vignesh Natarajan