Wybór daty w jqGrid, prosty przykład?

Question

Czy ktoś wie o dodaniu jquery UI DatePicker (lub niektórych innych) w jqGrid? Próbuję go uruchomić, aby uzyskać wbudowaną siatkę edycji.

Znalazłem kilka przykładów, ale nic nie działa. Chciałbym coś naprawdę prostego!

My Siatka setup (nie wiem, czy to nessecary na to pytanie):

$(function() { 
    var lastsel; 
    $("#list").jqGrid({ 
     url: '@Url.Action("ExampleData", "Home")', 
     datatype: 'json', 
     mtype: 'GET', 
     colNames: ['Namn', 'Födelsedag', 'Adress', 'Stad'], 
     colModel: [ 
      { name: 'Name', index: 'Name', width: 130, editable: true }, 
      { name: 'Birthday', index: 'Birthday', width: 80, editable: true }, 
      // DatePicker for birthday 

      { name: 'Address', index: 'Address', width: 180, editable: true }, 
      { name: 'City', index: 'City', width: 80, editable: true }, 
     ], 
     pager: '#pager', 
     rowNum: 10, 
     rowList: [10, 20, 30], 
     sortname: 'Name', 
     sortorder: 'desc', 
     viewrecords: true, 
     gridview: true, 
     width: 700, 
     onSelectRow: function (id) { 
      if (id && id !== lastsel) { 
       jQuery('#list').jqGrid('saveRow', lastsel); 
       jQuery('#list').jqGrid('editRow', id, true); 
       lastsel = id; 
      } 
     }, 
     editurl: '@Url.Action("Incoming", "Home")', 
     caption: 'Kontaktpersoner' 
    }); 

    jQuery("#list").jqGrid('navGrid', "#pager", { edit: false, add: false, del: true }); 
    jQuery("#list").jqGrid('inlineNav', "#pager"); 

Answer 1

Jak można przeczytać w jqGrid documentation istnieje opcja dataInit do tego. Co należy pamiętać, że to zdarzenie jest wywoływane przed element jest wstawiany do DOM, więc użyć setTimeout dla pewności:

{ name: 'Birthday', index: 'Birthday', width: 80, editable: true editoptions: { dataInit: function(el) { setTimeout(function() { $(el).datepicker(); }, 200); } } }, 

Answer 2

Prostota kodu zależy od formatu danych, których wypełnienie " Kolumna urodzinowa. Najczęściej potrzebna jest dodatkowa wartość kolumny "Urodziny", pod warunkiem, że zawiera ona

editoptions: { dataInit: function (elem) { $(elem).datepicker(); } } 

. Czasami trzeba zdefiniować wywołanie zwrotne dla onSelect wywołania zwrotnego dla datepicker (patrz here), czasami trzeba użyć setTimeout dodatkowo lub dokonać innych dostosowań (patrz the answer), które zawiera działające dema.