EditorTemplate for Schelduler

9 posts, 0 answers
  1. Shimon
    Shimon avatar
    18 posts
    Member since:
    Jul 2013

    Posted 18 Mar 2014 Link to this post

    Hello,

    I have some trouble to get the data bind of a list in a EditorTemplate for the schelduler.

    Here is how i create the schelduler :
    @(Html.Kendo().Scheduler<iMail.Web.Models.TaskViewModel>()
        .Name("scheduler")
        .Date(DateTime.Now)
        .StartTime(new DateTime(2013, 6, 13, 7, 00, 00))
        .Height(600)
        .Views(views =>
        {
            views.DayView();
            views.WeekView();
            views.MonthView();
            views.AgendaView(agenda => agenda.Selected(true));
        })
        .Selectable(true)
        .Timezone("Etc/UTC")
        .Events(e => e.Edit("onEdit"))
        .Editable(editable => {
            editable.TemplateName("_EditorTemplatePartial");
            editable.Resize(true);
        })
        .DataSource(d => d
                .Model(m => {   
                    m.Id(f => f.TaskID);
                    m.Field(f => f.Title).DefaultValue("No title");
                    m.RecurrenceId(f => f.RecurrenceID);
                    m.Field(e => e.Attendees).DefaultValue(new List<iMail.Web.Models.CalendarAttendeeModel>());
                })
            .Events(e => e.Error("error_handler"))
            .Read("TasksRead", "Dashboard")
            .Create("TasksCreate", "Dashboard")
            .Destroy("TasksDestroy", "Dashboard")
            .Update("TasksUpdate", "Dashboard")
        )
    )

    Code of _EditorTemplatePartial.cs

    <div data-container-for="Attendees" class="k-edit-field">
        @(Html.Kendo().MultiSelectFor(model => model.Attendees)
            .Name("myMultiSelectiHATEYOU")
            .HtmlAttributes(new { data_bind = "value:Attendees" })
             
            .DataTextField("AttendeeName")
            .DataValueField("ID")
            
            .BindTo(ViewBag.Contacts)
            .Value(Model.Attendees)
    </div>

    Here is the data load in the MultiSelect

    ICollection<CalendarAttendeeModel> contacts = new List<CalendarAttendeeModel>();
     
                    CalendarAttendeeModel att7 = new CalendarAttendeeModel();
                    att7.AttendeeName = "Georgette";
                    att7.ID = 4;
                    att7.Email = "myemail@attendee7.com";
    ........
                    contacts.Add(att7);
                    contacts.Add(att8);
                    contacts.Add(att9);
                    contacts.Add(att10);
                    ViewBag.Contacts = contacts;

    The data in the multislect seems to be correctly loaded but when i want to save the data inside of  TasksCreate() i have some trouble with my list.
    Sample : If i select 4 item, my list count 4 row but haven't any data inside.
    Moreover i can't try to use a datasource because of this template ".Editable(editable => {        editable.TemplateName("_EditorTemplatePartial");"

    public ActionResult TasksCreate([Kendo.Mvc.UI.DataSourceRequest]Kendo.Mvc.UI.DataSourceRequest request, TaskViewModel task)
     {
     
    }

    My CalendarAttendeeModel is a List inside of the model TaskViewModel

    public class TaskViewModel : Kendo.Mvc.UI.ISchedulerEvent
        {
    ....
            public string Title { get; set; }
            public string Description { get; set; }
            public string StartTimezone { get; set; }
            public string EndTimezone { get; set; }
    ....
            public List<CalendarAttendeeModel> Attendees { get; set; }
    }


    I can't get the selected data in the list inside of the editor template.
    In the TasksCreate i can get the data of Description,... (it's the user who write the data) but for the List, i have a big problem.


    I use Kendo UI 2013.3.1511 and Razor engine.

    I'm stuck with that :/
    Any idea to suceed ?
  2. Shimon
    Shimon avatar
    18 posts
    Member since:
    Jul 2013

    Posted 18 Mar 2014 in reply to Shimon Link to this post

    I try with adding another string (public string Url { get; set; }) in the TaskViewModel that i call like that in the editorTemplate

    <div data-container-for="url" class="k-edit-field">
        @(Html.TextBoxFor(model => model.Url, new { @class = "k-textbox", data_bind = "value:url" }))
    </div>

    I don't get the data i'm writing in the TextBox
    For the description it's working.perfectly. I get the Data in the function "TasksCreate" of the controller.

    <div data-container-for="description" class="k-edit-field">
        @(Html.TextAreaFor(model => model.Description, new { @class = "k-textbox", data_bind = "value:description" }))
    </div>


    It's like i can get all the data of Kendo.Mvc.UI.ISchedulerEvent : Description, End, EndTimezone, IsAllDay,... but not the data i add myself ...
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Shimon
    Shimon avatar
    18 posts
    Member since:
    Jul 2013

    Posted 19 Mar 2014 in reply to Shimon Link to this post

    I can bind now other string like Url :)

    <div data-container-for="url" class="k-edit-field">
        @(Html.TextBoxFor(model => model.Url, new { @class = "k-textbox", data_bind = "value:Url" }))
    </div>

    But for the List i don't have any idea on how to deal with that

    <div data-container-for="Attendees" class="k-edit-field">
        @(Html.Kendo().MultiSelectFor(model => model.Attendees)
            .Name("myMultiSelectiHATEYOU")
            .HtmlAttributes(new { data_bind = "value:Attendees" })
              
            .DataTextField("AttendeeName")
            .DataValueField("ID")
             
            .BindTo(ViewBag.Contacts)
            .Value(Model.Attendees)
    </div>
  5. Shimon
    Shimon avatar
    18 posts
    Member since:
    Jul 2013

    Posted 20 Mar 2014 Link to this post


    In fact, i try to adapt the code in this post http://www.telerik.com/forums/schedler-custom-editor-extra-field
    The version used in this example is Kendo.Mvc 2013.3.1119.340 and the one i use is 2013.3.1511.440.

    I'll try to explain it clear with sample of code.
    -----------------------------------------------------------------------------------------------------------------------------------------
    CONTROLLER
    -----------------------------------------------------------------------------------------------------------------------------------------
    Sample 2013.3.1119.340 :

    public virtual JsonResult Meetings_Create([DataSourceRequest] DataSourceRequest request, MeetingViewModel meeting)
    {
        if (ModelState.IsValid)
        {
            meetingService.Insert(meeting, ModelState);
        }
     
        return Json(new[] { meeting }.ToDataSourceResult(request, ModelState));
    }

    My code 2013.3.1511.440 :
    public virtual JsonResult TasksCreate([Kendo.Mvc.UI.DataSourceRequest]Kendo.Mvc.UI.DataSourceRequest request, TaskViewModel task)
    {
        if (ModelState.IsValid)
        {
        }
        return null;
    }

    In this part the task recieved into the controller haven't the correct date of day : {01/01/0001 00:00:00}.
    In the sample all is right.

    -----------------------------------------------------------------------------
    MODEL
    -----------------------------------------------------------------------------
    Sample 2013.3.1119.340 :

    public class MeetingViewModel : ISchedulerEvent
    {
        public int MeetingID { get; set; }
     
        [Required]       
        public string Title { get; set; }
     
        public string Description { get; set; }
     
        private DateTime start;
        [Required]
        public DateTime Start
        {
            get
            {
                return start;
            }
            set
            {
                start = value.ToUniversalTime();
            }
        }
     
        public string StartTimezone { get; set; }
     
        private DateTime end;
        [Required]
        [DateGreaterThan(OtherField = "Start")]
        public DateTime End
        {
            get
            {
                return end;
            }
            set
            {
                end = value.ToUniversalTime();
            }
        }
     
        public string EndTimezone { get; set; }
     
        public string RecurrenceRule { get; set; }
        public int? RecurrenceID { get; set; }
        public string RecurrenceException { get; set; }
        public bool IsAllDay { get; set; }
        public string Timezone { get; set; }
        public int? RoomID { get; set; }
        public IEnumerable<int> Attendees { get; set; }

    My code 2013.3.1511.440 :

    public class TaskViewModel : Kendo.Mvc.UI.ISchedulerEvent
    {
        //public int ID { get; set; }
        public int TaskID { get; set; }
        public int? OwnerID { get; set; }
     
        [Required] 
        public string Title { get; set; }
        public string Description { get; set; }
     
        private DateTime start;
        [Required]
        public DateTime Start
        {
            get
            {
                return start;
            }
            set
            {
                start = value.ToUniversalTime();
            }
        }
     
        public string StartTimezone { get; set; }
     
        private DateTime end;
        [Required]
        [DateGreaterThan(OtherField = "Start")]
        public DateTime End
        {
            get
            {
                return end;
            }
            set
            {
                end = value.ToUniversalTime();
            }
        }
     
        public string EndTimezone { get; set; }
     
        public string RecurrenceRule { get; set; }
        public int? RecurrenceID { get; set; }
        public string RecurrenceException { get; set; }
        public bool IsAllDay { get; set; }
        public int? RoomID { get; set; }
        public int Priority { get; set; }
        public string Url { get; set; }
        public int idOrganizator { get; set; }
     
        public IEnumerable<int> DepartmentsID { get; set; }
    }

    -------------------------------------------------------------------------------
    INDEX.cshtml
    -------------------------------------------------------------------------------
    Sample 2013.3.1119.340 :
    @(Html.Kendo().Scheduler<SchedulerCustomEditor.Models.MeetingViewModel>()
        .Name("scheduler")
        .Date(new DateTime(2013, 6, 13))
        .StartTime(new DateTime(2013, 6, 13, 7, 00, 00))
        .Height(600)
        .Views(views => {
            views.DayView();
            views.WeekView(weekView => weekView.Selected(true));
            views.MonthView();
            views.AgendaView();
        })
        .Editable(editable => {
            editable.TemplateName("CustomEditorTemplate");
        })
        .Timezone("Etc/UTC")
        .DataSource(d => d
            .Model(m => {
                m.Id(f => f.MeetingID);
                m.Field(f => f.Title).DefaultValue("No title");
                m.RecurrenceId(f => f.RecurrenceID);
            })
            .Events(e => e.Error("error_handler"))
            .Read("Meetings_Read", "Home")
            .Create("Meetings_Create", "Home")
            .Destroy("Meetings_Destroy", "Home")
            .Update("Meetings_Update", "Home")
        )
    )
     
     
    <script type="text/javascript">
        function error_handler(e) {
            if (e.errors) {
                var message = "Errors:\n";
                $.each(e.errors, function (key, value) {
                    if ('errors' in value) {
                        $.each(value.errors, function () {
                            message += this + "\n";
                        });
                    }
                });
                alert(message);
     
                var scheduler = $("#scheduler").data("kendoScheduler");
                scheduler.one("dataBinding", function (e) {
                    //prevent saving if server error is thrown
                    e.preventDefault();
                })
            }
        }
    </script>


    My code 2013.3.1511.440 :

    @using iMail.Web.App_Code.Helpers
    @using iMail.Web.Resources.Views.Calendar
     
    <div class="span9" id ="CalendarSchelduler">
     
        @(Html.Kendo().Scheduler<iMail.Web.Models.TaskViewModel>()
            .Name("scheduler")
            .Date(DateTime.Now)
            .StartTime(new DateTime(2013, 6, 13, 7, 00, 00))
            .Height(600)
                         
            .Views(views =>
            {
                views.DayView();
                views.WeekView();
                views.MonthView();
                views.AgendaView(agenda => agenda.Selected(true));
            })
            .Selectable(true)
            .Timezone("Etc/UTC")
            .Events(e => e.Edit("onEdit"))
             
            .Editable(editable => {
                editable.TemplateName("_EditorTemplatePartial");
                //editable.Resize(true);
            })
                       
            .DataSource(d => d
                    .Model(m => {
                                      
                        m.Id(f => f.TaskID);
                        m.Field(f => f.Title).DefaultValue("No title");
                        m.RecurrenceId(f => f.RecurrenceID);
                        //m.Field(e => e.Attendees).DefaultValue(new List<iMail.Web.Models.CalendarAttendeeModel>());
                    })
                .Events(e => e.Error("error_handler"))
                .Read("TasksRead", "Calendar")
                .Create("TasksCreate", "Calendar")
                .Destroy("TasksDestroy", "Calendar")
                .Update("TasksUpdate", "Calendar")
            )
        )
    </div>
     
     
    <script type="text/x-kendo-template" id="schedulerTemplate">
        <div id="recurrenceEditor" name="recurrenceRule" data-bind="value: recurrenceRule" />
         
        <script>
            var options = jQuery("\#CalendarSchelduler").data("kendoScheduler").options;
     
            jQuery("\#recurrenceEditor").kendoRecurrenceEditor({
                start: "#=data.start#",
                timezone: options.timezone,
                messages: options.messages
            });
        <\/script>
    </script>
     
    <script type="text/javascript">
        function error_handler(e) {
            if (e.errors) {
                var message = "Errors:\n";
                $.each(e.errors, function (key, value) {
                    if ('errors' in value) {
                        $.each(value.errors, function () {
                            message += this + "\n";
                        });
                    }
                });
                alert(message);
     
                var scheduler = $("#scheduler").data("kendoScheduler");
                scheduler.one("dataBinding", function (e) {
                    //prevent saving if server error is thrown
                    e.preventDefault();
                })
            }
        }
        function onEdit(e) {
            $(e.container).parent().css({
                style: '.k-edit-form-container { width: auto;}'
            });
            alert("edit");
        }
        $(document).ready(function ()
        {
        });
    </script>

    ---------------------------------------------------------------------------------------
    THE TEMPLATE
    ---------------------------------------------------------------------------------------
    Sample 2013.3.1119.340 :

    @model SchedulerCustomEditor.Models.MeetingViewModel
    @{
        //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">
        @(Html.LabelFor(model => model.Title))
    </div>
    <div data-container-for="title" class="k-edit-field">
        @(Html.TextBoxFor(model => model.Title, new { @class = "k-textbox", data_bind = "value:title" }))
    </div>
     
    <div class="k-edit-label">
        @(Html.LabelFor(model => model.Start))
    </div>
    <div data-container-for="start" class="k-edit-field">
     
        @(Html.Kendo().DateTimePickerFor(model => model.Start)
            .HtmlAttributes(generateDatePickerAttributes("startDateTime", "start", "value:start,invisible:isAllDay")))
     
        @(Html.Kendo().DatePickerFor(model => model.Start)
            .HtmlAttributes(generateDatePickerAttributes("startDate", "start", "value:start,visible:isAllDay")))
     
        <span data-bind="text: startTimezone"></span>
        <span data-for="start" class="k-invalid-msg"></span>
    </div>
     
    <div class="k-edit-label">
        @(Html.LabelFor(model => model.End))
    </div>
    <div data-container-for="end" class="k-edit-field">
     
        @(Html.Kendo().DateTimePickerFor(model => model.End)
            .HtmlAttributes(generateDatePickerAttributes(
                "endDateTime",
                "end",
                "value:end,invisible:isAllDay",
                new Dictionary<string, object>() {{"data-dateCompare-msg", "End date should be greater than or equal to the start date"}})))
             
        @(Html.Kendo().DatePickerFor(model => model.End)
            .HtmlAttributes(generateDatePickerAttributes(
                "endDate",
                "end",
                "value:end,visible:isAllDay",
                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">
        @(Html.LabelFor(model => model.IsAllDay))
    </div>
    <div data-container-for="isAllDay" class="k-edit-field">
        @(Html.CheckBoxFor(model => model.IsAllDay, new { data_bind = "checked:isAllDay" }))
    </div>
     
     
    <div class="endTimezoneRow">
        <div class="k-edit-label"></div>
        <div class="k-edit-field">
            <label class="k-check">
                <input checked="checked" class="k-timezone-toggle" type="checkbox" value="true" />
                Use separate start and end time zones
            </label>
        </div>
    </div>
    <script>
        $(".k-timezone-toggle").on("click", function () {
            var isVisible = $(this).is(":checked");
            var container = $(this).closest(".k-popup-edit-form");
     
            var endTimezoneRow = container.find("label[for='EndTimezone']").parent().add(container.find("div[data-container-for='endTimezone']"));
            endTimezoneRow.toggle(isVisible);
     
            if (!isVisible) {
                var uid = container.attr("data-uid");
                var scheduler = $("\#scheduler").data("kendoScheduler");
                var model = scheduler.dataSource.getByUid(uid);
                model.set("endTimezone", null);
            }
        });
     
        var endTimezone = '${data.endTimezone}';
     
        if (!endTimezone || endTimezone == "null") {
            $(".k-timezone-toggle").trigger('click');
        }
    </script>
     
    <div class="k-edit-label">
        @(Html.LabelFor(model => model.StartTimezone))
    </div>
    <div data-container-for="startTimezone" class="k-edit-field">
        @(Html.Kendo().TimezoneEditorFor(model => model.StartTimezone)
            .HtmlAttributes(new { data_bind = "value:startTimezone" }))
    </div>
     
    <div class="k-edit-label">
        @(Html.LabelFor(model => model.EndTimezone))
    </div>
    <div data-container-for="endTimezone" class="k-edit-field">
        @(Html.Kendo().TimezoneEditorFor(model => model.EndTimezone)
            .HtmlAttributes(new { data_bind = "value:endTimezone" }))
    </div>
     
    <div class="k-edit-label">
        @(Html.LabelFor(model => model.RecurrenceRule))
    </div>
    <div data-container-for="recurrenceRule" class="k-edit-field">
        @(Html.Kendo().RecurrenceEditorFor(model => model.RecurrenceRule)
            .HtmlAttributes(new { data_bind = "value:recurrenceRule" }))
    </div>
     
    <div class="k-edit-label">
        @(Html.LabelFor(model => model.Description))
    </div>
    <div data-container-for="description" class="k-edit-field">
        @(Html.TextAreaFor(model => model.Description, new { @class = "k-textbox", data_bind = "value:description" }))
    </div>
     
    <div class="k-edit-label">
        @(Html.LabelFor(model => model.RoomID))
    </div>
    <div data-container-for="RoomID" class="k-edit-field">
        @(Html.Kendo().DropDownListFor(model => model.RoomID)
            .HtmlAttributes(new { data_bind = "value:RoomID", style = "width: 200px" })
            .DataTextField("Text")
            .DataValueField("Value")
            .OptionLabel("None")
            .ValuePrimitive(true)
            .Template("<span class='k-scheduler-mark' style='background-color:\\#= data.Color?Color:'' \\#'></span>\\#=Text\\#")
            .BindTo(new[] {
                    new { Text = "Meeting Room 101", Value = 1, Color = "\\#6eb3fa" },
                    new { Text = "Meeting Room 201", Value = 2, Color = "\\#f58a8a" }
                }).ToClientTemplate()
        )
    </div>
     
    <div class="k-edit-label">
        @(Html.LabelFor(model => model.Attendees))
    </div>
    <div data-container-for="Attendees" class="k-edit-field">
        @(Html.Kendo().MultiSelectFor(model => model.Attendees)
            .HtmlAttributes(new { data_bind = "value:Attendees" })
            .DataTextField("Text")
            .DataValueField("Value")
            .ValuePrimitive(true)
            .TagTemplate("<span class='k-scheduler-mark' style='background-color:\\#= data.Color?Color:'' \\#'></span>\\#=Text\\#")
            .ItemTemplate("<span class='k-scheduler-mark' style='background-color:\\#= data.Color?Color:'' \\#'></span>\\#=Text\\#")
            .BindTo(new[] {
                    new { Text = "Alex", Value = 1, Color = "\\#f8a398" },
                    new { Text = "Bob", Value = 2, Color = "\\#51a0ed" },
                    new { Text = "Charlie", Value = 3, Color = "\\#56ca85" }
                })
        )
    </div>
     
    @{
        ViewContext.FormContext = null;
    }


    My code 2013.3.1511.440 :

    @model iMail.Web.Models.TaskViewModel
    @using iMail.Web.App_Code.Helpers
    @using iMail.Web.Resources.Views.Calendar
    @{
        //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">
         
        @Index.Title
    </div>
    <div data-container-for="title" class="k-edit-field">
        @(Html.TextBoxFor(model => model.Title, new { @class = "k-textbox", data_bind = "value:title" }))
    </div>
     
    <div class="k-edit-label">
        @Index.Start
    </div>
    <div data-container-for="start" class="k-edit-field">
     
        @(Html.Kendo().DateTimePickerFor(model => model.Start)
            .HtmlAttributes(generateDatePickerAttributes("startDateTime", "start", "value:start,invisible:isAllDay")))
     
        @(Html.Kendo().DatePickerFor(model => model.Start)
            .HtmlAttributes(generateDatePickerAttributes("startDate", "start", "value:start,visible:isAllDay")))
     
        <span data-bind="text: startTimezone"></span>
        <span data-for="start" class="k-invalid-msg"></span>
    </div>
     
    <div class="k-edit-label">
        @Index.End
    </div>
    <div data-container-for="end" class="k-edit-field">
     
        @(Html.Kendo().DateTimePickerFor(model => model.End)
            .HtmlAttributes(generateDatePickerAttributes(
                "endDateTime",
                "end",
                "value:end,invisible:isAllDay",
                new Dictionary<string, object>() {{"data-dateCompare-msg", "End date should be greater than or equal to the start date"}})))
             
        @(Html.Kendo().DatePickerFor(model => model.End)
            .HtmlAttributes(generateDatePickerAttributes(
                "endDate",
                "end",
                "value:end,visible:isAllDay",
                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">
        @Index.IsAllDay
    </div>
    <div data-container-for="isAllDay" class="k-edit-field">
        @(Html.CheckBoxFor(model => model.IsAllDay, new { data_bind = "checked:isAllDay" }))
    </div>
     
     
    <div class="endTimezoneRow">
        <div class="k-edit-label"></div>
        <div class="k-edit-field">
            <label class="k-check">
                <input checked="checked" class="k-timezone-toggle" type="checkbox" value="true" />
                @Index.SeparateStartEndTimezone
            </label>
        </div>
    </div>
    <script>
        $(".k-timezone-toggle").on("click", function () {
            var isVisible = $(this).is(":checked");
            var container = $(this).closest(".k-popup-edit-form");
     
            var endTimezoneRow = container.find("label[for='EndTimezone']").parent().add(container.find("div[data-container-for='endTimezone']"));
            endTimezoneRow.toggle(isVisible);
     
            if (!isVisible) {
                var uid = container.attr("data-uid");
                var scheduler = $("\#scheduler").data("kendoScheduler");
                var model = scheduler.dataSource.getByUid(uid);
                model.set("endTimezone", null);
            }
        });
     
        var endTimezone = '${data.endTimezone}';
     
        if (!endTimezone || endTimezone == "null") {
            $(".k-timezone-toggle").trigger('click');
        }
    </script>
     
    <div class="k-edit-label">
        @Index.StartTimezone
    </div>
    <div data-container-for="startTimezone" class="k-edit-field">
        @(Html.Kendo().TimezoneEditorFor(model => model.StartTimezone)
            .HtmlAttributes(new { data_bind = "value:startTimezone" }))
    </div>
     
    <div class="k-edit-label">
        @Index.EndTimezone
    </div>
    <div data-container-for="endTimezone" class="k-edit-field">
        @(Html.Kendo().TimezoneEditorFor(model => model.EndTimezone)
            .HtmlAttributes(new { data_bind = "value:endTimezone" }))
    </div>
     
    <div class="k-edit-label">
        @Index.RecurrenceRule
    </div>
    <div data-container-for="recurrenceRule" class="k-edit-field">
        @(Html.Kendo().RecurrenceEditorFor(model => model.RecurrenceRule)
            .HtmlAttributes(new { data_bind = "value:recurrenceRule" }))
     
    </div>
     
    <div class="k-edit-label">
        @Index.Description
    </div>
    <div data-container-for="description" class="k-edit-field">
        @(Html.TextAreaFor(model => model.Description, new { @class = "k-textbox", data_bind = "value:description" }))
    </div>
     
    <div class="k-edit-label">
        @Index.Priority
    </div>
    <div data-container-for="priority" class="k-edit-field">
        @(Html.Kendo().NumericTextBoxFor(model => model.Priority)
            .HtmlAttributes(new { data_bind = "value:Priority" })
            .Min(0)
            .Max(9)
            .Format("n0")
            )
    </div>
     
    <div class="k-edit-label">
        URL
    </div>
    <div data-container-for="url" class="k-edit-field">
        @(Html.TextBoxFor(model => model.Url, new { @class = "k-textbox", data_bind = "value:Url" }))
    </div>
     
    <div class="k-edit-label">
        @Index.Room
    </div>
    <div data-container-for="RoomID" class="k-edit-field">
        @(Html.Kendo().DropDownListFor(model => model.RoomID)
            .HtmlAttributes(new { data_bind = "value:RoomID", style = "width: 200px" })
            .DataTextField("Text")
            .DataValueField("Value")
            .OptionLabel("None")
            .ValuePrimitive(true)
            .Template("<span class='k-scheduler-mark' style='background-color:\\#= data.Color?Color:'' \\#'></span>\\#=Text\\#")
            .BindTo(new[] {
                    new { Text = "Meeting Room 101", Value = 1, Color = "\\#6eb3fa" },
                    new { Text = "Meeting Room 201", Value = 2, Color = "\\#f58a8a" },
                    new { Text = "Meeting Room 304", Value = 3, Color = "\\#154afa" }
                }).ToClientTemplate())
    </div>
     
     
    <div class="k-edit-label">
        @Index.Department
    </div>
     
     
    <div data-container-for="DepartmentsID" class="k-edit-field">
        @(Html.Kendo().MultiSelectFor(model => model.DepartmentsID)
            .HtmlAttributes(new { data_bind = "value:DepartmentsID" })
            .DataTextField("Text")
            .DataValueField("Value")  
            //.ValuePrimitive(true)
            .BindTo(new[] {
                    new { Text = "Department 101", Value = 1 },
                    new { Text = "Department 201", Value = 2 },
                    new { Text = "Department 304", Value = 3 }
                })
        )
    </div>
     
    <div class="k-edit-label">
        Externe
    </div>
     
    <div data-container-for="Attendees" class="k-edit-field">
        Adresse email
    </div>
    <div data-container-for="Attendees" class="k-edit-field">
        Nom
    </div>
    <div data-container-for="Attendees" class="k-edit-field">
        <a class="k-button">
        Ajouter à la liste
            <span class="icon-plus"> </span>
        </a>
    </div>
     
    <script>
        $(document).ready(function () {
            init();
        });
        function init() {
        }
    </script>
    @{
        ViewContext.FormContext = null;
    }

    So Url, Description, Title, RecurrenceRule, Priority,etc.. work pretty good, the right data were found in the TaskCreate function in the controller (TaskViewModel Task)
    But the End, Start values have all the time the same value : {01/01/0001 00:00:00}.
    And i can't have the right data for the IEnumerable<int> DepartmentsID, the IEnumareble is initialised but all this value equals 0.
    I wonder if it's not a trouble of version. Maybe 2013.3.1511.440 add some bug ? Or am i maybe a fool ? I lost 3 day trying to accomplish this without any success.
  6. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 20 Mar 2014 Link to this post

    Hi Shimon,

    Basically For editors are automatically assigned a name, equal to the Model field they are bound to, so adding a different name often causes unexpected behavior. The data-bind attribute will also be taken care of, so it is unnecessary. So is the Value option, because the value will be resolved from the data-binding. If all of these are removed and the ViewBag is properly populated, there should be no problems with the binding. Another thing it is worth mentioning - all hash signs should be escaped, because they are a special character in the Kendo UI Template syntax. Here is an example of how the widget might be configured: 
    @model Kendo.Mvc.Examples.Models.Scheduler.MeetingViewModel
     
    @(Html.Kendo().MultiSelectFor(model => model.Attendees)
        .DataValueField("Value")
        .DataTextField("Text")
        .BindTo(new[] {
            new { Text = "Alex", Value = 1, Color = "\\#f8a398" },
            new { Text = "Bob", Value = 2, Color = "\\#51a0ed" },
            new { Text = "Charlie", Value = 3, Color = "\\#56ca85" }
        })
    )


    Regards,
    Alexander Popov
    Telerik
     

    Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

     
  7. Shimon
    Shimon avatar
    18 posts
    Member since:
    Jul 2013

    Posted 25 Mar 2014 in reply to Alexander Popov Link to this post

    Thank you for the information.

    I copy paste the code from the project sample "Schelduler Custom Editor". (All the Index.cshtml,  All the customEditorTemplate, All the model except this part :

    public Meeting ToEntity()
    {
        var meeting = new Meeting
        {
            MeetingID = MeetingID,
            Title = Title,
            Start = Start,
            StartTimezone = StartTimezone,
            End = End,
            EndTimezone = EndTimezone,
            Description = Description,
            IsAllDay = IsAllDay,
            RecurrenceRule = RecurrenceRule,
            RecurrenceException = RecurrenceException,
            RecurrenceID = RecurrenceID,
            RoomID = RoomID
        };

        return meeting;
    }
    which cause error in my project.

    So all the code of the model and the cshtml are the same. So the name should be correct.
    I still have trouble with date and list, all other stuff works prefectly.

    The ModelState in the controller display this error for date :
            "The value « Tue Mar 25 2014 08:00:00 GMT+0100 (Paris, Madrid) » is valid for Start."

    Here is start implementation (copy/paste)
    private DateTime start;
            [Required]
            public DateTime Start
            {
                get
                {
                    return start;
                }
                set
                {
                    start = value.ToUniversalTime();
                }
            }


    Any idea  ? It makes me depressed.

    I'm using now Kendo.mvc Version 2014.1.321.440.
  8. Shimon
    Shimon avatar
    18 posts
    Member since:
    Jul 2013

    Posted 25 Mar 2014 in reply to Shimon Link to this post

    The ModelState in the controller display this error for date :

            "The value « Tue Mar 25 2014 08:00:00 GMT+0100 (Paris, Madrid) » is NOT valid for Start."

    Just a typo correction.
  9. Shimon
    Shimon avatar
    18 posts
    Member since:
    Jul 2013

    Posted 26 Mar 2014 Link to this post

    i don't know if i progress but i look at the bundle config and i forgot to add kendo.aspnetmvc.min.js and kendo.all.min.js
    So my bundle look like this now :
    bundles.Add(new ScriptBundle("~/bundles/kendo").Include(
                    "~/Scripts/kendo/2014.1.321/kendo.all.min.js",
                    "~/Scripts/kendo/2014.1.321/kendo.aspnetmvc.min.js",
                    "~/Scripts/kendo/2014.1.321/kendo.web.js",
                    "~/Scripts/kendo/2014.1.321/kendo.timezones.min.js"
    ));

    Since this change, in the editor UI, when i click on "Save" nothing happens.
  10. Shimon
    Shimon avatar
    18 posts
    Member since:
    Jul 2013

    Posted 26 Mar 2014 Link to this post

    Ok i found the error, it was due to the script which wasn't include in the bundle.
    Thank a lot for the time you spend on this thread :)
    Now all is working perfectly :)
Back to Top
UI for ASP.NET MVC is VS 2017 Ready