Reputation: 277

How to filter a numeric status that appears as text in kendo-ui?

I'm using kendo-ui to render a grid.

I need to filter a table which has a "status" field. In the database this field is a numeric, but it represents "active" and "inactive".

When I filter the column by "0" or "1" it works correctly, but I need to filter using the terms "active" and "inactive".

This is my code:

<script type="text/javascript">

  $(document).ready(function(e) {
    //carrega o grid da página

    kendo.ui.FilterCell.fn.options.template = function(e){
      e.element.kendoAutoComplete({
        serverFiltering: false,
        valuePrimitive: true,
        noDataTemplate: ''
      });
    }


    var dataSource = new kendo.data.DataSource({
      //data: data,
      transport: {
        read:{                                
          url: '{{url('franquias/franquias_get')}}',
          dataType: 'json', //not needed jQuery figures it out, shown to be verbose
          type: 'GET' //defined but, this is the default
        }
      },
      serverPaging: true,
      serverFiltering: true,
      serverSorting: true,
      pageSize: 10,
      schema: {
        model: {
          id: "id_franquia",
          fields: {
            id_franquia: { type: "number" },
            nm_franquia: { type: "string" },
          }
        },
        data: "data",
        total:"total"
      },
      pageable: {
          refresh: true,
          pageSizes: true
      },
    });

    var grid= $("#grid").kendoGrid({
      dataSource: dataSource,
      pageable:true,
      scrollable: false,
      sortable: true,
      navigatable: true,
      resizable: true,
      columnMenu: {
        filterable: false,
        sortable: false
      },
      filterable: {
          mode: "row"
      },
      columns: [
              { field: "id_franquia", title: 'Id', width: 150, headerTemplate: 'Id <span class="k-icon k-i-kpi"></span>'},
              { field: "nm_franquia", title: 'Nome', headerTemplate: 'Nome <span class="k-icon k-i-kpi"></span>'},
              { field: "nm_franquia_abrev", title: 'Abreviação', headerTemplate: 'Abreviação <span class="k-icon k-i-kpi"></span>'},
              { field: "nu_status", title: 'Status', headerTemplate: 'Status <span class="k-icon k-i-kpi"></span>', values: [ { text: "Ativo", value: 1 }, { text: "Inativo", value: 0 }]},
              { field: "created_at", title: 'Data Cadastro', headerTemplate: 'Data Cadastro <span class="k-icon k-i-kpi"></span>', hidden:true },
              { field: "action", title:"Ação", width: 125, filterable:false,menu:false, template:"<form method='POST' action='/franquias/#=id#' accept-charset='UTF-8'><input name=\"_method\" type=\"hidden\" value=\"DELETE\"><input type=\"hidden\" name=\"_token\" value=\"{{ csrf_token() }}\"> <a class=\"btn btn-default \" href=\"/franquias/#=id#/edit\"><i class=\"fa fa-pencil\"></i></a><button type=\"submit\" class=\"btn btn-default\" onclick=\"return confirm('Tem certeza que deseja deletar?')\"><i class=\"fa fa-trash\"></i></button> </div></form>"}
            ]
    }).data("kendoGrid");  

    grid.thead.find(".k-header-column-menu").hide();
    grid.thead.find("[data-field=action]>.k-header-column-menu").show();
  });
</script>

Upvotes: 0

Answers (1)

Jayesh Goyani

Reputation: 11154

Please try with the below code snippet.

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/grid/local-data-binding">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.material.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2017.2.504/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.2.504/js/kendo.all.min.js"></script>
</head>
<body>
        <script>
  var products = [{
    ProductID : 1,
    ProductName : "Chai",
    SupplierID : 1,
    CategoryID : 1,
    QuantityPerUnit : "10 boxes x 20 bags",
    UnitPrice : 18.0000,
    UnitsInStock : 39,
    UnitsOnOrder : 0,
    ReorderLevel : 10,
    Discontinued : 0, 
}, {
    ProductID : 2,
    ProductName : "Chang",
    SupplierID : 1,
    CategoryID : 1,
    QuantityPerUnit : "24 - 12 oz bottles",
    UnitPrice : 19.0000,
    UnitsInStock : 17,
    UnitsOnOrder : 40,
    ReorderLevel : 25,
    Discontinued : 0, 
}, {
    ProductID : 3,
    ProductName : "Aniseed Syrup",
    SupplierID : 1,
    CategoryID : 2,
    QuantityPerUnit : "12 - 550 ml bottles",
    UnitPrice : 10.0000,
    UnitsInStock : 13,
    UnitsOnOrder : 70,
    ReorderLevel : 25,
    Discontinued : 0, 
}, {
    ProductID : 4,
    ProductName : "Chef Anton's Cajun Seasoning",
    SupplierID : 2,
    CategoryID : 2,
    QuantityPerUnit : "48 - 6 oz jars",
    UnitPrice : 22.0000,
    UnitsInStock : 53,
    UnitsOnOrder : 0,
    ReorderLevel : 0,
    Discontinued : 1, 
}];</script>

        <div id="example">
            <div id="grid"></div>

            <script>
                $(document).ready(function() {
                    $("#grid").kendoGrid({
                        dataSource: {
                            data: products,
                            schema: {
                                model: {
                                    fields: {
                                        ProductName: { type: "string" },
                                        UnitPrice: { type: "number" },
                                        UnitsInStock: { type: "number" },
                                        Discontinued: { type: "string" }
                                    }
                                }
                            },
                            pageSize: 20
                        },
                        height: 550,
                        scrollable: true,
                        sortable: true,
                        filterable: true,
                        pageable: {
                            input: true,
                            numeric: false
                        },
                        columns: [
                            "ProductName",
                            { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
                            { field: "UnitsInStock", title: "Units In Stock", width: "130px" },
                            { field: "Discontinued", width: "130px",
                            headerTemplate: 'Status <span class="k-icon k-i-kpi"></span>', values: [ { text: "active", value: 1 }, { text: "inactive", value: 0 }]}
                        ]
                    });
                });
            </script>
</div>


</body>
</html>

Demo

Let me know if any concern.

Upvotes: 0

How to filter a numeric status that appears as text in kendo-ui?

Answers (1)

Related Questions