We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Try Essential JS 2

cancel event "rowSelecting"

Thread ID:

Created:

Updated:

Platform:

Replies:

142698 Feb 15,2019 11:42 AM UTC Feb 20,2019 09:51 AM UTC jQuery 5
loading
Tags: ejGrid
Luis Carlos
Asked On February 15, 2019 11:42 AM UTC

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 [Syncfusion]
Replied On February 18, 2019 04:12 AM UTC

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 
 
 
Refer our API documentation for your reference 
 
 
Please get back to us if you have further queries. 
 
Regards, 
Vignesh Natarajan 


Luis Carlos
Replied On February 18, 2019 09:24 AM UTC

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 [Syncfusion]
Replied On February 19, 2019 09:14 AM UTC

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  
 
 
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 
 
 
 
 
Regards,
Vignesh Natarajan 


Luis Carlos
Replied On February 19, 2019 10:26 AM UTC

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 [Syncfusion]
Replied On February 20, 2019 09:51 AM UTC

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 
 
 
Refer our help documentation for your reference 
 
 
 
Regards, 
Vignesh Natarajan 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon