This is a migrated thread and some comments may be shown as answers.
Unable to track dropdown events in scheduler popup
2 Answers 8 Views
This is a migrated thread and some comments may be shown as answers.
Winnie
Top achievements
Rank 1
Winnie asked on 27 Feb 2014, 05:56 PM
I'm getting an error every time I'm trying to track a popup event type.

All I'm trying to do is to get the console to log the event type whenever a user changes the the dropdown options to start. This keeps throwing an error and I'm wondering if anyone can give me some clue as to what this problem is or maybe a better (or right?) way to write this?

Thanks. 

<script>
    $(document).ready(function() {
        var viewModel = new kendo.observable({
            selectedEventType:"Appointment",
            appointmentTypes : ["Appointment","Other Event"],
            onDataBound: function(e) {
                e.sender.select(0);
                this.set("selectedEventType", e.sender.dataItem());
            },
            changeEventType: function() {
                console.log("event :: change (" + this.get("selectedEventType") + ")");
            },
            schedulerData: [{
                id: 1,
                start: new Date("2013/6/6 08:00 AM"),
                end: new Date("2013/6/6 09:00 AM"),
                title: "Interview"
            }]
        });
        $("#scheduler").kendoScheduler({
            date: new Date("2013/6/6"),
            editable: {
                template: $("#editor").html()
            },
            views: [
                "day",
                { type: "week", selected: true },
                "month",
                "agenda"
            ],
            dataSource: viewModel.schedulerData
        });
    });
</script>

<!-- We can migrate this to a js file upon production -Winnie -->
<script id="editor" type="text/x-kendo-template">
    <form class="form-horizontal">
        <label>Type:</label>
        <select data-role="dropdownlist" data-bind="value:selectedEventType,source:appointmentTypes,events:{change:changeEventType}"></select>

        <label>Client*:</label>
        <input type="text" name="title" />

        <label>Add New Client:</label>
        <a data-role="button" data-click="newClient" id="eventType"><span class="k-icon k-i-plus"></span>New</a>
    </form>
</script>

<script>
    function newClient(e) {
        console.log("new client click");
    };
</script>


<div id="scheduler"></div>

2 Answers, 1 is accepted

Sort by
0
Accepted
Rosen
Telerik team
answered on 28 Feb 2014, 08:42 AM
Hi,

I'm afraid that attaching the event in this way is not currently supported due to the way edit form is bound to the model. Thus, you will need to use the Scheduler's edit event to attached the change handler, similar to the following:

$("#scheduler").kendoScheduler({
     date: new Date("2013/6/6"),
     editable: {
         template: $("#editor").html()
     },
     views: [
         "day",
         { type: "week", selected: true },
         "month",
         "agenda"
     ],
     edit: function(e) {
       e.container
         .find("select")
         .data("kendoDropDownList")
         .bind("change", function() {
           viewModel.changeEventType();
         });
     },
     dataSource: viewModel.schedulerData
 });


Regards,
Rosen
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Winnie
Top achievements
Rank 1
answered on 02 Mar 2014, 06:03 AM
That works great. Thank you!
Asked by
Winnie
Top achievements
Rank 1
Answers by
Rosen
Telerik team
Winnie
Top achievements
Rank 1
Share this question
or