ejGrid allow insertion of only one record

[Ali Ossaily]

I want to disable the add button when the number of records is greater than zero

[Thavasianand Sankaranarayanan]

Hi Ali,  

Thanks for contacting Syncfusion support.  

Query: “I want to disable the add button when the number of records is greater than zero” 

As per your requirement we have disabled the Add toolbar item using dataBound event and actionComplete event of Grid. Refer the below code example. 

let grid: Grid = new Grid( 

        { 

            dataSource: [], 

            editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal', newRowPosition: 'Top' }, 

            allowPaging: true, 

            dataBound: function(args){ 

              if(grid.getCurrentViewRecords().length > 0)// to disbale the add toolbar during intial rendering  

              grid.toolbarModule.enableItems(["Grid_add"],false); 

            }, 

            actionComplete: function(args){ 

              if(args.requestType == "save"){// to disbale the toolbar when a record is added 

                setTimeout(function(args){ 

                    grid.toolbarModule.enableItems(["Grid_add"],false); 

                }.bind(grid),0) 

              } 

            }, 

            pageSettings: { pageCount: 5 }, 

…………………………. 

        }); 

    grid.appendTo('#Grid'); 

For your convenience we have prepared sample which can be referred below  

Sample: https://stackblitz.com/edit/mofkzf?file=index.ts  

Refer our documentation for your reference 

https://ej2.syncfusion.com/documentation/grid/tool-bar/?no-cache=1#enabledisable-toolbar-items  

https://ej2.syncfusion.com/documentation/api/grid/#actioncomplete  

https://ej2.syncfusion.com/documentation/api/grid/#databound  

 

Note: Please clarify whether you have using ej 1 Grid or ej 2 Grid in your application ?. In the above we have provided the solution for ej 2 Grid. 

Please get back to us if you have further queries.  

Regards, 

Thavasianand S.  

[Ali Ossaily]

Thanks for your support , kindly note that I'm using ej1 Grid

[Manivannan Padmanaban]

Hi Ali, 

Thanks for the details. 

As per your request, we have prepared the solution in EJ 1 Grid. Kindly refer the below code example, 

<script type="text/javascript"> 

    $(function () { 

        $("#Grid").ejGrid({ 

            dataSource: window.gridData, 

            dataBound: function (args) { 

                if (this.model.currentViewData.length > 0) 

                    $("#Grid_add").addClass("e-disable") // Use your grid ID here. 

            }, 

            allowPaging: true, 

            editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true }, 

            toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] }, 

            columns: [ 

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

            ] 

        }); 

    }); 

</script> 

Sample Link: https://jsplayground.syncfusion.com/4rjsydo2 

Help documentation Link, 

https://help.syncfusion.com/api/js/ejgrid#events:databound 

Regards, 

Manivannan Padmanaban.  

[Ali Ossaily]

Thanks Alot , it works

[Farveen Sulthana Thameeztheen Basha]

Hi Ali,  

Thanks for your update. Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T