This is a migrated thread and some comments may be shown as answers.

EditorTemplate for Schelduler

7 Answers 391 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Shimon
Top achievements
Rank 2
Shimon asked on 18 Mar 2014, 03:44 PM
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 ?

7 Answers, 1 is accepted

Sort by
0
Shimon
Top achievements
Rank 2
answered on 18 Mar 2014, 04:22 PM
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 ...
0
Shimon
Top achievements
Rank 2
answered on 19 Mar 2014, 09:39 AM
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>
0
Alexander Popov
Telerik team
answered on 20 Mar 2014, 02:28 PM
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.

 
0
Shimon
Top achievements
Rank 2
answered on 25 Mar 2014, 04:28 PM
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.
0
Shimon
Top achievements
Rank 2
answered on 25 Mar 2014, 04:30 PM
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.
0
Shimon
Top achievements
Rank 2
answered on 26 Mar 2014, 02:22 PM
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.
0
Shimon
Top achievements
Rank 2
answered on 26 Mar 2014, 03:29 PM
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 :)
Tags
Scheduler
Asked by
Shimon
Top achievements
Rank 2
Answers by
Shimon
Top achievements
Rank 2
Alexander Popov
Telerik team
Share this question
or