Friday, July 10, 2015

ng grid with multiple column filter

Posted by at 

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
    <meta charset="utf-8">
    <title>ng grid paging</title>
    <link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
    <style>
        .gridStyle {
            border: 1px solid rgb(212,212,212);
            width: 600px;
            height: 300px;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
    <script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
    <script type="text/javascript">
        var app = angular.module('myApp', ['ngGrid']);
        app.controller('MyCtrl', function ($scope, $http) {
            $scope.filterOptions = {};
            var myHeaderCellTemplate = '<div>{{col.displayName}}</div>'
               + '<input type="text" ng-model="gridOptions.filterOptions[col.displayName]"/>';


            $scope.totalServerItems = 0;
            $scope.pagingOptions = {
                pageSizes: [250, 500, 1000],
                pageSize: 250,
                currentPage: 1
            };

            $scope.getPagedDataAsync = function (pageSize, page, filterOptions) {
                var searchStr = JSON.stringify(filterOptions);
                setTimeout(function () {
                    $http.get('/api/home/getJson?pageSize=' + pageSize + '&page=' + page + '&searchStr=' + searchStr).success(function (largeLoad) {
                        $scope.myData = largeLoad.data;
                        $scope.totalServerItems = largeLoad.count;
                        if (!$scope.$$phase) {
                            $scope.$apply();
                        }
                    });

                }, 100);
            };

            $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);

            $scope.$watch('pagingOptions', function (newVal, oldVal) {
                if (newVal !== oldVal && newVal.currentPage !== oldVal.currentPage) {
                    $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions);
                }
            }, true);
            $scope.$watch('filterOptions', function (newVal, oldVal) {
                if (newVal !== oldVal) {
                    $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions);
                }
            }, true);

            $scope.gridOptions = {
                data: 'myData',
                enablePaging: true,
                rowHeight: 36,
                headerRowHeight: 60,
                showFooter: true,
                totalServerItems: 'totalServerItems',
                pagingOptions: $scope.pagingOptions,
                filterOptions: $scope.filterOptions,
                columnDefs: [{ field: 'name', displayName: 'name', headerCellTemplate: myHeaderCellTemplate },
                             { field: 'allowance', displayName: 'allowance', headerCellTemplate: myHeaderCellTemplate },
                             { field: 'paid', displayName: 'paid', headerCellTemplate: myHeaderCellTemplate }]
            };
        });
    </script>
</head>
<body ng-controller="MyCtrl">
    <div class="gridStyle" ng-grid="gridOptions"></div>
</body>
</html>





public class test
    {
        [Key, DatabaseGenerated(DatabaseGeneratedOption.Identity)]
        public string name { get; set; }
        public decimal? allowance { get; set; }
        public bool paid { get; set; }
    }
    public class HomeController : ApiController
    {
        [HttpGet]
        public HttpResponseMessage getJson(int pageSize, int page, string searchStr)
        {

            test searchParms = searchStr == "undefined" ? new test() : new JavaScriptSerializer().Deserialize<test>(searchStr);

            string jsonstr = "[{ \"name\": \"Moroni\", \"allowance\": 505050505050505050, \"paid\": true },{ \"name\": \"Tiancum\", \"allowance\": 53, \"paid\": false },{ \"name\": \"Jacob\", \"allowance\": 27, \"paid\": false },{ \"name\": \"Nephi\", \"allowance\": 29, \"paid\": false },{ \"name\": \"Enos\", \"allowance\": 34, \"paid\": false },{ \"name\": \"Ether\", \"allowance\": 42, \"paid\": false },{ \"name\": \"Alma\", \"allowance\": 43, \"paid\": true },{ \"name\": \"Jared\", \"allowance\": 21, \"paid\": true },{ \"name\": \"Moroni\", \"allowance\": 50, \"paid\": true },{ \"name\": \"Tiancum\", \"allowance\": 53, \"paid\": false },{ \"name\": \"Jacob\", \"allowance\": 27, \"paid\": false },{ \"name\": \"Nephi\", \"allowance\": 29, \"paid\": false },{ \"name\": \"Enos\", \"allowance\": 34, \"paid\": false },{ \"name\": \"Ether\", \"allowance\": 42, \"paid\": false },{ \"name\": \"Alma\", \"allowance\": 43, \"paid\": true },{ \"name\": \"Jared\", \"allowance\": 21, \"paid\": true },{ \"name\": \"Moroni\", \"allowance\": 50, \"paid\": true },{ \"name\": \"Tiancum\", \"allowance\": 53, \"paid\": false },{ \"name\": \"Jacob\", \"allowance\": 27, \"paid\": false },{ \"name\": \"Nephi\", \"allowance\": 29, \"paid\": false },{ \"name\": \"Enos\", \"allowance\": 34, \"paid\": false },{ \"name\": \"Ether\", \"allowance\": 42, \"paid\": false },{ \"name\": \"Alma\", \"allowance\": 43, \"paid\": true },{ \"name\": \"Jared\", \"allowance\": 21, \"paid\": true },{ \"name\": \"Moroni\", \"allowance\": 50, \"paid\": true },{ \"name\": \"Tiancum\", \"allowance\": 53, \"paid\": false },{ \"name\": \"Jacob\", \"allowance\": 27, \"paid\": false },{ \"name\": \"Nephi\", \"allowance\": 29, \"paid\": false },{ \"name\": \"Enos\", \"allowance\": 34, \"paid\": false },{ \"name\": \"Ether\", \"allowance\": 42, \"paid\": false },{ \"name\": \"Alma\", \"allowance\": 43, \"paid\": true },{ \"name\": \"Jared\", \"allowance\": 21, \"paid\": true },{ \"name\": \"Moroni\", \"allowance\": 50, \"paid\": true },{ \"name\": \"Tiancum\", \"allowance\": 53, \"paid\": false }]";


            List<test> jsonList = new List<test>();
            jsonList = new JavaScriptSerializer().Deserialize<List<test>>(jsonstr);


            var result1 = searchParms.name == "" || searchParms.name == null ? jsonList : jsonList.Where(x => x.name.Contains(searchParms.name));


            var result2 = searchParms.allowance == 0 || searchParms.allowance == null ? result1 : result1.Where(x => x.allowance.Equals(searchParms.allowance));

            //result = searchParms.paid == null ? jsonList : result.Where(x => x.paid.Equals(searchParms.paid));

            var totalcount = result2.Count();

           var finalresult = result2.Skip((page - 1) * pageSize).Take(pageSize);
           string jsonstr2 = new JavaScriptSerializer().Serialize(finalresult);


            StringBuilder sb = new StringBuilder();

            sb.Append("{\"data\":").Append(jsonstr2).Append(", \"count\":").Append(totalcount).Append("}");

            //dynamic stuff = JObject.Parse("{ 'name': 'Moroni', 'allowance': 505050505050505050, 'paid': true }");
            return new HttpResponseMessage
            {
                Content = new StringContent(sb.ToString(),
                                       System.Text.Encoding.UTF8, "application/json")
            };
        }
    }

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)