I have used BeginCollectionItem
in ASP.NET core. Inside this collection I have used a Kendo ComboBox and DatePicker. Both of these are not databinding with the model list when I post the data. Does anyone have idea about this?
Below is the code sample for the cshtml file:
@using HtmlHelpers.BeginCollectionItemCore
@using DemoProject.Model
@model BatchDetail
<tr data-rownum="@Model.Seq">
@using (Html.BeginCollectionItem("oBatchDetails"))
{
<td>
@Html.EditorFor(model => model.CheckCardNo, new { htmlAttributes = new { @class = "form-control input-sm patientCheckCard clsAlphaNumericText", maxlength = "50", autocomplete = "off" } })
</td>
<td>
@(Html.Kendo().DatePickerFor(model => model.CheckDate)
.Format("MM/dd/yyyy")
.HtmlAttributes(new { style = "width:115px", @class = "smalldtpicker paidDate", autocomplete = "off", @type = "" })
)
</td>
}
</tr>
When I run $("#formid").serialize()
in the console, I get this result:
oBatchDetails%5B25e11650-70cd-4d04-9fe0-4ce0e621cbfd%5D.CheckCardNo=123456789&
CheckDate=12%2F27%2F2021&
Where CheckDate
should be oBatchDetails%5B25e11650-70cd-4d04-9fe0-4ce0e621cbfd%5D.CheckDate=12%2F27%2F2021&
.
But BeginCollectionItem
is not correctly handling this Kendo DatePicker.
I found the solution for Kendo controls. To resolve this issue, you need to call the Render()
function to work with kendo controls.
Got the reference from https://www.telerik.com/forums/datepicker-error-with-core-5-0.
Below is the corrected code, and it is working fine with BeginCollectionItemCore
.
@using HtmlHelpers.BeginCollectionItemCore
@using DemoProject.Model
@model BatchDetail
<tr data-rownum="@Model.Seq">
@using (Html.BeginCollectionItem("oBatchDetails"))
{
<td>
@Html.EditorFor(model => model.CheckCardNo, new { htmlAttributes = new { @class = "form-control input-sm patientCheckCard clsAlphaNumericText", maxlength = "50", autocomplete = "off" } })
</td>
<td>
@{Html.Kendo().DatePickerFor(model => model.CheckDate)
.Format("MM/dd/yyyy")
.HtmlAttributes(new { style = "width:115px", @class = "smalldtpicker paidDate", autocomplete = "off", @type = "" })
.Render();
}
</td>
}
</tr>