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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Custom ejGrid Toolbar to Limit Number of Rows Added

Thread ID:

Created:

Updated:

Platform:

Replies:

146558 Aug 8,2019 07:51 AM UTC Aug 14,2019 04:26 AM UTC AngularJS 3
loading
Tags: ejGrid
Fu Yang Chin
Asked On August 8, 2019 07:51 AM UTC

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?


Manivannan Padmanaban [Syncfusion]
Replied On 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. 


Fu Yang Chin
Replied On 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)?

Manivannan Padmanaban [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon