Model binding to custom popup editor that uses razor

[Sean]

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.

[Vladimir Iliev]

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

[alex]

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.

[Petur Subev]

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

[alex]

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

[Petur Subev]

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

[alex]

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

[Petur Subev]

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

[alex]

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

[Petur Subev]

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