Multiselect not setting initial values in Scheduler

2 posts, 0 answers
  1. Sergey
    Sergey avatar
    2 posts
    Member since:
    Jun 2015

    Posted 01 Jul 2015 Link to this post

    I have a scheduler which allows to add attendees

     

    @(Html.Kendo().Scheduler<AGAT.TSSM.Web.Models.Schedule.ScheduleViewModel>()
        .Name("scheduler")
        .Date(DateTime.Today)
        .StartTime(DateTime.Today.AddHours(7))
        .EndTime(DateTime.Today.AddHours(21))
        .WorkDayStart(8, 0, 0)
        .WorkDayEnd(21, 0, 0)
        .WorkWeekStart(1)
        .WorkWeekEnd(0)
        .Timezone("Etc/UTC")
        .EventTemplateId("customEventTemplate")
        .AllDayEventTemplateId("customAllDayTemplate")
        .Views(views =>
        {
            views.DayView(d => d.DateHeaderTemplate("<span class='k-link k-nav-day'>#=kendo.toString(date, 'ddd dd/M')#</span>"));
            views.WeekView(weekView => weekView.Selected(true).DateHeaderTemplate("<span class='k-link k-nav-day'>#=kendo.toString(date, 'ddd dd/M')#</span>"));
            views.MonthView();
            views.AgendaView();
        })
        .Editable(editable =>
        {
            editable.TemplateName("_ScheduleWindowTemplate");
        })
        .DataSource(d => d
            .Model(m =>
            {
                m.Id(f => f.Id);
            })
             
            .Events(e => e.Error("error_handler"))
            .Read("Read", "Schedule")
            .Create("Create", "Schedule")
            .Update("Update", "Schedule")
            .Destroy("Delete","Schedule")
        )
    )

    A pop up window comes from a template

     

    @using AGAT.TSSM.Logic.Domain.Model.Schedule;
    @using AGAT.TSSM.Web.Models.User;
    @model AGAT.TSSM.Web.Models.Schedule.ScheduleViewModel
    @{
        //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.Location))
    </div>
    <div data-container-for="title" class="k-edit-field">
        @(Html.TextBoxFor(model => model.Location, new { @class = "k-textbox", data_bind = "value:Location" }))
    </div>
     
    <div class="k-edit-label">
        @(Html.LabelFor(model => model.IsAllDay))
    </div>
    <div data-container-for="isAllDay" class="k-edit-field">
        <input data-bind="checked: isAllDay" data-val="true" id="IsAllDay" name="IsAllDay" type="checkbox" />
    </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", "Окончание должно быть позднее начала" } })))
     
        @(Html.Kendo().DatePickerFor(model => model.End)
            .HtmlAttributes(generateDatePickerAttributes(
                "endDate",
                "end",
                "value:end,visible:isAllDay",
                new Dictionary<string, object>() { { "data-dateCompare-msg", "Окончание должно быть позднее начала" } })))
     
        <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.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.ScheduleType))
    </div>
    <div data-container-for="ScheduleType" class="k-edit-field">
        @* @Html.DropDownListFor(m => m.ScheduleType, Model.ScheduleTypeList)*@
     
        @(Html.Kendo().DropDownListFor(model => model.ScheduleType)
            .HtmlAttributes(new { data_bind = "value:ScheduleType", 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\\#")
            .Events(e => e.Change("scheduleTypeChange"))
            .BindTo(new[] {
                    new { Text = "Обычное событие", Value = ScheduleType.GeneralSchedule, Color = "\\#6eb3fa" },
                    new { Text = "Работа над заявкой", Value = ScheduleType.WorkOnRequest, Color = "\\#D9534F" },
                    new { Text = "Работа над задачей", Value = ScheduleType.WorkOnTask, Color = "\\#5CB85C" },
                    new { Text = "Работа над проектом", Value = ScheduleType.WorkOnProject, Color = "\\#F0AD4E" },
                    new { Text = "Собрание", Value = ScheduleType.GroupMeeting, Color = "\\#f58a8a" } 
                }).ToClientTemplate()
        )
    </div>
     
    <div id="item-reference" style="display: none;">
        <div class="k-edit-label">
            @(Html.LabelFor(model => model.ItemReference, new { id = "ref-label" }))
        </div>
        <div data-container-for="title" class="k-edit-field">
            @(Html.TextBoxFor(model => model.ItemReference, new { @class = "k-textbox", data_bind = "value:ItemReference" }))
     
        </div>
    </div>
     
    <div id="item-invitees">
        <div class="k-edit-label">
            @(Html.LabelFor(model => model.ScheduleInvitees, new { id = "ref-label" }))
        </div>
        <div data-container-for="title" class="k-edit-field">
     
            @(Html.Kendo().MultiSelectFor(m => m.ScheduleInvitees)
              .Name("ScheduleInvitees")
              .HtmlAttributes(new { data_bind = "value:ScheduleInvitees" })
              .DataTextField("Name")
     
              .DataValueField("Id")
              .TagTemplateId("tagTemplate")
              .ItemTemplateId("itemTemplate")
              .Filter("contains")
              .AutoBind(true)
              .ValuePrimitive(true)
                .DataSource(source =>
                {
                    source.Read(read =>
                    {
                        read.Action("GetInvitees", "Base");
                    })
                    .ServerFiltering(true);
                })
                      .Value(Model.InvitedUsers)
     
        )
     
     
        </div>
    </div>

    My problem is that the multiselect sets new attendees but not reading them when I want to edit it

     

    .DataSource(source =>
                {
                    source.Read(read =>
                    {
                        read.Action("GetInvitees", "Base");
                    })
                    .ServerFiltering(true);
                })
                      .Value(Model.InvitedUsers)

    InvitesUsers come from my model and it is a SelectList and I set it like this:

    InvitedUsers = users.ToSelectList(x => new ExtSelectItem
                            {
                                Selected = true,
                                Text = x.Name,
                                Value = x.Id.ToString()
                            }

  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 03 Jul 2015 Link to this post

    Hello Sergey,

    In general, the widget will request the data on popup open. The "Grouping" demo, for example, shows the same behavior and how the widget requests the data immediately. 

    My assumption is that the multiselect is loaded, but it doesn't select the events's attendees, because the DataValueField of the widget points to "Id", but the loaded data does not contain such field (only Value and Text). That being said, I would suggest you unify the dataValueField/dataTextField and data structure fields:
    .DataTextField("Name")
    .DataValueField("Id")
    nvitedUsers = users.Select(x => new {
      Name = x.Name,
      Id = x.Id.ToString()
    })

    Regards,
    Georgi Krustev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top