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

Model binding to custom popup editor that uses razor

9 Answers 540 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Sean
Top achievements
Rank 1
Sean asked on 26 Sep 2013, 02:06 PM
Grid init:
<div class="AbsenceGrid">
    @(Html.Kendo().Scheduler<AbsenceViewModel>()
          .Name("employeeScheduler")
          .Date(DateTime.Now)
          .Height(600)
          .Views(views => views.MonthView())
          .Editable(e => e.TemplateName("AbsenceEditor"))
          .Resources(res =>
              {
                  res.Add(r => r.AuthorisedById)
                     .Title("Authorised By")
                     .DataTextField("Name")
                     .DataValueField("EmployeeId")
                     .DataSource(d =>d.Read(r => r.Action("AuthorisedByRead", "Schedule")));
              })
               
          .DataSource(d => d
               .Model(m => m.Id(f => f.EmployeeAbsenceId))
               .Read(r => r.Action("EmployeesAbsencesRead", "Schedule"))
               .Create(c => c.Action("EmployeesAbsencesCreate", "Schedule"))
               .Destroy("Destroy", "Schedule")
               .Update("Update", "Schedule")
          )
          )
</div>

Custom Template: (Views/Shared/EditorTemplates/AbsenceEditor.cshtml)
@model Employees.Web.Models.AbsenceViewModel
 
@Html.HiddenFor(x => x.EmployeeAbsenceId)
 
<div class="editor-label">
    @Html.LabelFor(x => x.Title)
</div>
<div class="editor-field">
    @Html.EditorFor(x => x.Title)
</div>
<br />
<div class="editor-label">
    @Html.LabelFor(x => x.Start)
</div>
<div class="editor-field">
    @Html.EditorFor(x => x.Start)
</div>
<br/>
<div class="editor-label">
    @Html.LabelFor(x => x.End)
</div>
<div class="editor-field">
    @Html.EditorFor(x => x.End)
</div>
<br />
<div class="editor-label">
    @Html.LabelFor(x => x.IsAllDay)
</div>
<div class="editor-field">
    @Html.EditorFor(x => x.IsAllDay)
</div>
<br />
<div class="editor-label">
    @Html.LabelFor(x => x.Description)
</div>
<div class="editor-field">
    @Html.EditorFor(x => x.Description)
</div>
<br />

Firstly, is it possible to do it using razor as above, or do I have to use the MVVM binding method? Currently the view shows, but none of the values from the model are persisted into the form and the form won't submit, but I guess I'll get to that in time.

Secondly, if that's possible, how would I include the recurrence rule editor? 

Thanks.

9 Answers, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 30 Sep 2013, 07:06 AM
Hi Sean,

 
You can use the described approach, however as the editors are bind using MVVM you should include the "data-bind" attribute as additional HTML data to the editor:

@model Kendo.Mvc.Examples.Models.Scheduler.MeetingViewModel
 
<div class="editor-label">
    @Html.LabelFor(x => x.Title)
</div>
<div class="editor-field">
    <!-- add data_bind attribute to the editor template (use lowercase for members of ISchedulerEvent) -->
    @Html.TextBoxFor(x => x.Title, new { data_bind = "value: title", @class = "k-textbox"})
</div>

Regards,
Vladimir Iliev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
alex
Top achievements
Rank 1
answered on 30 Dec 2013, 01:34 PM
This is great and seriously made life easier for me.

I am however struggling with 1 thing.

@Html.Kendo().DateTimePickerFor(x => x.Start).Name("startDatepicker").BindTo(Model.Start).Value(Model.Start)

I have tried everything to bind the datepicker and it complains that it expects an IList<System.DateTime>, this does not make sense to me as I want a single date not a list.
0
Petur Subev
Telerik team
answered on 01 Jan 2014, 08:38 AM
Hello Sean,

Why do you pass data to the BindTo method? If you want to set value of the DatePicker then you should only use the Value method. BindTo is used to specify dates option of the datepicker.

Here is a demo which you can see how it is combined with the month template.

http://demos.kendoui.com/web/datepicker/template.html


Kind Regards,
Petur Subev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
alex
Top achievements
Rank 1
answered on 02 Jan 2014, 10:27 AM
Hi Petur

First of all this is not Sean it is Damion (even though my account name is Alex as he is the CEO that set the account up).

Secondly please follow the trail as my question was a follow up to the response by Vladamir, that was extremely useful but not complete.

His explanation to use

@Html.TextBoxFor(x => x.Title, new { data_bind = "value: title", @class = "k-textbox"})

For the title was exactly needed to know. However when I try to apply this to the start and end columns I get errors. What I posted was my attempt to bind the datepicker to the object passed when double clicking an element in the scheduler and the model I am using to display the data.

Damion
0
Petur Subev
Telerik team
answered on 02 Jan 2014, 11:58 AM
Hello Damion,

My apologies for the name.

If I understand correctly you are trying to bind the DateTimePickerFor widget to the "Start" field. 

If so could you try to omit specifying name for the widget

@Html.Kendo().DateTimePickerFor(x => x.Start).Name("startDatepicker")

Or use name which is the same as the property name

e.g.

@Html.Kendo().DateTimePickerFor(x => x.Start).Name("Start")

Let me know your findings.

Regards,
Petur Subev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
alex
Top achievements
Rank 1
answered on 02 Jan 2014, 02:02 PM
Thanks for that.

Is there a guide somewhere that shows how to create a razor template as I keep coming up with more questions as I fix the previous.

Next questions

  • I  found the following HTML solution that did the job
                                      <input name="end" type="text" required data-type="date" data-role="datetimepicker" data-bind="value: end, invisible: isAllDay" />
                                      <input name="end" type="text" required data-type="date" data-role="datepicker" data-bind="value: end, visible: isAllDay" />
                   is there any way to add the IsAllDay logic to the razor function

  • I have added a .Read to the Datasource but this is not being fired. I want the ability to fire an event before the opening of the template to populate some objects to display in dropdowns.
Damion
0
Petur Subev
Telerik team
answered on 02 Jan 2014, 03:34 PM
Hello Sean,

Basically everything written inside that template is finally bound to the model of the Scheduler. I would suggest you to read about data-attribute initialization and MVVM because it is all used internally by the Scheduler widget.

http://docs.kendoui.com/getting-started/framework/mvvm/overview
http://docs.kendoui.com/getting-started/data-attribute-initialization

I would like to ask you to open separate thread for the distinct questions.

Kind Regards,
Petur Subev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
alex
Top achievements
Rank 1
answered on 02 Jan 2014, 04:58 PM
Hi Petur

Again it is Damion

I have continued this thread because it is related and not distinct. The Title is Model Binding to a custom popup editor that uses razor which is exactly what I am trying to do and the answers above is only half an answer the question.

I will raise another issue but I don't agree with your request to do so as raising another issue will lose the background information that this issue provide. Added to that your response above are for a HTML solution and as this issue is entitled I am after a razor solution.

Damion
0
Petur Subev
Telerik team
answered on 03 Jan 2014, 05:36 PM
Hello Damion,

Sorry for the name conflict, the system adds it automatically when I am creating a reply.

Long threads create confusion for both the support officers and the readers, they become difficult to handle (and thus increasing the response time) or to keep track of (making it useless for the rest of the community). Even though different questions may be based on the same widget setup, they may be related to different widget features. In this case it is related to open new thread/ticket.

Regarding the visible binding question - you cannot write the visible binding in Razor. Also Kendo does not provide any helper which generates text box.

Kind Regards,
Petur Subev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Scheduler
Asked by
Sean
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
alex
Top achievements
Rank 1
Petur Subev
Telerik team
Share this question
or