Multi checkbox with server pagination

5 posts, 0 answers
  1. Carlos
    Carlos avatar
    15 posts
    Member since:
    Sep 2015

    Posted 16 Feb 2016 Link to this post

    I'm trying to do a multi checkbox filter in my grid, but something is going wrong and i don't know what, here is my grid configuration.

    PS: in $scope.data i have all the data i need

    function createGrid() {
                    jQuery("#grid").kendoGrid({
                        columns: [
                            {
                                field: "id",
                                title: "ID",
                                menu: false,
                                filterable: {
                                    dataSource: $scope.data
                                }
                            },
                            {
                                field: "invoiceCode",
                                title: "CÓDIGO",
                                width: '180px',
                                filterable: {
                                    dataSource: $scope.data
                                }
                            },
                            {
                                field: "operationCode",
                                title: "COD OPERAÇÃO",
                                width: '200px',
                                filterable: {
                                    dataSource: $scope.data
                                }
                            },
                            {
                                title: 'Tipo',
                                field: "tipoContrato",
                                filterable: {
                                    multi: true,
                                    dataSource: $scope.data
                                },
                                width: '120px'
                            },
                            {
                                field: "contraparteName",
                                title: "NOME EMPRESA",
                                width: '150px',
                                filterable: {
                                    dataSource: $scope.data
                                }
                            },
                            {
                                field: "contraparteCode",
                                title: "RAZÃO SOCIAL",
                                width: '8%',
                                filterable: {
                                    dataSource: $scope.data
                                }
                            },
                            {
                                field: "contraparteCnpj",
                                title: "CNPJ",
                                width: '190px',
                                filterable: {
                                    dataSource: $scope.data
                                }
                            },
                            {
                                field: "nomeContrato",
                                title: "NOME CONTRATO",
                                width: '250px',
                                filterable: {
                                    dataSource: $scope.data
                                }
                            },
                            {
                                field: "energiaRef",
                                title: "QTD. ENERGIA",
                                width: "150px",
                                filterable: {
                                    dataSource: $scope.data
                                }
                            },
                            {
                                field: "preco",
                                title: "PREÇO ENERGIA",
                                width: "150px",
                                filterable: {
                                    dataSource: $scope.data
                                }
                            },
                            {
                                field: "custoEnergia",
                                title: "TOTAL",
                                width: "150px",
                                filterable: {
                                    dataSource: $scope.data
                                }
                            },
                            {
                                field: "statusEnergia",
                                title: "STATUS QTD.",
                                width: "190px",
                                filterable: {
                                    dataSource: $scope.data
                                }
                            },
                            {
                                field: "statusPreco",
                                title: "STATUS PREÇO",
                                width: "190px",
                                filterable: {
                                    dataSource: $scope.data
                                }
                            },
                            {
                                field: "statusGeral",
                                title: "STATUS GERAL",
                                width: "190px",
                                filterable: {
                                    dataSource: $scope.data
                                }
                            },
                            {
                                field: "ciclo",
                                title: "DATA BASE",
                                width: "190px",
                                type: "date",
                                format: "{0:dd/MM/yyyy}",
                                filterable: {
                                    dataSource: $scope.data
                                }
                            },
                            {
                                field: "vencimento",
                                title: "DATA VENCIMENTO",
                                width: "190px",
                                type: "date",
                                format: "{0:dd/MM/yyyy}",
                                filterable: {
                                    dataSource: $scope.data
                                }
                            },
                            {
                                field: "percent",
                                title: "PROCENTAGEM",
                                width: "190px",
                                filterable: {
                                    dataSource: $scope.data
                                }
                            },
                            {
                                field: "statusPagamento",
                                title: "PAGA",
                                width: "190px",
                                filterable: {
                                    dataSource: $scope.data
                                }
                            },
                            {
                                field: "created",
                                title: "CADASTRO",
                                width: "190px",
                                type: "date",
                                format: "{0:dd/MM/yyyy}",
                                filterable: {
                                    dataSource: $scope.data
                                }
                            }
                        ],
     
                        dataSource: {
                            transport: {
                                read: function(options){
     
                                    var today = new Date();
                                    var mm = today.getMonth()+1;
                                    var yy = today.getFullYear();
                                    var date = yy + '-' + mm;
     
                                    var query = {
                                        "Options": {
                                            "order": [
                                                {"field": "supplyDate"}, {"field": "dInvoiceGroupId"}, {"field": "baseDate"}
                                            ],
                                            "limit": 20, "page": 1
                                        },
                                        "Criteria": {"baseDate": date}
                                    };
     
                                    query.Options.page = options.data.page;
                                    query.Options.limit = options.data.pageSize;
                                    if(typeof options.data.sort !== "undefined" && options.data.sort !== null) {
                                        for(var i = 0; i< options.data.sort.length; i++) {
     
                                            if(options.data.sort[i].field == "parentName"){
                                                options.data.sort[i].field = "Parent.name"
                                            }
                                            if(options.data.sort[i].dir === "desc") {
                                                query.Options.order = [{
                                                    "direction": "descending",
                                                    "field": options.data.sort[i].field
                                                }];
                                            }else {
                                                query.Options.order = [{
                                                    "direction": "ascending",
                                                    "field": options.data.sort[i].field
                                                }];
                                            }
                                        }
                                    }
                                    var criteria = $scope.buildCriteria(options.data.filter);
                                    if(typeof criteria != 'undefined'){
                                        query.Criteria = criteria;
                                    }
                                    Api.get("Invoices", query, 'gridList').then(function (data) {
                                        options.success(data);
                                    }, function () {
                                        PopupManager.notice(headerPopupManager, bodyPopupManager);
                                    });
     
                                }
                            },
                            schema: {
                                data: function(response){
                                    return response.Data;
                                },
                                model: {
                                    fields: {
                                        code: {type: "string"},
                                        operationCode: {type: "string"},
                                        invoiceType: {type: "string"},
                                        companyName: {type: "string"},
                                        razaoSocial: {type: "string"},
                                        companyCnpj: {type: "string"},
                                        operationName: {type: "string"},
                                        energiaRef: { type: "number" },
                                        preco: { type: "number" },
                                        custoEnergia: { type: "number" },
                                        qttStatus: {type: "string"},
                                        priceStatus: {type: "string"},
                                        generalStatus: {type: "string"},
                                        ciclo: {type: "date"},
                                        vencimento: {type: "string"},
                                        percent: {type: "string"},
                                        statusPagamento: {type: "string"},
                                        created: {type: "date"}
                                    }
                                },
                                total: function(response) {
                                    if(typeof response.MetaData.PaginationInfo != 'undefined'){
                                        return response.MetaData.PaginationInfo.total;
                                    }
                                    return 0;
                                }
                            },
                            serverPaging: true,
                            serverFiltering: true,
                            serverSorting: true
                        },
                        editable: true,
                        reorderable: true,
                        resizable: true,
                        sortable: true,
                        selectable: "multiple",
                        columnMenu: true,
                        filterable: true,
                        pageable: {
                            pageSize: 20,
                            refresh: true,
                            pageSizes: true,
                            buttonCount: 5
                        }
                    });
                }

  2. Vasil
    Admin
    Vasil avatar
    1642 posts

    Posted 18 Feb 2016 Link to this post

    Hi Carlos,

    Could you explain in further details what is the issue. Do you get some error, or the items are just not populating into the list?
    Here is sample that you may test. If possible, modify it to match your page and send it back for further debugging:
    http://dojo.telerik.com/ANaVA

    Regards,
    Vasil
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Carlos
    Carlos avatar
    15 posts
    Member since:
    Sep 2015

    Posted 18 Feb 2016 Link to this post

    Hi Vasil thanks for your answer,

    I having  no errors at console, but when i put  filterable: true the filter button disapear, i tryed many ways,  using the way you quoted too, but without success

  4. Carlos
    Carlos avatar
    15 posts
    Member since:
    Sep 2015

    Posted 18 Feb 2016 in reply to Carlos Link to this post

    Here is an example of what is inside the variable $scope.data

    http://dpaste.com/0ZDJ2BH

  5. Carlos
    Carlos avatar
    15 posts
    Member since:
    Sep 2015

    Posted 18 Feb 2016 Link to this post

    I found my mistake, that was a css fading with the button, i removed this css and the box appears
Back to Top