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

where define events for button in templates

5 Answers 78 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Eduardo
Top achievements
Rank 1
Eduardo asked on 24 Aug 2015, 07:11 PM

Hi !! I am trying to create a template for a SCHEDULE but my question is where i must put my event function if the object is not created in the init.

 Example ​object BUTTON BTN1

<div id="example">
    <div id="team-schedule">
    </div>
    <script id="event-template" type="text/x-kendo-template">
      <div>#:description #</div>
      # for (var i = 0; i < resources.length; i++) { #
        <div>
            #:resources[i].text #
        </div>
        # } #
    </script>
    <script id="customEditorTemplate" type="text/x-kendo-template">
    <button class="btn1" type="button">Foo</button>
   </script>
   <script>
</script>
<div id="scheduler"></div>
</div>    <script id="customEditorTemplate" type="text/x-kendo-template">
        <button class="btn1" type="button">Foo</button>
   </script>​

$("#scheduler").kendoScheduler({
    date: new Date("2013/6/13"),
    startTime: new Date("2013/6/13 08:00 AM"),
    endTime: new Date("2013/6/13 05:30 PM"),
    height: 1200,
        eventTemplate: $("#event-template").html(), //template event id
        views: [
        "workWeek",
        { type: "day",  minorTickCount: 4, selected: true },
        "week",
        "month",
        "agenda",
        { type: "timeline", eventHeight: 20}
        ],
        editable: {
            template: $("#customEditorTemplate").html(),
        },
        majorTick: 60,
        timezone: "Etc/UTC",
        dataSource: {
            batch: true,
            transport: {
                read: {
                    url: "http://demos.telerik.com/kendo-ui/service/tasks",
                    dataType: "jsonp"
                },
                update: {
                    url: "http://demos.telerik.com/kendo-ui/service/tasks/update",
                    dataType: "jsonp"
                },
                create: {
                    url: "http://demos.telerik.com/kendo-ui/service/tasks/create",
                    dataType: "jsonp"
                },
                destroy: {
                    url: "http://demos.telerik.com/kendo-ui/service/tasks/destroy",
                    dataType: "jsonp"
                },
                parameterMap: function(options, operation) {
                    if (operation !== "read" && options.models) {
                        return {models: kendo.stringify(options.models)};
                    }
                }
            },
            schema: {
                model: {
                    id: "taskId",
                    fields: {
                        taskId: { from: "TaskID", type: "number" },
                        title: { from: "Title", defaultValue: "No title", validation: { required: true } },
                        start: { type: "date", from: "Start", interval:"15" },
                        end: { type: "date", from: "End", interval:"15" },
                        startTimezone: { from: "StartTimezone"},
                        endTimezone: { from: "EndTimezone" },
                        description: { from: "Description" },
                        recurrenceId: { from: "RecurrenceID" },
                        recurrenceRule: { from: "RecurrenceRule" },
                        recurrenceException: { from: "RecurrenceException" },
                        ownerId: { from: "OwnerID", defaultValue: 1 },
                        isAllDay: { type: "boolean", from: "IsAllDay" },
                        phone :{type:"text"},
                        ownerId: { from: "OwnerID", defaultValue: 1 },

                    }
                }
            },
        },
        group: {
            resources: ["Rooms"]
        },
        resources: [
        {
            field: "roomId",
            name: "Rooms",
            dataSource: [
            { text: "​test 1", value: 1},
            { text: "test 2", value: 2}
            ],
            title: "Room"
        }
        ]
        
    });​

5 Answers, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 26 Aug 2015, 10:43 AM
Hi Eduardo,

From the provided information it's not clear for us what exactly you are trying to achieve - could you please provide more detailed information about it? 

Regards,
Vladimir Iliev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Eduardo
Top achievements
Rank 1
answered on 26 Aug 2015, 02:12 PM

in the example I have <button class="btn1" type="button">Foo</button>, but when I try to create listener handler that not working

$("#btn1").click(function(){alert("Hello world"})

or

$("button").on("click","btn1",function(){alert("hello world")});

0
Vladimir Iliev
Telerik team
answered on 27 Aug 2015, 11:24 AM
Hi Eduardo,

In current case I would suggest to use the "dataBound" event of the scheduler to attach the "click" handlers to the buttons or directly set the "onclick" attribute of the buttons.

eventTemplate: "<button class='fooClick'>Foo</button>",
dataBound: function(e) {
  this.element.find(".fooClick").bind("click", function() {
    alert("Clicked");
  });
},


Regards,
Vladimir Iliev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Eduardo
Top achievements
Rank 1
answered on 27 Aug 2015, 01:52 PM
That work when you button is in schedule view...but not when it is in popup event ....
0
Vladimir Iliev
Telerik team
answered on 28 Aug 2015, 12:03 PM
Hello Eduardo,

You can use the "edit" event of the scheduler to bind the event handler to the button inside the edit container:

edit: function(e) {
  e.container.find(".btn1").bind("click", yourClickHandler);
},

Regards,
Vladimir Iliev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Scheduler
Asked by
Eduardo
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Eduardo
Top achievements
Rank 1
Share this question
or