CODEWITHSUNDEEP
javascriptangularjsdatagrid
Pablo Malynovytch
Pablo Malynovytch

Reputation: 151

Filters doesn't refresh in datagrid AngularJS

I am trying with this library ( https://github.com/angular-data-grid/angular-data-grid.github.io ) to filter by name with Angular JS. The problem is when I search it doesn't refresh! Only when I click on paginate o change items per page.

My HTML:(I think is something with ng-change)

          <input id="orderIdFilter" type="text" class="form-control order-search-box"
                           placeholder="Enter User Name"
                           ng-change="gridActions1.filter()"
                           ng-model="name"
                           filter-by="nombre"
                           grid-id="grid1"
                           filter-type="text">

Items per page HTML ( I have already tried to put ng-change=reloadGrid)

                   <div class="form-group items-per-page">
                            <label for="itemsOnPageSelect1">Items per page:</label>
                            <select id="itemsOnPageSelect1" class="form-control input-sm"
                                    ng-init="paginationOptions.itemsPerPage = '5'"
                                    ng-model="paginationOptions.itemsPerPage" ng-change="reloadGrid()">
                                <option>5</option>
                                <option>10</option>
                                <option>50</option>
                            </select>
                        </div>

My controller:

    var app = angular.module('myModule', ['ui.bootstrap', 'dataGrid', 'pagination']);
app.controller('ListaComprasController',['$scope', function($scope) {
            $scope.form = true;
            $scope.item = {};
            $scope.pagingOptions = {
                pageSizes: [5, 10, 20, 100],
                pageSize: 3,
                currentPage: 1
            };


        $scope.itens = [
            {nombre: 'Leite', telefono: 212122, descripcion: "tadsasasdas",especialidades:"tarea",dirreccion:"Siempre Viva 920",horarioDesde:"19:00",horarioHasta:"22:00",nombreCom:"Tssa",telefonoCom:"223123",checkCom:true,emailCom:"[email protected]"},
            {nombre: 'Adssad', telefono: 3410220, descripcion: "tadsasasdas",especialidades:"tarea",dirreccion:"Siempre Viva 920",horarioDesde:"19:00",horarioHasta:"22:00",nombreCom:"Tssa",telefonoCom:"223123",checkCom:false,emailCom:"[email protected]"},
            {nombre: 'Adssad', telefono: 3410220, descripcion: "tadsasasdas",especialidades:"tarea",dirreccion:"Siempre Viva 920",horarioDesde:"19:00",horarioHasta:"22:00",nombreCom:"Tssa",telefonoCom:"223123",checkCom:false,emailCom:"[email protected]"},
            {nombre: 'Adssad', telefono: 3410220, descripcion: "tadsasasdas",especialidades:"tarea",dirreccion:"Siempre Viva 920",horarioDesde:"19:00",horarioHasta:"22:00",nombreCom:"Tssa",telefonoCom:"223123",checkCom:false,emailCom:"[email protected]"},
            {nombre: 'Adssad', telefono: 3410220, descripcion: "tadsasasdas",especialidades:"tarea",dirreccion:"Siempre Viva 920",horarioDesde:"19:00",horarioHasta:"22:00",nombreCom:"Tssa",telefonoCom:"223123",checkCom:false,emailCom:"[email protected]"},
            {nombre: 'Leite', telefono: 212122, descripcion: "tadsasasdas",especialidades:"tarea",dirreccion:"Siempre Viva 920",horarioDesde:"19:00",horarioHasta:"22:00",nombreCom:"Tssa",telefonoCom:"223123",checkCom:true,emailCom:"[email protected]"}
        ];
            $scope.gridOptions = {
                data: $scope.itens, //required parameter - array with data
                //optional parameter - start sort options
                /*sort: {
                    predicate: 'nombre',
                    direction: 'asc'
                }*/
            };
            $scope.$watch(
                function() {
                    return {
                        currentPage: $scope.pagingOptions.currentPage,
                        pageSize: $scope.pagingOptions.pageSize
                    };
                },
                function(newVal, oldVal) {
                    // Reset to page 1 when the page size changes
                    if (newVal.pageSize !== oldVal.pageSize) {
                        $scope.pagingOptions.currentPage = 1;
                    }

                    //$scope.fillGrid($scope.pagingOptions.currentPage, $scope.pagingOptions.pageSize);
                },
                true);
        $scope.adicionaItem = function () {
            $scope.itens.push(
                {
                    nombre: $scope.item.nombre, 
                    telefono: $scope.item.telefono, 
                    descripcion: $scope.item.descripcion,
                    especialidades: $scope.item.especialidades,
                    dirreccion: $scope.item.dirreccion,
                    horarioDesde: $scope.item.horarioDesde,
                    horarioHasta: $scope.item.horarioHasta,
                    checkCom: $scope.item.checkCom,
                    nombreCom: $scope.item.nombreCom,
                    apellidoCom: $scope.item.apellidoCom,
                    telefonoCom: $scope.item.telefonoCom,
                    emailCom: $scope.item.emailCom
                }
            );
            $scope.item.produto = $scope.item.quantidade = '';
            toastr.success("Item adicionado com sucesso.");
            $scope.form = true;
        };
        $scope.addItem = function () {
            $scope.form = false;
        };
        $scope.editarItem = function(index){
            $scope.form = false;
            $scope.item = $scope.itens[index];
            $scope.edit = true;
        };

        $scope.applyChanges = function(index){
            $scope.item = {};
            $scope.form = false;
            $scope.edit = false;
            toastr.success("Item alterado com sucesso.");
        };
        $scope.CancelarItem = function(index){
            $scope.edit = false;
            $scope.form = true;
            $scope.item = {};
        };
        $scope.deleteItem = function(row){
            var index = $scope.gridOptions.data.indexOf(row.entity);
            $scope.gridOptions.data.splice(index, 1);
            console.log(index);
            //$scope.itens.splice(index, 1);
            toastr.success("Item removido com sucesso.");
        };   
}]);

Upvotes: 1

Views: 594

Answers (1)

Peter Stegnar
Peter Stegnar

Reputation: 12925

All you need to do is to properly initialize the grid.

You reference filter input to this function:

ng-change="gridActions1.filter()"

You can also define gridActions1 in a controller (but it is not mandatory as it seems).

$scope.gridActions1 = {};

Then you need to define gridActions1 in a datagrid initialization:

grid-actions="gridActions1"

Check example: https://github.com/angular-data-grid/angular-data-grid.github.io/blob/master/demo/100k/index.html (search for "gridActions")

Please note:

grid-actions: object in your controller with functions for updating grid. You can pass string or create empty object in controller. Use this object for calling methods of directive: sort(), filter(), refresh().

You can even have custom filters: https://github.com/angular-data-grid/angular-data-grid.github.io#custom-filters

Working example: http://angular-data-grid.github.io/demo/bootstrap/multiple.html

Upvotes: 1

Related Questions