I'm trying to get the DatePicker inside my grid's custom popup editor to init/show the Date from my DataSource ...
Here's a fiddle to show you what I mean: http://jsfiddle.net/kzpzC/4/
<div id="grid" class="k-content clearfix"></div>
<script id="templ" type="text/x-kendo-template">
<div data-container-for="expires_at" class="k-edit-field">
<input type="date" name="expires_at" data-bind="value:expires_at" data-role="datepicker"/>
</div>
</script>
$('#grid').kendoGrid({
dataSource: {
data: [
{
name: 'test 1',
expires_at: "2010-11-01T00:00:00Z"},
{
name: 'test 2',
expires_at: "2012-04-25T00:00:00Z"}
],
pageSize: 10
},
columns: [
{
field: "name",
title: "Name",
template: '<strong>#=name#</strong>'},
{
field: "expires_at",
title: "Date",
template: '#= kendo.toString(new Date(expires_at), "MM/dd/yyyy") #',
width: "100px"},
{
command: ["edit"],
title: " ",
width: "210px"}
],
editable: {
mode: "popup",
template: kendo.template($('#templ').html(), {
useWithBlock: false
}),
update: true,
destroy: false
}
});
Maybe someone can point me in the right direction ...!?
thanks
Here's a fiddle to show you what I mean: http://jsfiddle.net/kzpzC/4/
<div id="grid" class="k-content clearfix"></div>
<script id="templ" type="text/x-kendo-template">
<div data-container-for="expires_at" class="k-edit-field">
<input type="date" name="expires_at" data-bind="value:expires_at" data-role="datepicker"/>
</div>
</script>
$('#grid').kendoGrid({
dataSource: {
data: [
{
name: 'test 1',
expires_at: "2010-11-01T00:00:00Z"},
{
name: 'test 2',
expires_at: "2012-04-25T00:00:00Z"}
],
pageSize: 10
},
columns: [
{
field: "name",
title: "Name",
template: '<strong>#=name#</strong>'},
{
field: "expires_at",
title: "Date",
template: '#= kendo.toString(new Date(expires_at), "MM/dd/yyyy") #',
width: "100px"},
{
command: ["edit"],
title: " ",
width: "210px"}
],
editable: {
mode: "popup",
template: kendo.template($('#templ').html(), {
useWithBlock: false
}),
update: true,
destroy: false
}
});
Maybe someone can point me in the right direction ...!?
thanks