KendoUI lưới ngày lọc định dạng

Question

Trong lưới kendo của tôi, tôi muốn thay đổi định dạng ngày trong bộ lọc

Ex: 2015/01/30 Jan 30, 2015

Tôi đã thay đổi ngày Định dạng của ngày bắt đầu

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

Mã trong thể lọc

tôi

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

Đối với ảnh chụp màn hình see this

Cảm ơn

Answer 1

Bạn nên xác định filterable.ui như một chức năng mà bạn tạo DatePicker và thiết lập mong muốn format:

{ 
    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" 
      }); 
     } 
    } 
}, 

Kiểm tra đoạn sau:

$(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>

Answer 2

Giải pháp được cung cấp hoạt động tốt với mặc định 'Bộ lọc menu' nhưng không hoạt động đối với bộ lọc: {mode: "row"}. Trong trường hợp đó, bạn nên sử dụng mẫu.

$("#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'} 
    }); 

Answer 3

Tôi nhận được phản hồi này từ sự hỗ trợ của Telerik cho KendoUI Professional 2016.3.1118. Thêm mạng này vào lưới của bạn:

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