Model binding to custom popup editor that uses razor

10 posts, 0 answers
  1. Sean
    Sean avatar
    1 posts
    Member since:
    Jul 2013

    Posted 26 Sep 2013 Link to this post

    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.
  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 30 Sep 2013 Link to this post

    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!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. alex
    alex avatar
    5 posts
    Member since:
    Aug 2013

    Posted 30 Dec 2013 Link to this post

    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.
  5. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 01 Jan 2014 Link to this post

    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!
  6. alex
    alex avatar
    5 posts
    Member since:
    Aug 2013

    Posted 02 Jan 2014 Link to this post

    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
  7. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 02 Jan 2014 Link to this post

    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!
  8. alex
    alex avatar
    5 posts
    Member since:
    Aug 2013

    Posted 02 Jan 2014 Link to this post

    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
  9. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 02 Jan 2014 Link to this post

    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!
  10. alex
    alex avatar
    5 posts
    Member since:
    Aug 2013

    Posted 02 Jan 2014 Link to this post

    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
  11. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 03 Jan 2014 Link to this post

    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!
Back to Top
UI for ASP.NET MVC is VS 2017 Ready