Data binding

[Peter]

Since you would have a start and end date, how do you set up the control for DateRangePickerFor to bind to 2 fields. 

I really like the 2 calendar view with the DateRange Picker but struggling on how to wire up the binding for the post back to the controller.

Thanks

Peter

[Peter]

I figured out the syntax with both DateRangePickerFor and DateRangePicker using the StartField and EndField.

[Marin Bratanov]

Hello Peter,

You are correct that these two fields need to be set.

For anyone else having similar questions, the following KB article shows how to bind the range picker to a model, and how to POST its data back to the controller: https://docs.telerik.com/aspnet-core/knowledge-base/daterangepicker-bind-to-model-and-post.

Regards,
Marin Bratanov
Progress Telerik

[DoomerDGR8]

Could you show how you managed to bind using the DateRangePickerFor, please?

[Peter]

Does this help?

 

            @(Html
                .Kendo()
                    .DateRangePickerFor(item => item.StartDate,
                        item => item.EndDate
                    )
                    .Events(ev => ev.Open("jsCalendarOpened"))
                    .HtmlAttributes(new { style = "width: 100%" })
                    .Name("DateRangePicker")
                    .Format("MM/dd/yyyy")
            )

[Nikolay]

Hello Hassan,

The syntax for binding the DateRangePickerFor to specific fields in the Model provided from Peter is correct:

@(Html.Kendo().DateRangePickerFor(
           picker=>picker.StartDate,
           picker=>picker.EndDate)
	.HtmlAttributes(new { style = "width: 100%; font-size:11px;", title = "daterangepicker"  })
)

This will be updated shortly in the article Marin has pointed to so others could benefit from it.

Let me know if anything further arises.

Regards,
Nikolay
Progress Telerik

[Daniel]

In case you're using tag helper syntax (i use it in .NET Core) it would be like that:

<kendo-daterangepicker name="daterange"
                       start-field="@Html.NameFor(x => x.DateStart)"
                       end-field="@Html.NameFor(x => x.DateEnd)">
</kendo-daterangepicker>

Just for anyone who ends at the same topic here like me for the alternative syntax.

[Anton Mironov]

Hi Daniel,

Thank you for sharing the taghelper approach with the community!

If any further information or assistance is needed, do not hesitate to contact the team as well.

Kind Regards,
Anton Mironov