[Solved] Update DateTimePicker Value on each row

[Peter]

Hey there,
I've the following Grid with a DateTimePicker in the Toolbar:

Html.Telerik().Grid<net.dotup.Repla.Models.EmployeeAppointment_Result>()
    ...
    .ToolBar(commands =>
    {
        commands.SubmitChanges();
        commands.Template(
        @<text>
        @Html.Telerik().DateTimePicker().Name("PlannedDate").ClientEvents(events => events.OnChange("onDateChanged"))
        <a href="#" class="t-button t-grid-save-changes">Änderungen speichern</a>
        </text>
        );
    })
    .DataBinding(dataBinding =>
        dataBinding.Ajax()
            .Update("_CreateAnnounce", "Appointment")
            .Select("_SelectAnnounce", "Appointment")
    )
    ...
    .Columns(col =>
    {
        ...
        col.Bound(field => field.DatePerformed).Title("Termin").Format("{0:dd.MM.yyyy HH:mm}").HtmlAttributes(new { id = "dateBox" });
    })
    .Render();

When I choose another date in the picker I've to update the field with the id 'dateBox'

<script type="text/javascript">

    function onDateChanged(e) {
        $("#dateBox").html(formatDateTime(e.value));
        $("#Grid tbody input#DatePerformed").attr("value", formatDateTime(e.value));
    }

    function formatDateTime(date) {
        return $.telerik.formatString('{0:dd.MM.yyyy hh:mm}', date);
    }

</script>

With this script I'm able to update the displayed date but in my Controller is still the old date

        [GridAction]
        [HttpPost]
        public ActionResult _CreateAnnounce(
            [Bind(Prefix = "updated")]IEnumerable<EmployeeAppointment_Result> updatedProducts,
            [Bind(Prefix = "deleted")]IEnumerable<EmployeeAppointment_Result> deletedProduct)
        {
...

What do I have to do to achieve the selected date in my updatedProducts

I'm not able to access the DateTimePicker Value within my Controller because the Toolbar isn't inside the Form. That's actually the problem!

Thanks in advance!

[Peter]

Here you are!

function onDateChanged(e) {
    var selectedDate = e.value;

    // update the td elements
    $("#Grid tbody #dateBox").each(function () { this.innerHTML = formatDateTime(selectedDate); });

    var grid = $('#Grid').data('tGrid');

    // update the internal values
    for (var i = 0; i < grid.$rows().length; i++) {
        var row = grid.$rows()[i];
        var dataItem = $("#Grid").data("tGrid").dataItem(row);
        dataItem.DatePerformed = selectedDate;
    }

}