EditorTemplate for Schelduler in UI for ASP.NET MVC Scheduler

Shimon

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 ?

Shimon

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 ...

Shimon

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>

Shimon

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.

Alexander Popov

Admin

1444 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.

Shimon

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.

Shimon

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.

Shimon

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.

Shimon

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 :)