asp.net-corekendo-uitelerikbegincollectionitem

asp.net core Begin Collection Item core not working with kendo controls


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.


Solution

  • 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>