Display add button in toolbar

[Muhamad Adam Fakhrullah Nik Mohamad]

Hi, Can i know how to show add button in toolbar if no record in database and hide add button when they have the record?

Thank you.

[Thavasianand Sankaranarayanan]

Hi Muhamad, 

 

Greetings from syncfusion support 

 

Query : show add button in toolbar if no record in database and hide add button when they have record 

 

We have analyzed your query, and suggest you to use the beforeDataBound event and hideitem() method to achieve your requirement. Here we have hide the toolbar item “Add”, in the beforeDataBound event when there is some records in database. By default, the toolbar item “Add” will shown even in no record and having records in database. So by the below procedure, you can show/hide the Add button in toolbar. 

 

Index.cshtml 

 

 

<ejs-grid id="grid" dataSource="ViewBag.DataSource" beforeDataBound="beforeDataBound" toolbar="@(new List<string>() { "Add"})"> 

    <e-grid-editSettings allowAdding="true"></e-grid-editSettings> 

    <e-grid-columns> 

        <e-grid-column field="OrderID" headerText="Order ID" type="number" textAlign="Right" width="120"></e-grid-column> 

        <e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="140"></e-grid-column> 

        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120"></e-grid-column> 

        <e-grid-column field="OrderDate" headerText="Order Date" format='yMd' textAlign="Right" width="140"></e-grid-column> 

    </e-grid-columns> 

</ejs-grid> 

 

<script> 

    function beforeDataBound(args) { 

        if (args.count > 0) {                                 // check the record in database 

            var data = this.toolbar.indexOf('Add');           // get the Add button indexof value 

            this.toolbarModule.toolbar.hideItem(data, true);  // pass the value into the hideitem method as parameter and set to true 

        } 

         

    } 

</script> 

 

Api link : https://ej2.syncfusion.com/documentation/api/toolbar/#hideitem 

 

Sample : https://www.syncfusion.com/downloads/support/forum/149578/ze/Add_button-1669464478.zip 

Regards 

Thavasianand S. 

[Muhamad Adam Fakhrullah Nik Mohamad]

Thank you for your cooperation. Its worked

[Thavasianand Sankaranarayanan]

Hi Muhamad, 

 

Thanks for your update. 

 

We are happy that the problem has been resolved at your end. 

 

Regards, 

Thavasianand S.