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

EventTemplate in javascript function bind value Invalid or unexpected token

5 Answers 22 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Mustafa
Top achievements
Rank 1
Veteran
Mustafa asked on 26 Feb 2021, 09:43 AM

Hi

 

 

.... bla bla bla

.EventTemplate(

        "<div class='eventItem' style='margin-left: 10px;'>" +

        "<label class='mt-checkbox mt-checkbox-outline'>" +
        "#= kendo.toString(start, 'HH:mm') # - #= kendo.toString(end, 'HH:mm') #"+
        "        <input  type='checkbox' onchange='onCheckboxChange(#=Id#,#=kendo.toString(uid)#)'  #=data.cancelled ? checked='checked' : ''#  class='input-small'> #= title # Seç" +
        "        <span></span>" +
        " </label>"+

 "</div>"
)
.DataSource(d => d
           .ServerOperation(true)
           .Read(m => m.Action("Takvimler_Read", "Kullanici", new { area = "Yonetim" }).Data("GetSchedulerData"))
))

 

.... bla bla bla

 

view in code inspector

<input type="checkbox" onchange="onCheckboxChange(1916,05d45395-b80b-4eb1-9700-80c1d7592f0c)" class="input-small">

function

 

    function onCheckboxChange(Id, Uid) {
        console.log("CheckboxChange Id", Id)
        console.log("CheckboxChange Uid", Uid)
    }

 

error

When the checkbox is clicked, an error occurs while passing the Uid value to the function with the parameter.

Uncaught SyntaxError: Invalid or unexpected token

 

 

5 Answers, 1 is accepted

Sort by
0
Accepted
Petar
Telerik team
answered on 03 Mar 2021, 08:14 AM

Hi Mustafa,

To implement the desired functionality, the shared approach should be modified.  

Edit the event template as it follows. The template now doesn't have onchange/onclick handler definition. 

.EventTemplate(
    "#= console.log(kendo.toString(data.uid))#" +
    "<div class='eventItem' style='margin-left: 10px;'>" +

    "<label class='mt-checkbox mt-checkbox-outline'>" +
    "#=kendo.toString(start, 'HH:mm') # - #= kendo.toString(end, 'HH:mm') #" +
    "        <input class='eventCheckbox' type='checkbox' #=data.cancelled ? checked='checked' : ''#  class='input-small'> #= title # Seç" +
    "        <span></span>" +
    " </label>" +

    "</div>"
)

Then add the following to your implementation:

$(document).ready(function () { var scheduler = $("#scheduler").data("kendoScheduler"); scheduler.wrapper.on("click", ".eventCheckbox", function (e) { var uid = $(e.currentTarget).closest(".k-event").data("uid"); var event = scheduler.occurrenceByUid(uid); var id = event.Id; onCheckboxChange(id, uid); }); });

function onCheckboxChange(Id, Uid) { console.log("CheckboxChange Id", Id) console.log("CheckboxChange Uid", Uid) }

The code in yellow will add a click/change handler to each checkbox inside the Scheduler. After that, the code in green will get the current event's data which we can pass to the onCheckboxChange function.

I hope the above will help you resolve the issue in your application. 

Regards,
Petar
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Mustafa
Top achievements
Rank 1
Veteran
answered on 11 Mar 2021, 01:38 PM

Thanks for the help @Petar :) 

 

 

The page worked as I wanted for day, week, month views, but not in agenda view

0
Accepted
Petar
Telerik team
answered on 15 Mar 2021, 12:34 PM

Hi Mustafa,

Add the code in green to the below function and everything should be working correctly in the Agenda View scenario. 

scheduler.wrapper.on("click", ".eventCheckbox", function (e) {
      var uid = $(e.currentTarget).closest(".k-event").data("uid");
      if(uid === undefined ){
        var uid = $(e.currentTarget).closest(".k-task").data("uid");
      }
      var event = scheduler.occurrenceByUid(uid);
      var id = event.taskId;
      onCheckboxChange(id, uid);
});

Let me know if the above suggestion resolves the issue in your application. 

Regards,
Petar
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

0
Mustafa
Top achievements
Rank 1
Veteran
answered on 16 Mar 2021, 07:15 AM
thank you. It worked as I ask for
0
Petar
Telerik team
answered on 16 Mar 2021, 07:31 AM

Hi Mutafa,

I am happy to hear that now everything is working correctly. 

Regards,
Petar
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Scheduler
Asked by
Mustafa
Top achievements
Rank 1
Veteran
Answers by
Petar
Telerik team
Mustafa
Top achievements
Rank 1
Veteran
Share this question
or