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?
SIGN IN To post a reply.
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.
SIGN IN To post a reply.
