ejs-menu to replace Datagrid ToolBar

[Geoffrey]

Hi,

For a more aesthetic side I preferred to use an ejs-menu to manage my buttons rather than the datagrid toolbar like this:

So I want to remove the button (B: Add) but first I have to find a way for my button (A : Ajouter) to perform the action of button (B) to open the "New" dialog box like this:

<ejs-grid id="GridAppUserGroups" load="load" allowPaging="true" allowFiltering="true" allowSorting="true" allowGrouping="false" toolbar="@(new List<string>() { "Add" })"

                                  actionComplete="actionCompleteGridAppUserGroup" allowExcelExport="true" allowPdfExport="true">

                            <e-data-manager json="@ViewBag.AppUserGroupDataSource" adaptor="RemoteSaveAdaptor" insertUrl="/AppUserGroup/Create" updateUrl="/AppUserGroup/Update" removeUrl="/AppUserGroup/Delete"></e-data-manager>

                            <e-grid-editSettings allowAdding="@bHasRightRoleCreate" allowDeleting="@bHasRightRoleDelete" allowEditing="@bHasRightRoleEdit" mode="Dialog" showDeleteConfirmDialog="true"></e-grid-editSettings>

                            <e-grid-filterSettings type="Menu"></e-grid-filterSettings>

                            <e-grid-pagesettings pageCount="5"></e-grid-pagesettings>

                            <e-grid-sortsettings columns="colAppUserGroupsSorting"></e-grid-sortsettings>

                            <e-grid-columns>

                                <e-grid-column field="Id" headerText="Id" width="50" visible="false" isPrimaryKey="true" isIdentity="true"></e-grid-column>

                                <e-grid-column field="Name" headerText="Libellé" width="*" validationRules="@(new { required=true})"></e-grid-column>                                

                                <e-grid-column field="GroupTypeID" foreignKeyField="Id" foreignKeyValue="Libelle" headerText="Type" dataSource="ViewBag.ListGroupType" width="200" validationRules="@(new { required=true})"></e-grid-column>

                                <e-grid-column headerText="Actions" width="150" commands="commandsAppGroupUser"></e-grid-column>

                            </e-grid-columns>

                        </ejs-grid>

thx for your help

Geff

[Vignesh Sivagnanam]

Hi Geoffrey 

Greetings from Syncfusion support 

Based on your query we found that you want to use the EJ2 menu bar button to open the dialog to add record instead of the grid’s toolbar button. You can achieve your requirement by using the EJ2 grid’s addRecord method and EJ2 menu bar select event to open the add dialog in the grid and  . 

Note : To open the add dialog manually we need to enable the editSettings.allowEditing as true. 

Please refer the below Code example and sample for your reference, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/core1739027246.zip 

<ejs-menu id="menu" items="ViewBag.menuItems" select="updateEventLog"></ejs-menu> 

  <br /> 

<ejs-grid id="Grid" dataSource="ViewBag.dataSource" allowPaging="true"> 

    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" newRowPosition="Top" mode="Dialog"></e-grid-editSettings> 

……………………………………………………………………… 

    </e-grid-columns> 

  </ejs-grid> 

……………………………. 

<script> 

  function updateEventLog(args) { 

    if (args.element.innerText === "Add") { 

      var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0]; 

      grid.addRecord(); 

    } 

  } 

</script> 

 

Documentation : https://ej2.syncfusion.com/documentation/api/grid/#addrecord 

https://ej2.syncfusion.com/documentation/api/menu#select 

Regards 

Vignesh Sivagnanam 

[Geoffrey]

Oh, I'm sorry, it was so simple I could have figured it out for myself!

thx :)

[Vignesh Sivagnanam]

Hi Geoffrey 

We are happy to hear that the provided solution works fine at your end. 

Please get back to us if you need any further assistance. 

Regards,     

Vignesh Sivagnanam