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

Custom Template with Databound Resources

1 Answer 15 Views
This is a migrated thread and some comments may be shown as answers.
Russell
Top achievements
Rank 1
Russell asked on 09 Mar 2020, 07:18 PM

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>

 

 

1 Answer, 1 is accepted

Sort by
0
Petar
Telerik team
answered on 11 Mar 2020, 12:44 PM

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.
Asked by
Russell
Top achievements
Rank 1
Answers by
Petar
Telerik team
Share this question
or