Custom Template with Databound Resources

2 posts, 0 answers
  1. Russell
    Russell avatar
    5 posts
    Member since:
    Mar 2020

    Posted 09 Mar Link to this post

    Hi guys

    I've been having some problems with kendo scheduler passing the data from the create new meeting moal popup to the controller.  I have an MVC solution where the user should select a location, my control will call off to the server to get a list of resources for that location.  All working as expected except that my custom template for the modal popup won't pass the RoomID to the controller to create a new meeting room.

     

    Here is some of my code.

    Razor MVC

    @(Html.Kendo().Scheduler<MeetingViewModel>()
                                    .Name("scheduler")
                                    .Date(startOfWeek)
                                    .StartTime(startOfWeek.AddHours(8))
                                    .EndTime(startOfWeek.AddHours(18))
                                    .Height(670)
                                    .AllDaySlot(false)
                                    .Editable(e => e.TemplateId("customTemplate").Destroy(false).Create(true).Move(false).Resize(false).Update(false))
                                    //.Editable(e => e.Destroy(false).Create(true).Move(false).Resize(false))
                                    .Events(e =>
                                    {
                                        e.Save("scheduler_save");
                                    })
                                    .Views(views =>
                                    {
                                        views.DayView(x => x.DateHeaderTemplate("<span class='k-link k-nav-day'>#=kendo.toString(date, 'dd/MM')#</span>"));
                                        views.WeekView(weekView => weekView.Selected(true).DateHeaderTemplate("<span class='k-link k-nav-day'>#=kendo.toString(date, 'dd/MM')#</span>"));
                                    })
                                    .Timezone("Etc/GMT")
                                    .Resources(resource =>
                                    {
                                        resource.Add(m => m.RoomID)
                                        .Title("Room")
                                        .DataTextField("ResourceName")
                                        .DataValueField("RoomID")
                                        .DataColorField("ResourceColour")
                                        .Multiple(false)
                                        .DataSource(x => x.Read(s => s.Data("GetRoomFromDropdown").Action("Rooms_Get", "ExchangeCalendar", new { Area = string.Empty })));
                                    })
                    .DataSource(d => d
                    .Events(x => x.RequestEnd("check_response"))
                        .Model(m =>
                        {
                            m.Id(f => f.MeetingID);
                            m.Field(f => f.Title).DefaultValue("No title");
                            m.RecurrenceId(f => f.RecurrenceID);
                            m.Field(f => f.Title).DefaultValue("No title");
                        })
                    .Read(x => x.Data("GetRoomFromDropdown").Action("Rooms_Read", "ExchangeCalendar", new { Area = string.Empty }))
                    .Create("Rooms_Create", "ExchangeCalendar", new { Area = string.Empty })
                    )
    )

     

    CustomTemplate

    @*TEMPLATE FOR MODAL POPUP*@
    <script id="customTemplate" type="text/x-kendo-template">
        <div class="k-edit-label">
            <label for="title">Title</label>
        </div>
     
        <div class="k-edit-field" data-container-for="title">
            <input type="text" class="k-input k-textbox" name="title" data-bind="value: title" />
        </div>
     
        <div class="k-edit-label">
            <label for="start">Start</label>
        </div>
        <div class="k-edit-field" data-container-for="start">
            <span style="display: none;" class="k-widget k-datetimepicker k-header">
                <span class="k-picker-wrap k-state-default">
                    <input type="text" data-bind="value: start, invisible: isAllDay" data-role="datetimepicker" data-type="date" required="" name="start" data-timezone="Etc/UTC" style="width: 100%;" class="k-input" role="textbox" aria-haspopup="true" aria-expanded="false" aria-disabled="false" aria-readonly="false" aria-label="Current focused date is 6/10/2013 12:00:00 AM"><span class="k-select" unselectable="on"><span class="k-icon k-i-calendar" unselectable="on" role="button">select</span><span class="k-icon k-i-clock" unselectable="on" role="button">select</span></span>
                </span>
            </span><span style="" class="k-widget k-datepicker k-header"><span class="k-picker-wrap k-state-default"><input type="text" data-bind="value: start, visible: isAllDay" data-role="datepicker" data-type="date" required="" name="start" data-timezone="Etc/UTC" style="width: 100%;" class="k-input" role="textbox" aria-haspopup="true" aria-expanded="false" aria-disabled="false" aria-readonly="false" aria-label="Current focused date is Monday, June 10, 2013"><span class="k-select" unselectable="on" role="button"><span class="k-icon k-i-calendar" unselectable="on">select</span></span></span></span><span data-bind="    text: startTimezone"></span><span class="k-invalid-msg" data-for="start" style="display: none;"></span>
        </div>
     
        <div class="k-edit-label">
            <label for="end">End</label>
        </div>
        <div class="k-edit-field" data-container-for="end">
            <span style="display: none;" class="k-widget k-datetimepicker k-header">
                <span class="k-picker-wrap k-state-default">
                    <input type="text" data-bind="value: end, invisible: isAllDay" data-role="datetimepicker" data-type="date" required="" name="end" data-timezone="Etc/UTC" style="width: 100%;" class="k-input" role="textbox" aria-haspopup="true" aria-expanded="false" aria-disabled="false" aria-readonly="false" aria-label="Current focused date is 6/10/2013 12:00:00 AM"><span class="k-select" unselectable="on"><span class="k-icon k-i-calendar" unselectable="on" role="button">select</span><span class="k-icon k-i-clock" unselectable="on" role="button">select</span></span>
                </span>
            </span><span style="" class="k-widget k-datepicker k-header"><span class="k-picker-wrap k-state-default"><input type="text" data-bind="value: end, visible: isAllDay" data-role="datepicker" data-type="date" required="" name="end" data-timezone="Etc/UTC" style="width: 100%;" class="k-input" role="textbox" aria-haspopup="true" aria-expanded="false" aria-disabled="false" aria-readonly="false" aria-label="Current focused date is Monday, June 10, 2013"><span class="k-select" unselectable="on" role="button"><span class="k-icon k-i-calendar" unselectable="on">select</span></span></span></span><span data-bind="    text: endTimezone"></span><span class="k-invalid-msg" data-for="end" style="display: none;"></span>
        </div>
     
        <div class="k-edit-label">
            <label for="roomID">Room</label>
        </div>
     
        <div data-container-for="RoomID" class="k-edit-field" id="resourcesContainer"></div>
            <script>
                    jQuery(function () {
                        var container = jQuery("\#resourcesContainer");
                        var resources = jQuery("\#scheduler").data("kendoScheduler").resources;
     
                        console.log(resources[0].dataSource._data);
     
                        jQuery(kendo.format('<select data-bind="value: {0}" name="{0}">', resources[0].field))
                            .appendTo(container)
                            .kendoDropDownList({
                                dataTextField: resources[0].dataTextField,
                                dataValueField: resources[0].dataValueField,
                                dataSource: resources[0].dataSource,
                                valuePrimitive: resources[0].valuePrimitive,
                                optionLabel: "N1one",
                                template: kendo.format('<span class="k-scheduler-mark" style="background-color:\#= data.{0}?{0}:"none" \#"></span>\#={1}\#', resources[0].dataColorField, resources[0].dataTextField)
                            });
                    })
                <\/script>
    </script>

     

    The Title, StartDate, EndDate are all coming through as the correct values but the RoomID is coming through NULL.

    When I create a simple select like is passes the value correctly 

    <select name="RoomID" data-bind="value:RoomID">
                <option value="2">Yo</option>
                <option value="4">Blah</option>
                <option value="6">Blah</option>
            </select>

     

     

  2. Petar
    Admin
    Petar avatar
    401 posts

    Posted 11 Mar Link to this post

    Hi Russell,

    As this ticket is a duplicate of this one, I will close the current thread.

    Let's continue the discussion in the linked thread as the provided code is related to UI for ASP.NET MVC, not to Kendo UI for jQuery. 

    Regards,
    Petar
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top