web-dev-qa-db-fra.com

Format de date du filtre de grille KendoUI

Dans ma grille de kendo, je veux changer le format de la date dans le filtre

Ex: 30/01/2015 au 30 janvier 2015

Je change déjà le format de la date de début

                field: "StartDate",
                title: "Start Date",
                width: 30,
                format: "{0:MMM dd, yyyy}",
                parseFormats: "{0:MM/dd/yyyy}",
                headerTemplate: '<label for="check-all"><b>Start Date</b></label>',
                headerAttributes: { style: "text-align: center;" },
                attributes: { style: "text-align:center !important;padding-right: 25px;" }

Code dans mon filtrable

  filterable: {
                extra: false,
                operators: {
                    string: {
                        startswith: "Starts with",
                        eq: "Is equal to"
                    }
                }
            },

Pour capture d'écran voir ceci

Merci

javascriptkendo-uikendo-grid
8
nojla

Vous devez définir filterable.ui en tant que fonction dans laquelle vous créez la DatePicker et définissez la format souhaitée:

{
    field: "StartDate",
    title: "Start Date",
    width: 30,
    format: "{0:MMM dd, yyyy}",
    parseFormats: "{0:MM/dd/yyyy}",
    headerTemplate: '<label for="check-all"><b>Start Date</b></label>',
    headerAttributes: { style: "text-align: center;" },
    attributes: { style: "text-align:center !important;padding-right: 25px;" },
    filterable : {
        ui: function (element) {
            element.kendoDatePicker({
                format: "MMM dd, yyyy"
            });
        }
    }
},

Vérifiez l'extrait suivant:

$(document).ready(function() {
  $("#grid").kendoGrid({
    dataSource: {
      type: "odata",
      transport: {
        read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
      },
      schema: {
        model: {
          fields: {
            OrderID: { type: "number" },
            Freight: { type: "number" },
            ShipName: { type: "string" },
            OrderDate: { type: "date" },
            ShipCity: { type: "string" }
          }
        }
      },
      pageSize: 20,
      serverPaging: true,
      serverFiltering: true,
      serverSorting: true
    },
    height: 550,
    filterable: true,
    sortable: true,
    pageable: true,
    columns: [
      {
        field:"OrderID",
        filterable: false
      },
      {
        field: "OrderDate",
        title: "Order Date",
        format: "{0:MMM dd, yyyy}",
        parseFormats: "{0:MM/dd/yyyy}",
        headerTemplate: '<label for="check-all"><b>Start Date</b></label>',
        headerAttributes: { style: "text-align: center;" },
        attributes: { style: "text-align:center !important;padding-right: 25px;" },
        filterable : {
          ui: function (element) {
            element.kendoDatePicker({
              format: "MMM dd, yyyy"
            });
          }
        }
      },
      "ShipName"
    ]
  });
});
html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>

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

14
OnaBai

La solution fournie fonctionne bien avec les 'filtres de menu' par défaut, mais ne fonctionne pas pour le filtre: {mode: "rangée"}. Dans ce cas, vous devez utiliser un modèle.

 $("#grid").kendoGrid({
        dataSource: {
            type: "odata",
            transport: {
                read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
            },
            schema: {
                model: {
                    fields: {
                        OrderID: {type: "number"},
                        Freight: {type: "number"},
                        ShipName: {type: "string"},
                        OrderDate: {type: "date"},
                        ShipCity: {type: "string"}
                    }
                }
            },
            pageSize: 20,
            serverPaging: true,
            serverFiltering: true,
            serverSorting: true
        },
        height: 550,
        // filterable: true,
        sortable: true,
        pageable: true,
        columns: [
            {
                field: "OrderID",
                filterable: false
            },
            {
                field: "OrderDate",
                title: "Order Date",
                format: "{0:MMM dd, yyyy}",
                parseFormats: "{0:MM/dd/yyyy}",
                headerTemplate: '<label for="check-all"><b>Start Date</b></label>',
                headerAttributes: {style: "text-align: center;"},
                attributes: {style: "text-align:center !important;padding-right: 25px;"},
                filterable: {
                    cell: {
                        template: function (args) {
                            args.element.kendoDatePicker({
                                format: "MMM dd, yyyy"
                            });
                        }
                    }
                }
            },
            "ShipName"
        ], filterable: {mode: 'row'}
    });
9
Mirza Ehsanul Haque

J'ai reçu cette réponse du support de Telerik pour KendoUI Professional 2016.3.1118. Ajoutez ceci à votre grille:

columnMenu: true,
columnMenuInit: function (e) {
    var menu = e.container.find(".k-menu").data("kendoMenu");
    menu.bind('activate', function(ev) {
        if(ev.item.is(':last-child')) {    // use 'span.k-dropdown.k-header' if the column is locked
            // if an element in the submenu is focused first, the issue is not observed (menu disappearing)
            ev.item.find('span.k-dropdown.k-header').first().focus();     

            // column field is of type "date"
            if(e.field === "OrderDate") {
                // accessing the DatePickers and setting the custom format
                var datePickerElements = ev.item.find('[data-role="datepicker"]');
                datePickerElements.each(function(idx, input) {
                    var datePicker = $(input).data('kendoDatePicker');
                    datePicker.setOptions({
                        format: 'MMM dd, yyyy'
                    });
                });
            }
        }
    });
},
0
xinthose