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

How to get the automatically increasing count for id field in syncfusion grid

Hi, 
I am using syncfusion grid for regularization of records in leave application. There is field for regularization count and i want count to automatically increase and should be disabled after increasing, when user enters the record in dialog box. I have worked with the code and when the user enters record, count increased by 1, which is working in alert, but it is binding to the count field.i am working with angularjs. Here is the code,




app.controller('regularization_controller', function ($scope, $window, $modal, $compile) {

   
    $scope.tools = ["add", "edit"];


    //$scope.data = [{ "sr_no": "1", "attendance_date": "25-Feb-2015", "modified_in_time": "09:00 AM", "modified_out_time": "09:00 AM","reason": "abc", "status": "Applied" }, { "sr_no": "2", "attendance_date": "26-Feb-2015", "modified_in_time": "09:00 AM", "modified_out_time": "09:00 AM", "reason": "abc", "status": "Applied" }];

    var regularize_status = [{ text: "Applied", value: "Applied" }, { text: "Discard", value: "Discard" }];

    
    $scope.data = (JSON.parse(localStorage.getItem('RegularizationList')));

    if (localStorage.getItem('RegularizationList') == null) {
       
        localStorage.setItem('RegularizationList', '[]');
    }

    $scope.selectedRow = 2;
    //new changes-------------------------
    //$scope.selectedRow = 2;


    //$scope.select = function (args) {

    //    var scope = angular.element($(".gridform")).scope();

    //    //$scope.modified_in_time = args.value;
    //    //$scope.modified_out_time = args.value;
    //    scope.compile($(".gridform"));
    //}

    //$scope.compile = function (el) {
    //    $compile(el)($scope);
    //}
    //-------------------------
    $scope.sorting = { sortedColumns: [{ field: "sr_no", direction: ej.sortOrder.Descending }] }

    $scope.regularization_arr = [];

    $scope.actionComplete = function actionComplete(args) {
       
        if (args.requestType == "add") {

            $scope.t = 1;
           
            $scope.sr_no = (JSON.parse(localStorage.getItem('RegularizationList')).length) + 1;
            
            alert(JSON.stringify($scope.sr_no));
               
            var rowIndex = args.requestType == "add" ? 0 : args.rowIndex;

            $("#sr_no").ejNumericTextbox({ value: ((args.model.currentViewData[rowIndex].sr_no).length) + 1 });
            $("#attendance_date").ejDatePicker({ dateFormat: "dd-MMM-yyyy" });
            $("#modified_in_time").ejTimePicker("");
            $("#modified_out_time").ejTimePicker({ timeFormat: "hh:mm tt" });
           
            $("#regularize_status").ejDropDownList({ dataSource: regularize_status });

            $("#reason").ejTextarea("");
            //var scope = angular.element($("#Grid")).scope();
            //scope.compile($(".gridform"));
            //var flag = 1;
        }

        if (args.requestType == "beginedit") {


            $scope.t = 2;
            
            $scope.id1 = args.model.currentViewData[args.rowIndex].sr_no;

            var rowIndex = args.requestType == "beginedit" ? args.rowIndex : 0;
            $scope.sr_no = args.model.currentViewData[args.rowIndex].sr_no;

            $("#sr_no").ejNumericTextbox({ value: (args.model.currentViewData[rowIndex].sr_no).length });
            $("#attendance_date").ejDatePicker({ dateFormat: "dd-MMM-yyyy", value: args.model.currentViewData[rowIndex].attendance_date });
            $("#modified_in_time").ejTimePicker({ timeFormat: "hh:mm tt", value: args.model.currentViewData[rowIndex].modified_in_time });
            $("#modified_out_time").ejTimePicker({ timeFormat: "hh:mm tt", value: args.model.currentViewData[rowIndex].modified_out_time });
            $("#regularize_status").ejDropDownList({ dataSource: regularize_status, value: args.model.currentViewData[rowIndex].status });
        }
        if (args.requestType == "save") {

            if ($scope.t == 1) {
                
                args.data.attendance_date = moment(args.data.attendance_date).format('DD-MMM-YYYY');
                delete args.data.regularize_status;
              
                angular.copy((JSON.parse(localStorage.getItem('RegularizationList'))), $scope.regularization_arr);
                $scope.regularization_arr.push(args.data);
                localStorage.setItem('RegularizationList', JSON.stringify($scope.regularization_arr));
                $scope.sorting = { sortedColumns: [{ field: "sr_no", direction: ej.sortOrder.Descending }] }

            }
        }

        if (args.requestType == "save") {

            if ($scope.t == 2) {
                 
                args.data.attendance_date = moment(args.data.attendance_date).format('DD-MMM-YYYY');
                delete args.data.regularize_status;
                alert(JSON.stringify(args.data));
                angular.copy((JSON.parse(localStorage.getItem('RegularizationList'))), $scope.regularization_arr);
                $scope.regularization_arr[$scope.id1 - 1] = args.data;
                localStorage.setItem('RegularizationList', JSON.stringify($scope.regularization_arr));
                $scope.sorting = { sortedColumns: [{ field: "sr_no", direction: ej.sortOrder.Descending }] }

            }
        }
    }
 
});
And in html file i have taken in template for editing,
               
                    Sr. No.
               
               
                   
                              
           
And in grid i have taken,
this for regularization count field.

In the above code, alert for automatic count increment is working correct but its not getting updated to respective field. And it gets updated i want to disable the count field, so that the user is not able to edit the particular field? where am I wrong? How can i fix this in angularjs? 

Thanks in advance.




1 Reply

RU Ragavee U S Syncfusion Team March 23, 2015 01:02 PM UTC

Hi Tejaswini,

We have analyzed your requirement and the code snippets that you have shared with us. From the snippets, we saw that you have assigned the length of $scope.sr_no to the value of the NumericTextbox on editing/adding. So incorrect value will be bound to the column upon saving.

For your convenience, we have created a sample by slightly modifying your code and the sample can be downloaded from the below location.

Sample Link: http://www.syncfusion.com/downloads/support/forum/118584/Sample-934718182.zip

In the above sample, we have updated the scope value of the sr_no field with the length of the grid dataSource and disabled the numericTextbox upon editing/adding using the “enabled” property of the NumericTextbox.

Please refer the below code snippets.

<script type="text/javascript">

angular.module('regulation', ['ejangular']).controller('regularization_controller', function ($scope) {

. . . .

$scope.actionComplete = function actionComplete(args) {

if (args.requestType == "add") {

$scope.t = 1;

$scope.sr_no = this.model.dataSource().length + 1;

alert(JSON.stringify($scope.sr_no));

var rowIndex = args.requestType == "add" ? 0 : args.rowIndex;

$("#sr_no").ejNumericTextbox({ value: $scope.sr_no, enabled: false });

}

if (args.requestType == "beginedit") {

$scope.t = 2;

$scope.id1 = args.model.currentViewData[args.rowIndex].sr_no;

var rowIndex = args.requestType == "beginedit" ? args.rowIndex : 0;

$scope.sr_no = args.model.currentViewData[args.rowIndex].sr_no;

$("#sr_no").ejNumericTextbox({ value: $scope.sr_no, enabled: false });

}

}

});

</script>

Please get back to us if you need any further assistance.

Regards

Ragavee U S


Loader.
Live Chat Icon For mobile
Up arrow icon