KendoUI Grid: custom edit form with datepicker returning false format

Question

I'm getting stuck using a KendoUI grid. So far, the setup works as hoped. I created a custom datasource with 5 entries, all containing a title, description and value. The values can be different, they can either be: boolean, numeric, text, date or time.

using a custom KendoTemplate for the edit popup, I can get the popup to show the correct field type according to what the value is:

<!-- Datefield -->
#if($.isNumeric(value) == false && value.match(/^\d{2}([.\/-])\d{2}\1\d{4}$/)) {#
<li>
    <label>Waarde</label>
    <input id="datepicker" data-bind="value:value" style="width: 40%;" />
</li> 
#} else if($.isNumeric(value) == false && value.match('([01]?[0-9]|2[0-3]):[0-5][0-9]')) {#
<li>
    <label>Waarde</label>
    <input id="timepicker" data-bind="value:value" style="width: 40%;" />
</li> 
<!-- Yes/No Radio button if value is J(=Yes) or N(=No) -->    
#} else if (value == "J" || value == "N") {#
<li>
    <label>Waarde</label>
    <input type="radio" name="value" data-bind="checked:value" value="J" /> Ja
    <input type="radio" name="value" data-bind="checked:value" value="N" /> Nee
</li>                   
<!-- If the value is Numeric then show a numeric textbox -->
#} else if($.isNumeric(value)) {#                                           
<li>
    <label>Waarde</label>
    <input type="text" data-bind="value:value" data-role="numerictextbox" style="width:50%;" />
</li>                   
<!-- Else: textfield for the value -->
#}else {#                                           
<li>
    <label>Waarde</label>
    <input type="text" data-bind="value:value" class="k-textbox" />
</li>  
#}#

So far so good, this works like it is supposed to. The datepicker & timepicker are created as soon as a popup is opened in the 'edit' method belonging to KendoGrid as follows:

if($('#datepicker').length > 0) {
    console.log('datefield');
    $("#datepicker").kendoDatePicker({
        format: "dd-MM-yyyy",
        parseFormats: ["dd-MM-yyyy"]    
    }); 
}
if($('#timepicker').length > 0) {
    console.log('timefield');
    $("#timepicker").kendoTimePicker({
        timeFormat: "HH:mm" 
    }); 
}

However(!) one thing is going wrong. No mather what I tried, the returning value that is being posted by the edit form is not containing a date such as 19-11-2013 but contains a date like 19-11-2013T00:00:00.000Z. At least the basics of the script are working, but due to this format this field is recognized as 'time' instead of 'date' after editting: I really need just the dd-mm-yyyy notification and HH:ii for time.

I've search the KendoForums, Google & StackOverflow but I can't seem to find anyone having the same problem. It might be because I'm using the wrong search keywords.. whatever may be the case: is there anyone that has experienced the same issue or who knows what the solution is?

//Edit: a little addition to make the question more clear (I hope):

Creating the KendoGrid works
Binding a custom template form to the edit popup works aswel
At first all fields display the correct type (bool/numeric/date/time/text)
INSIDE the edit popup the date format is correct as I need id
The error occures when saving the data, the value returned by the popup back to the datasource contains a YYYY-mm-ddTHH:ii:ss.000Z format instead of dd-mm-YYYY

OnaBai OnaBai · Accepted Answer · 2013-05-27T00:39:03

Kendo UI stores dates as a JavaScript Date object so it is always stored as it (no matter how it is displayed or entered).

Either accept this format on the server or convert it to dd-mm-YYYY in the create and update functions of the DataSource.transport.

You can do it implementing a function in transport.create.data and transport.update.data or transport.parameterMap.

KendoUI Grid: custom edit form with datepicker returning false format

1 Answers