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. Image for the cookie policy date
  1. Home
  2. Forum
  3. AngularJS
  4. Custom ejGrid Toolbar to Limit Number of Rows Added

Custom ejGrid Toolbar to Limit Number of Rows Added

I'm using EJ1 on AngularJS. How can I do the following in AngularJS?

1. Render a custom grid toolbar which is a ej-numerictextbox? The default toolbar seems to be buttons. I have tried the following without success:

HTML: 
<div id="sampleDataGrid" ej-grid="gridSettings" e-datasource="sampleData" e-editsettings="editSettings" e-toolbarsettings="toolbarItems">
...
<script id="AddMultiple" type="text/x-jsrender">
    <input id="addMultipleRows" type="text" ej-numerictextbox e-value="1" e-minvalue="1" e-maxvalue="5" e-enablestrictmode="true" />
</script>

Javascript:
$scope.toolbarItems = {
            showToolbar: true,
            customToolbarItems: [{ templateID: "#addMultipleRows" }],
            toolbarItems: ['add', 'delete', 'update'],
};

2. How can I configure the order of custom toolbar & default toolbars? Can I move custom toolbars before the default toolbars?

3. Is there any easy way to limit the number of rows when adding rows via the toolbar? Or do I have to create a custom "Add" toolbar, and use the api to check number of existing rows before adding?


3 Replies
MP Manivannan Padmanaban Syncfusion Team August 9, 2019 01:00 PM UTC

Hi Fu Yang Chin, 

Greetings from Syncfusion Support. 

Query 1:  Render a custom grid toolbar which is a ej-numerictextbox? The default toolbar seems to be buttons. I have tried the following without success: 
 
We can able to render the ejNumericTextbox in toolbar using dataBound event of ejGrid. Kindly refer the below code example, 

<div id="Grid" ej-grid e-datasource="data" e-editsettings="edit" e-toolbarsettings="tools" e-databound="databound" e-actionbegin="begin" e-toolbarclick="onToolBarClick" > 
        <div e-columns> 
…………………………….. 
        </div> 
    </div> 
  <script id="Refresh" type="text/x-jsrender"> 
    <input id="unitCalc" type="text" /> 
</script> 
    <script> 
        angular.module('listCtrl', ['ejangular']) 
      .controller('PhoneListCtrl', function ($scope) { 
          $scope.data = window.gridData; 
          $scope.tools = { showToolbar: true, 
                toolbarItems: ["add","edit","delete","update","cancel"], 
                customToolbarItems: [{ templateID: "#Refresh" }] }; 
          $scope.edit = { allowEditing: true, allowAdding: true, allowDeleting: true }; 
                $scope.databound = function(args){ 
……………………………………………….. 
            $("#unitCalc").ejNumericTextbox({  // render the numeric textbox in the dataBound event 
                value: 1, // sets value  
                minValue: 1, // sets min value  
                maxValue: 5, // sets max value 
                enableStrictMode: true // sets strict mode to true   
            }); 
        }; 
……………………….. 
      }); 



Query 2: How can I configure the order of custom toolbar & default toolbars? Can I move custom toolbars before the default toolbars? 

Using dataBound event, we can able to change the order of the toolbar items. Refer the below code example, 

<body ng-controller="PhoneListCtrl"> 
    <div id="Grid" ej-grid e-datasource="data" e-editsettings="edit" e-toolbarsettings="tools" e-databound="databound" e-actionbegin="begin" e-toolbarclick="onToolBarClick" > 
        <div e-columns> 
            ………… 
        </div> 
    </div> 
  <script id="Refresh" type="text/x-jsrender"> 
    <input id="unitCalc" type="text" /> 
</script> 
    <script> 
        angular.module('listCtrl', ['ejangular']) 
      .controller('PhoneListCtrl', function ($scope) { 
          $scope.data = window.gridData; 
          $scope.tools = { showToolbar: true, 
                toolbarItems: ["add","edit","delete","update","cancel"], 
                customToolbarItems: [{ templateID: "#Refresh" }] }; 
          $scope.edit = { allowEditing: true, allowAdding: true, allowDeleting: true }; 
        $scope.databound = function(args){ 
              // custom items 
        var liElem = this.element.find(".e-gridtoolbar ul:eq('1') li"); 
        //default items 
        var firstUl = this.element.find(".e-gridtoolbar ul:eq(0)"); 
        for (var l = 0 ; l < 1; l++) { 
            //moving only two icons to front 
            //leaving the last icon 
            firstUl.prepend($(liElem[l]).detach()); 
        } 
……………………………… 
              }; 
……………………………….. 
      }); 




Also, refer the below link for Knowledge base help documentation. 

Query 3: Is there any easy way to limit the number of rows when adding rows via the toolbar? Or do I have to create a custom "Add" toolbar, and use the api to check number of existing rows before adding? 
We can able to prevent the new row addition by setting the args.cancel as “true” in using actionBegin event. Refer the below code example, 
 
<body ng-controller="PhoneListCtrl"> 
    <div id="Grid" ej-grid e-datasource="data" e-editsettings="edit" e-toolbarsettings="tools" e-databound="databound" e-actionbegin="begin" e-toolbarclick="onToolBarClick" > 
        <div e-columns> 
            … 
        </div> 
    </div> 
  .. 
    <script> 
        angular.module('listCtrl', ['ejangular']) 
      .controller('PhoneListCtrl', function ($scope) { 
          …………………… 
              }; 
               $scope.begin = function(args){ 
                 if(args.requestType == "add"){ 
                   if(this.model.dataSource().length > 10){  // it will work only for local data.  
                       args.cancel = true; // we have prevent the new record addition when the dataSource length is greater than 
                   } 
                 } 
              }; 
      }); 


Refer the below link for sample, 

Kindly get back to us, if you need further assistance. 

Regards, 
Manivannan Padmanaban. 


FY Fu Yang Chin August 13, 2019 06:28 AM UTC

Thanks for your reply.

Regarding Query #3, by calling

$(document.getElementById(sampleDataGridID)).ejGrid('instance').model.dataSource().length

I can get the number of rows that are committed/saved. But since I have 'batch edit mode' set, how do I get the latest total number of rows (including uncommitted rows)?

MP Manivannan Padmanaban Syncfusion Team August 14, 2019 04:26 AM UTC

Hi Fu Yang Chin, 

Thanks for the update. 

Query : I can get the number of rows that are committed/saved. But since I have 'batch edit mode' set, how do I get the latest total number of rows (including uncommitted rows)? 
 
In batch edit mode, we can able to get the newly added record from getBatchChanges method (i.e. the unsaved records). And in order to prevent the new record addition based on unsaved records and total dataSource count, we suggest you to use the beforeBatchAdd event of ejGrid. Refer the below code example, 

 
<body ng-controller="PhoneListCtrl">  
    <div id="Grid" ej-grid e-datasource="data" e-allowpaging=true e-editsettings="edit" e-toolbarsettings="tools" e-databound="databound"  e-beforeBatchAdd="beforeBatchAdd" e-toolbarclick="onToolBarClick" > 
        <div e-columns> 
………………………………… 
        </div> 
    </div> 
  ………………………… 
    <script> 
        angular.module('listCtrl', ['ejangular']) 
            .controller('PhoneListCtrl', function ($scope) { 
…………………………………………………………………. 
              $scope.edit = { allowEditing: true, allowAdding: true, allowDeleting: true, editMode:"batch" }; 
……………………………………………………….. 
               $scope.beforeBatchAdd = function(args){ 
                 if(this.getBatchChanges().added.length){  
                   if(this.getBatchChanges().added.length >= 1 || this.model.dataSource().length > 201){  // set your condition here. 
                       args.cancel = true; // prevent the new record addition 
                   } 
                 } 
              }; 
            }); 
  </script> 



Refer the below link for sample, 

Also, refer the below help documentation links. 

Regards, 
Manivannan Padmanaban. 


Loader.
Live Chat Icon For mobile
Up arrow icon