CustomEditorTemplate for Scheduler not getting custom fields

[Guillem Albert]

Hello,

 

I'm using custom editor to create/view appointments on scheduler.

My appointments has two custom fields (one from dropdownlist and other from Textbox).

Although, I am able to show the fields on custom editor without any problem, the values are not retrieved from Model. Either when the apponitment is created from custom editor.

I am newbie on this and i don't find any clue on Internet.

Could someone help me?

 

My main view:

@(Html.Kendo().Scheduler<pruebaCalendario.Models.EventoCalendario>
    ()
    .Name("calendario")
    .Date((DateTime)ViewBag.FechaRef)
    .Views(views =>
    {
        views.MonthView(monthview => monthview.Selected(true));
        views.YearView();
    })
    .Selectable(true)
    .Editable(e => e
        .TemplateName("_customEditorTemplate")
        .Window(w => w.Title("Vacaciones")
        //.Width(800)
        )

    )
    .Messages(m => m
        .Save("Guardar")
        .AllDay("Todo el día")
        .Cancel("Cancelar")
        .ResetSeries("Borrar")
        .Destroy("Borrar")
        //.Date("Fecha")
        .Next("Siguiente")
        .Previous("Previo")
        //.Search("Buscar")
        .Today("Hoy")
        )
    //.EventTemplateId("event-template")
    //.Timezone("Etc/UTC")
    .BindTo(Model)
    .Resources(resource =>
    {
        resource.Add(m => m.Tipo)
            .Title("Tipo")
            .Name("comboTipo")
            .DataTextField("Text")
            .DataValueField("Value")
            .BindTo((System.Collections.IEnumerable)ViewBag.Tipo);

    })
    .DataSource(d => d
            .Model(m =>
            {
                m.Id(f => f.Id);
                m.Field("Title", typeof(string)).DefaultValue("No title");
                m.Field("Start", typeof(DateTime)).DefaultValue(DateTime.Now);
                m.Field("End", typeof(DateTime)).DefaultValue(DateTime.Now);
                m.Field("Description", typeof(string));
                //    m.Field("recurrenceID", typeof(int));
                //    m.Field("recurrenceRule", typeof(string));
                //    m.Field("recurrenceException", typeof(string));
                //    m.Field("isAllDay", typeof(bool));
                //    m.Field("startTimezone", typeof(string));
                //    m.Field("endTimezone", typeof(string));
                m.Field("Tipo", typeof(string));
                m.Field("Observaciones", typeof(string));
            })
            .Read("Details", "Vacaciones")
            .Create("Create","Vacaciones")

    )
    .Events(ev => ev.Navigate("onNavigate").DataBound("onFinish"))


    )

My custom editor view:

@model pruebaCalendario.Models.EventoCalendario

@using pruebaCalendario.Models

@{
    //required in order to render validation attributes
    ViewContext.FormContext = new FormContext();
}

@functions{
    public Dictionary<string, object> generateDatePickerAttributes(
           string elementId,
           string fieldName,
           string dataBindAttribute,
           Dictionary<string, object> additionalAttributes = null)
    {

        Dictionary<string, object> datePickerAttributes = additionalAttributes != null ? new Dictionary<string, object>(additionalAttributes) : new Dictionary<string, object>();

        datePickerAttributes["id"] = elementId;
        datePickerAttributes["name"] = fieldName;
        datePickerAttributes["data-bind"] = dataBindAttribute;
        //datePickerAttributes["required"] = "required";
        datePickerAttributes["style"] = "z-index: inherit;";

        return datePickerAttributes;
    }
}

<div class="k-edit-label">
    Inicio:
</div>
<div data-container-for="start" class="k-edit-field">

    @(Html.Kendo().DatePickerFor(model => model.Start)
        .HtmlAttributes(generateDatePickerAttributes("startDateTime", "start", "value:start")))
    @*<span data-bind="text: startTimezone"></span>*@
    <span data-for="start" class="k-invalid-msg"></span>
</div>

<div class="k-edit-label">
    Final:
</div>
<div data-container-for="end" class="k-edit-field">

    @(Html.Kendo().DatePickerFor(model => model.End)
        .HtmlAttributes(generateDatePickerAttributes(
            "endDateTime",
            "end",
            "value:end",
            new Dictionary<string, object>() {{"data-dateCompare-msg", "End date should be greater than or equal to the start date"}})))
    @*<span data-bind="text: endTimezone"></span>*@
    <span data-for="end" class="k-invalid-msg"></span>
</div>

<div class="k-edit-label">
    Tipo:
</div>

@{ var x = Model.Tipo; }

<div data-container-for="tipo" class="k-edit-field">
    @(Html.Kendo().ComboBoxFor(model => model.Tipo)
        .Name("comboTipo")
        .DataTextField("Text")
        .DataValueField("Value")
        .BindTo((System.Collections.IEnumerable)ViewBag.Tipo)
    )
</div>

<div class="k-edit-label">
    Observaciones:
</div>

<div data-container-for="observaciones" class="k-edit-field">

    @(Html.Kendo().TextAreaFor(model => model.Observaciones)
        .Rows(3)
    )
</div>

@{
    ViewContext.FormContext = null;
}

 

My EventoCalendario class (It is used to manage the appointments)

using Kendo.Mvc.UI;

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace pruebaCalendario.Models
{
    public class EventoCalendario : ISchedulerEvent
    {       

        public string Title { get; set; }
        public DateTime Start { get; set; }
        public DateTime End { get; set; }
        public string Description { get; set; }
        public bool IsAllDay { get; set; }
        public string StartTimezone { get; set; }
        public string EndTimezone { get; set; }
        public string RecurrenceRule { get; set; }
        public string RecurrenceException { get; set; }
        public int Id { get; set; }
        public string Tipo { get; set; }
        public string Observaciones { get; set;  }

        public EventoCalendario()
        {
        }

        public EventoCalendario(PeriodoVacaciones per)
        {
            this.Id = per.id;
            this.Title = per.usuario;
            this.Description = per.Tipo;
            this.IsAllDay = per.Tipo == "ENT" ? true : false;
            this.Start = per.fechaIni == null ? DateTime.Now : DateTime.Parse(per.fechaIni.ToString());
            this.End = per.fechaFin == null ? DateTime.Now : DateTime.Parse(per.fechaFin.ToString());
            this.Tipo = per.idTipo;
            this.Observaciones = per.observaciones;
        }


    }

   
}

I'm sure that it have an easy answer but I'm unable to find it :_(

 

Thx in advance

 

KR

 

[Anton Mironov]

Hi Guillem,

Thank you for the code snippets and details provided.

After a deep dive into your implementation, I can see that the Binding could be changed.

Have a look at the index.html tab in the following demo and try to use the DataSource Methods represented:

• https://demos.telerik.com/aspnet-mvc/scheduler

The demo above represents the needed editor and after implementing the CRUD Methods, I hope the result will be the expected one.

Give a try at the approach above and let me know if further assistance is needed.

Kind Regards,
Anton Mironov
Progress Telerik

[Guillem Albert]

Hello Anton.

 

Thx for the response but the problem is not on binding process. The scheduler is populated without issues.

I have found a solution by looking at different examples but I don't understand it very well.  ‎I don't know why it is working and it is awkward for me. I don't found doc about it.

I see that if I generate HTML attributes on each control of my custom editor with value parameter, it works well

customEditorTemplate.cshtml

@functions{
    public Dictionary<string, object> generateAttributes(
           string elementId,
           string fieldName,
           string dataBindAttribute,
           Dictionary<string, object> additionalAttributes = null)
    {

        Dictionary<string, object> attributes = additionalAttributes != null ? new Dictionary<string, object>(additionalAttributes) : new Dictionary<string, object>();

        attributes["id"] = elementId;
        attributes["name"] = fieldName;
        attributes["data-bind"] = dataBindAttribute;
        //attributes["required"] = "required";
        attributes["style"] = "z-index: inherit;";

        return attributes;
    }
}

 @(Html.Kendo().DatePickerFor(model => model.Start)
        .HtmlAttributes(generateAttributes("startDateTime", "start", "value:start"))
        .Events(ev => ev.Change("change"))
        )

 

Now, I just need to find a way to set the default values if a new appointment is going to be created. I just want to select combobox entry by its value

schedulerView.cshtml

    .DataSource(d => d
            .Model(m =>
            {
                m.Id(f => f.Id);
                m.Field("Usuario", typeof(int)).DefaultValue((int)ViewBag.usuarioId);
                m.Field("Start", typeof(DateTime)).DefaultValue(DateTime.Now);
                m.Field("End", typeof(DateTime)).DefaultValue(DateTime.Now);
                m.Field("Description", typeof(string));
                m.Field("Tipo", typeof(string));
                m.Field("Observaciones", typeof(string));
            })

customEditorTemplate:

<div data-container-for="usuario" class="k-edit-field">
    @(Html.Kendo().ComboBox()
          .Name("cmb-usuarios")
          .Placeholder("Selecciona usuario...")
          .BindTo((System.Collections.IEnumerable)ViewBag.usuariosDepartamento)
          //.SelectedIndex(0)
          .Suggest(true)
          .DataValueField("IdUsuarioSertrans")
          .DataTextField("NomUsuario")
          .HtmlAttributes(new { style="width:100%;" }).HtmlAttributes(generateAttributes("usuarioId", "Usuario", "value:idUsuario"))
    )
</div>

If you can answer this question, you will makes my day a lot.

 

KR

[Anton Mironov]

Hi Guillem,

Thank you for the additional details provided.

Here is an example of implementing a custom editor for the Kendo UI Scheduler:

https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/scheduler/scheduler-custom-editor/SchedulerCustomEditor

The date and time properties will be set by the cell selected in the Scheduler and this behavior is expected.

If further assistance is needed, send me a runnable sample of your project and I will try my best to achieve the desired behavior.

Furthermore, if any additional information is needed - summarize your questions and I will try to answer them.

Looking forward to hearing back from you.

Best Regards,
Anton Mironov