EventTemplate in javascript function bind value Invalid or unexpected token

[Mustafa]

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

 

 

[Petar]

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

[Mustafa]

Thanks for the help @Petar :) 

 

 

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

[Petar]

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

[Mustafa]

thank you. It worked as I ask for

[Petar]

Hi Mutafa,

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

Regards,
Petar
Progress Telerik