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

Question

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%5B25e11650-70cd-4d04-9fe0-4ce0e621cbfd%5D.CheckCardNo=123456789&
CheckDate=12%2F27%2F2021&

where check date should be oBatchDetails%5B25e11650-70cd-4d04-9fe0-4ce0e621cbfd%5D.CheckDate=12%2F27%2F2021&

but Begin collection item not handle this kendo datepicker.

Hitesh Kansagara · Accepted Answer · 2021-12-30T15:23:30.000

I found the solution for kendo control. to resolve this issue need to call 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 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>

This was the only solution I found related to use of `BeginCollectionItem` ! Thanks !! I had some widgets (`DatePicker`s) that, when inserted dynamically via Ajax, were given wrong values for the `id` and `name` attributes; they were missing the prefixes required for model binding, and also they failed to properly initialize in browser (they rendered like plain inputs). It seems this method allows for correct generation of `id` and `name` values. Do you know what does the `Render()` method do? I couldn't find an explanation for it on the Telerik website. — Nevermore, Jul 18 '22 at 11:38

score -1 · Answer 2 · answered Dec 28 '21 at 03:18

-1

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"));
        });

answered Dec 28 '21 at 03:18

Yiyi You

16,875
1
10
22

this is not proper way. I need to know why it is not working with BeginCollectionItem ? – Hitesh Kansagara Dec 28 '21 at 08:05
may be there is some setting to work with so searching for it. – Hitesh Kansagara Dec 28 '21 at 08:12

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

2 Answers2