Custom toolbar button to open dialog with custom form

Question

Hello,I have 2 Views (Products and Orders) with grids. The Orders grid contains a column named Products. The user should be able to Add an order with product name and other order details. The edit mode is Batch. Everything works fine but is there any way to create a custom (Add product) button to Create a new product directly from the Orders page?  In products page, the Edit mode is Dialog, with dialog template, is there any way opening that dialog for adding a new product directly from Orders section? Thank you!

Vikram Sundararajan · Answer

Hi Andrei Badescu,Greetings from Syncfusion support,We understand that your query regarding the integration
of new records from one grid to another. To accomplish this, we recommend
adding a custom toolbar button to the Syncfusion EJ2 Grid on the Orders page.
Once the button is clicked, you can seamlessly open a dialog with a custom form
designed for adding a new product.Please refer the below code snippet for more reference,

index.js
   
  //Order Grid
    var grid = new ej.grids.Grid({
          toolbar:
  ['Add',  'Delete', 'Update', 'Cancel',{ text: 'Add Product', tooltipText: 'Add Product',
  prefixIcon: 'e-add', id: 'addProduct' }],
         
  editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true,
  mode: 'Batch' },
          columns: [
             
  { field: 'OrderID', headerText: 'Order ID', width: 120,  isPrimaryKey:
  true, },
             
  { field: 'OrderName', headerText: 'Order Name', width: 135 },
             
  { field: 'ProductName', headerText: 'Product Name', width: 135 },
          ],
          toolbarClick: function (args) {
             
  if (args.item.id === 'addProduct') {
                 
  openProductGridAddDialog();
             
  }
         
  },
      });
   
    function openProductGridAddDialog() {
  //product grid dialog
          destGrid.addRecord();
      }

In this code snippet, we've added a new custom toolbar
item and incorporated a toolbarClick event handler to the order grid.
Within this handler, we validate if the clicked toolbar item has the ID 'addProduct.'
If true, the openProductGridAddDialog function is invoked, facilitating
the opening of the add dialog for the product grid using destGrid.addRecord().Please refer below sample for reference,Sample: https://stackblitz.com/edit/ngahgd-cjlbwd?file=index.js,index.htmlPlease let us know if you need any further assistance.Regards,Vikram S