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

I have used BeginCollectionItem in asp.net core. Inside this collection I have used kendo combobox and datepicker both data not bind with model list when post the data. anyone have idea about it.

Below is the code sample for 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 see the $("#formid").serialize() in console. I found the below result.

oBatchDetails[25e11650-70cd-4d04-9fe0-4ce0e621cbfd].CheckCardNo=123456789&
CheckDate=12/27/2021&

where check date should be oBatchDetails[25e11650-70cd-4d04-9fe0-4ce0e621cbfd].CheckDate=12/27/2021&

but Begin collection item not handle this kendo datepicker.

CodePudding user response：

I found the solution for kendo control. to resolve this issue need to call render function to work with kendo controls. below is the corrected code and it is workin fine with begin collection item core.

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

CodePudding user response：

You can try to change the name of CheckDate to the correct format in $(function(){}):

$(function () {

            $("input[name='CheckDate']").attr("name", $("input[id$='CheckCardNo']").attr("name").replace("CheckCardNo", "CheckDate"));
        });