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

Using existing toolbar edit controls to call controller

I have a bunch of views for editing, viewing details, delete prompts, etc which were built before we invested in Syncfusion, and initially I'd like to continue to use those from the new index/grid views.

I quite like the default add/edit/delete button and method of selecting a row then clicking the desired button.  Is it possible to trap these clicks and make a call to another page or  would I need to create custom add/edit/delete buttons which I could then trap via the ToolbarClick event?

Cheers,
H

1 Reply

PK Prasanna Kumar Viswanathan Syncfusion Team March 1, 2017 04:23 PM UTC

Hi Henryk, 
 
Thanks for contacting Syncfusion support. 

In this you have mentioned that you need to avoid the add, edit and delete operations by default toolbar buttons. To achieve this, we used actionBegin event of ejGrid. In this event we check the condition with the requestType and defining args.cancel as true to avoid the default operations.   

Find the code example :  


@(Html.EJ().Grid<object>("FlatGrid") 
  .Datasource((IEnumerable<object>)ViewBag.datasource) 
  .AllowPaging() 
  .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); }) 
  .ToolbarSettings(toolbar => 
   { 
      toolbar.ShowToolbar().ToolbarItems(items => 
      { 
        items.AddTool(ToolBarItems.Add); 
        items.AddTool(ToolBarItems.Edit); 
        items.AddTool(ToolBarItems.Delete); 
        items.AddTool(ToolBarItems.Update); 
        items.AddTool(ToolBarItems.Cancel); 
      }); 
   }) 
  .Columns(col => 
   { 
      ------------------------- 
   }) 
     .ClientSideEvents(eve => { eve.ActionBegin("actionbegin"); }) 
  ) 
 
--------------------------------------- 

function actionbegin(args) { 
        if (args.requestType == "add" || args.requestType == "beginedit" || args.requestType == "delete") { 
            args.cancel = true; 
        } 
    } 

 
Once we stop the default operation, we need to send the selected data to the views using ajaxPost for editing and deleting. In this event we can get the data in the arguments of actionBegin event. Using these we can able to get the selected data and using ajaxPost we can send the data to the views.  
 
Using addRecord, deleteRecord and Update Record methods we can able to perform CRUD operations in view pages. 
 
AddRecord 
 
We can add new record using addRecord method of ejGrid. We have already created a UG documentation for the addrecord method, please refer the below link 
 
 
Delete Record  
 
We can delete a record using deleteRecord method of ejGrid. We have already created a UG documentation for the deleterecord method, please refer the below link 
 

Update Record 
 
We can update the record using UpdateRecord method of ejGrid. We have already created a UG documentation for the updaterecord method, please refer the below link 
 
 
Regards, 
Prasanna Kumar N.S.V 
 


Loader.
Up arrow icon