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

How to render Grid with editing in inline mode and add in dialog mode approach?

Platform: ASP.NET Core |
Control: Grid

This knowledge base explains how to render Grid with record editing in inline approach and record add in dialog approach


Toolbar click actions can be intercepted using in toolbarClick event. By default grid will be rendered with editType as inline mode. When Add button is clicked, default action is prevented by defining the args.cancel as true and custom dialog is opened in toolbarClick event. When save button is clicked in the dialog then the record is saved using addRecord() method of ejGrid and when cancel button is clicked the dialog is closed.  


  1. Render the Grid with inline editMode
















  1. Render a dialog with input elements along with save and cancel buttons.



  1.  In the toolbarClick event when Add button in clicked open the ejDialog and disable default                              action by defining args.cancel as true.


  1. On clicking the Save button call addRecord() along with the values of input elements in dialog.


  1. Similarly clicking the Cancel button will close the dialog.



Refer the below screenshot for output of the above example


         Figure 1:While editing the record


Figure 2: While click on the Add icon in toolbar


2X faster development

The ultimate ASP.NET Core UI toolkit to boost your development speed.
You must log in to leave a comment

Please sign in to access our KB

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

Up arrow icon

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