Multi checkbox with server pagination

[Carlos]

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
                    }
                });
            }

[Vasil]

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

 

 

[Carlos]

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

[Carlos]

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

http://dpaste.com/0ZDJ2BH

[Carlos]

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