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. (Last updated on: November 16, 2018).
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?

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

Solution

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.  

JS

  1. Render the Grid with inline editMode

 

MVC

 

 

ASP

 

 

ASP CORE

 

 

ANGULAR

 

TS

 

JS

  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

                                                                                                                                              

Article ID: Published Date: Last Revised Date: Platform: Control:
9215 08/27/2018 08/27/2018 ASP.NET Web Forms Grid
Did you find this information helpful?
Add Comment
You must log in to leave a comment

Please sign in to access our KB

or the page will be automatically redirected to 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