2012-11-27 16 views
8

Mam siatkę kendo z polem daty w źródle danych. Podczas wyświetlania pola używam szablonu, aby wyświetlić datę w formacie daty brytyjskiej "dd/MM/rrrr". Problem polega na filtrowaniu, nie wiem jak wyświetlić filtr daty w formacie brytyjskim.kendo ui grid datasource filtr data format

Innym problemem, jaki mam, jest brak typu daty i daty, więc można filtrować tylko według dat, a nie dat.

Każda pomoc lub pomysły będą mile widziane.

Jest to częściowy widok (cshtml)

<script type="text/javascript"> 
$(document).ready(function() { 
    var date = new Date(); 
    var dateString = date.getMonth()+1 + "/" + date.getDate() + "/" + date.getFullYear(); 
    var url = '@Url.Action(AccountTypeController.GetAllocationGridData, new {id = Model.Id})'; 

    var dataSource = new kendo.data.DataSource({ 
     serverPaging: true, 
     serverSorting: true, 
     serverFiltering: true, 
     pageSize: 10, 
     transport: { 
      read: { 
       type: 'post', 
       dataType: 'json', 
       url: url 
      }, 
      parameterMap: function(options) { 
       if (options.filter) { 
        for (var i = 0; i < options.filter.filters.length; i++) { 
         if (options.filter.filters[i].field == 'Start' || options.filter.filters[i].field == 'End') { 
          options.filter.filters[i].value = kendo.toString(options.filter.filters[i].value, "MM/dd/yyyy"); 
         } 
        } 
       } 
       return options; 
      } 
     }, 
     schema: { 
      data: 'Data', 
      total: 'Count', 
      model: { 
       id: 'Id', 
       fields: { 
        Id: { type: 'number' }, 
        Start: { type: 'date' }, 
        End: { type: 'date' }, 
        Allocation: { type: 'number' } 
       } 
      } 
     }, 
     sort: { 
      field: "Start", 
      dir: "asc" 
     }, 
     filter:{ 
      logic: "and", 
      filters: [ 
       { 
        field: "End", 
        operator: "gt", 
        value: dateString 
       } 
      ] 
     } 
    }); 

    $('#account-allocation').kendoGrid({ 
     height: 383, 
     dataSource: dataSource, 
     columns: [ 
      { 
       field: 'Start', 
       title: 'Start Date', 
       template: '#= kendo.toString(Start,"dd/MM/yyyy HH:mm") #' 
      }, 
      { 
       field: 'End', 
       title: 'End Date', 
       template: '#= kendo.toString(End,"dd/MM/yyyy HH:mm") #' 
      }, 
      { 
       field: 'NoSpaces', 
       title: 'Number of Spaces', 
       filterable: false 
      }, 
      { 
       field: 'Id', 
       filterable: false, 
       title: 'Actions', 
       template: '<a class="link-lightbox" href="@Url.Action(AccountTypeController.UpdateAllocationAction1, AccountTypeController.Name)/#= Id #"><img src="@Url.Content("~/Content/img/grid-update.png")" alt="Update"/></a>', 
       width: 75 
      } 
     ], 
     filterable: true, 
     sortable: false, 
     scrollable: false, 
     pageable: true   
    }); 
</script> 

<div class="panel panel-w"> 
    <h2>@Model.Name Allocations 
      <a href="@Url.Action(AccountTypeController.SetAllocationAction1, new { id = Model.Id })" class="button link-lightbox"><span class="edit">Set Account Type Allocation</span></a> 
    </h2> 
    <div id="account-allocation"></div> 
</div> 
+0

Ponadto, można spróbować zobaczyć tutaj: http://stackoverflow.com/questions/28232575/kendoui-grid-filter-date-format –

Odpowiedz

9

Najpierw dołączyć plik JavaScript odpowiadający kulturze angielskiej:

<script src="http://cdn.kendostatic.com/2012.2.710/js/cultures/kendo.culture.en-GB.min.js"></script> 

wtedy uruchamiamy kendo.culture aby ustawić aktualną kulturę:

kendo.culture("en-GB"); 

Kendo Grid automatycznie użyje formatu "dd/MM/rrrr".

Więcej informacji o tym, jak Kendo UI radzi sobie z globalizacją, można znaleźć pod numerem documentation.

Oto live demo: http://jsbin.com/onetol/1/edit

+0

Obrobione doskonale. Dzięki! –