Posted value from Kendo grid is null

Question

Ok, so I have a Kendo grid with InLine editing enabled.

@(Html.Kendo().Grid<DestinationDisplayModel>()
                          .Name("secondaryDestinationGrid")
                          .DataSource(dataSource => dataSource.Ajax().ServerOperation(true)
                                                              .Read(read => read.Action("RefreshDestinationGrid", "BookTrip"))
                                                              .PageSize(20)
                                                              .Model(model =>
                                                                {
                                                                    model.Id(ddm => ddm.DestinationId);
                                                                    model.Field(ddm => ddm.Country);
                                                                    model.Field(ddm => ddm.ShortArrivalDate);
                                                                    model.Field(ddm => ddm.ShortDepartureDate);
                                                                    model.Field(ddm => ddm.TravelDays).Editable(false);
                                                                })
                                                              .Batch(true)
                                                              .Create(create => create.Action("CreateSecondaryDestination", "BookTrip"))
                                                              .Update(update => update.Action("EditingCustom_Update", "Grid"))
                                                              .Destroy(destroy => destroy.Action("EditingCustom_Destroy", "Grid"))

                          )
                          .Columns(columns =>
                              {
                                  columns.Bound(tdm => tdm.Country);
                                  columns.Bound(tdm => tdm.ShortArrivalDate);
                                  columns.Bound(tdm => tdm.ShortDepartureDate).EditorTemplateName("DatePicker");
                                  columns.Bound(tdm => tdm.TravelDays);
                              })
                            .ToolBar(toolBar =>
                            {
                                toolBar.Template("<button class='btn btn-default' onclick='addSecondaryDestinationRow()'><i class='fa fa-plus green'></i> Add a Secondary Destination</button><button class='btn btn-default k-grid-cancel-changes'><i class='fa fa-times green'></i> Cancel Changes</button><button class='btn btn-default k-grid-save-changes'><i class='fa fa-cloud-upload green'></i> Save Changes</button>");
                            })
                          .Pageable(page => page.Enabled(true).PageSizes(new[] {10, 20, 30, 40}))
                          .Editable(editable => editable.Mode(GridEditMode.InLine))
                          .Sortable(sorting => sorting.SortMode(GridSortMode.SingleColumn))
                          .Scrollable()
                          .Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
                          )

On my ShortDeparture date column I've used a EditorsTemplate to add a Bootstrap date picker. Here is the layout of my DatePicker template

@using Bolt.BusinessLogicLayer.Models
@{
    var datePickerModel = new DatePickerModel();
}

<div class="input-append date" data-date=@datePickerModel.DefaultDate>
   <input id="ShortDepartureDate" name="ShortDepartureDate" class="datepicker" type="text" value=""/>
   <span class="add-on"><i></i></span>
</div>

I'm getting a very strange error, when I type into the DatePicker and then post to my controller, the value of my ShortDepartureDate object is set to whatever I typed.

BUT, when I select a value and post to my controller, the value of my ShortDepartureDate is null.

I can see that the value of the date picker is correctly set by making use of the jquery and the date pickers onclick event. Does anyone know why this will be happening?

Update:

The Kendo support team advised me to add the following attribute to my control

data-bind="value: ShortDepartureDate"

This unfortunately didn't work for me and I decided to move away from the inline grid due to time constraints. But perhaps this will help someone else.

score 0 · Answer 1 · edited May 23 '17 at 12:20

0

Did you check whether the date time format is proper in the posted values.

you can accomplish this in the following 2 ways 1. Inspect the post data in the network tab, XHR requests 2. Ensure that the date time format in the posted data [formcollection] or input stream is the same as that you have in the current culture info date pattern [ShortDateTimePattern].

If the date time patterns is mismatched, then your date time values will be set as null when doing the model binding.

Also, ensure that the date time format string is set properly in kendo.

You can take a look at this reference, also at this.

edited May 23 '17 at 12:20

Community

1
1

answered Feb 24 '14 at 17:21

Saravanan

7,637
5
41
72

Thank you for your response. But my ShortDepartureDate object is of type string, so the format should not make a difference. – Andre Lombaard Feb 24 '14 at 19:31
How are you able to see the value as null in the Controller. Did you check in the Post data that was sent from browser to the controller. – Saravanan Feb 25 '14 at 04:49
I have a break point on the first line of code in my controller and can see that the value is set to null. I will check my post data and let you know if I see anything strange – Andre Lombaard Feb 25 '14 at 06:54
Ok I had a look at the request body of my posted data, when I type 'Hello' into the datepicker I get models%5B0%5D.ShortDepartureDate=Hello, but when I select a proper date value and post, I get models%5B0%5D.ShortDepartureDate=, so it indeed posts an empty value, I'm just not sure why. It might have something to do with the Kendo helper – Andre Lombaard Feb 25 '14 at 07:16
Yes, try to set the date time format inside the date picker. – Saravanan Feb 25 '14 at 09:13
The date time format was set, it didn't work. I also tried a very simple dropdownbox, same issue – Andre Lombaard Feb 25 '14 at 10:04

score 0 · Answer 2 · answered Feb 25 '14 at 16:30

Frist make sure you have new kendo Ui library i had a similar error but they fixed in the new releases currently using
Kendo ui--->2013.3.1324

You can identify the problem by 2 ways.

print the value directly into the cell and check what is the value being printing from editor control

columns.Bound(tdm => tdm.ShortDepartureDate).EditorTemplateName("DatePicker") .ClientTemplate("#=ShortDepartureDate #");
make a Javascript function and call in the client template

columns.Bound(tdm => tdm.ShortDepartureDate).EditorTemplateName("DatePicker") .ClientTemplate("#=FuncShortDepartureDate(data)#");

//data parameter is passed as default by the kendo grid after editing in the cell
```
function FuncShortDepartureDate(data)
{
  debugger;
  alert (data.ShortDepartureDate);
} 

</script>
```

regards

shaz

Hi Shaz, thank you for your response. Unfortunately I could not try you solution because of deadlines I had to meet. I had to move away from inline grids. Hopefully your answer helps someone else in future. — Andre Lombaard, Feb 28 '14 at 06:32

Posted value from Kendo grid is null

2 Answers2

shaz