Seeing an interesting problem when combining DatePicker and Grid functionality in the inline editing.
The date is editable without clicking the edit button. Clicking the edit button returns the date field to a input box and datepicker functionality is lost and when cancelling an edit the date is lost entirely and becomes an empty field.
Downloaded some other code samples out there and seeing some of the same issues. Anyone come upon these?
Cshtml:
<
div
>
@(Html.Kendo().Grid(Model)
.Name("commissionGrid")
.Columns(columns =>
{
columns.Bound(p => p.CommissionId).Hidden();
columns.Bound(p => p.TenantId).Hidden();
columns.Bound(p => p.SimpleName);
columns.Bound(p => p.StartDate).HtmlAttributes(new
{
@class = "templateCell"
}).ClientTemplate(
Html.Kendo().DatePicker()
.Name("FDPicker_#=CommissionId#")
.Format("{0:MM/dd/yyyy}")
.HtmlAttributes(new { data_bind = "value:StartDate" })
.ToClientTemplate().ToString()
).Format("{0:MM/dd/yyyy}");
columns.Bound(p => p.CustomerName);
columns.Bound(p => p.CustomerNumber);
columns.Command(command =>
{
command.Edit();
command.Destroy();
}).Title("Commands");
})
.Events(ev => ev.DataBound("db"))
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Pageable()
.Navigatable()
.Sortable()
.DataSource(dataSource => dataSource
.Ajax()
.Batch(false)
.PageSize(10)
.ServerOperation(true)
.Model(model =>
{
model.Id(p => p.CommissionId);
model.Field(p => p.CommissionId).Editable(false);
})
.Update(update => update.Action("EditingInline_Update", "Commissions"))
.Destroy(destroy => destroy.Action("EditingInLine_Destroy", "Commissions"))
)
)
</
div
>
JavaScript
function
db(e) {
var
grid =
this
;
$(
".templateCell"
).each(
function
() {
eval($(
this
).children(
"script"
).last().html());
var
tr = $(
this
).closest(
'tr'
);
var
item = grid.dataItem(tr);
kendo.bind($(
this
), item);
});
}