This is a migrated thread and some comments may be shown as answers.

Data binding

6 Answers 291 Views
DateRangePicker
This is a migrated thread and some comments may be shown as answers.
Peter
Top achievements
Rank 1
Peter asked on 01 Aug 2019, 07:27 PM

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

6 Answers, 1 is accepted

Sort by
0
Peter
Top achievements
Rank 1
answered on 02 Aug 2019, 11:52 AM
I figured out the syntax with both DateRangePickerFor and DateRangePicker using the StartField and EndField.
0
Marin Bratanov
Telerik team
answered on 05 Aug 2019, 11:18 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
DoomerDGR8
Top achievements
Rank 2
Iron
Iron
Iron
answered on 03 Mar 2020, 10:43 AM
Could you show how you managed to bind using the DateRangePickerFor, please?
1
Peter
Top achievements
Rank 1
answered on 03 Mar 2020, 11:38 AM

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

1
Nikolay
Telerik team
answered on 05 Mar 2020, 09:06 AM

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

Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
0
Daniel
Top achievements
Rank 3
Iron
Iron
Iron
answered on 16 Mar 2022, 08:59 AM

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
Telerik team
commented on 18 Mar 2022, 07:57 AM

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

Tags
DateRangePicker
Asked by
Peter
Top achievements
Rank 1
Answers by
Peter
Top achievements
Rank 1
Marin Bratanov
Telerik team
DoomerDGR8
Top achievements
Rank 2
Iron
Iron
Iron
Nikolay
Telerik team
Daniel
Top achievements
Rank 3
Iron
Iron
Iron
Share this question
or