Can't fire click event of a button inside a template

[Johnny]

<script id="editor" type="text/x-kendo-template">

<table border="0">
<tr style="border-style:hidden">
<td style="border-style:hidden"><label>Paciente</label></td>
<td style="border-style:hidden"><div id="example1" class="k-content"><input style="width:300px;" data-bind="value: Paciente" /> <button id="example1" class="k-button" data-bind="events:{ click: buscaficha}">Buscar</button></div></td>
</tr>
<tr style="border-style:hidden">
<td style="border-style:hidden">Teléfono</td>
<td style="border-style:hidden"><input data-bind="value: Telefono"/></td>
</tr>
<tr style="border-style:hidden">
<td style="border-style:hidden">Comienza</td>
<td style="border-style:hidden"><input name="start" type="text" required data-type="date" data-role="datetimepicker" data-bind="value: start,invisible: isAllDay" /></td>

</tr>
<tr style="border-style:hidden">
<td style="border-style:hidden">Finaliza</td>
<td style="border-style:hidden"><input name="end" type="text" required data-type="date" data-role="datetimepicker" data-bind="value: end,invisible: isAllDay" /></td>
</tr>
<tr style="border-style:hidden">
<td style="border-style:hidden">Médico</td>
<td style="border-style:hidden"><input data-bind="value: Medico"/></td>
</tr>
<tr style="border-style:hidden">
<td style="border-style:hidden">Ficha</td>
<td style="border-style:hidden"><input data-bind="value: Ficha_Num"/></td>
</tr>
<tr style="border-style:hidden">
<td style="border-style:hidden">Memo</td>
<td style="border-style:hidden"><input style="width:300px;" data-bind="value: Memo"/></td>
</tr>


</table>

</script>
-------------------------------------------------------

<script type='text/javascript'>


$(document).ready(function () {

var viewModel = kendo.observable({
buscaficha:function (e) {
  alert("HELLO");
}
});

kendo.bind($("#example1"), viewModel);
});
</script>

Thanks in advance

Johnny

[Vladimir Iliev]

Hi Johnny,

From the provided information it seems that you are binding the view model on document "ready" event - please note that this is invalid configuration as the editor template is executed every time the popUp editor is opened. I would suggest to use the edit event of the grid and bind the observable to the container element from the event data. 

function onEdit(e) {
    var viewModel = kendo.observable({
        buscaficha: function (e) {
            alert("HELLO");
        }
    });

    kendo.bind(e.container, viewModel);
}

Regards,
Vladimir Iliev
Telerik

[Johnny]

Vladimir thank you for the response

I'm clear about the onEdit() function, but where I'm a little lost is where to specify it in the wrapper, so the scheduler knows that it has to call this function....

@(Html.Kendo().Scheduler<TaskViewModel>()
.Name("scheduler")
.Date(DateTime.Today)
.StartTime(new DateTime(2013, 1, 1, 7, 00, 00))
.EndTime(new DateTime(2013, 1, 1, 18, 00, 00))
.Height(500)
.MinorTickCount(1)
.MajorTick(Model.getIntervalo((int)ViewBag.medico).tick)
.Selectable(false)

.Editable(e => e.TemplateId("editor"))


.Views(views =>
{
views.DayView();
views.WeekView(weekView => weekView.Selected(true));
views.MonthView();
views.AgendaView();
})

.Messages(message =>
{
message.Today("Hoy Día");
message.AllDay("Todo el Día");
message.Save("Reservar");
message.Cancel("Cerrar");
message.Views(views =>
{
views.Day("Diario");
views.Month("Mensual");
views.Week("Semanal");
});

message.ShowWorkDay("Mostrar Todo el Día");
message.ShowFullDay("Mostrar Horario");

message.Editor(Editor =>
{
Editor.EditorTitle("Cita");


});
})

.Timezone("Etc/UTC")

.DataSource(d => d
.Model(m =>
{
m.Id(e => e.TaskID);
})
.Read("Read", "Action")
.Create("Create", "Action")
.Destroy("Destroy", "Action")
.Update("Update", "Action")
)
)


Thanks in advance

Johnny

[Johnny]

Hi Vladimir:

I found the problem and the solution.

I put it this way

.Events(r=>r.Edit("onEdit"))

And it worked...

Thank you

Johnny

[Johnny]

I thought, I found the solution, but the code below, overrides the edit event. This means that when clicking on a task already with data, the data is not showing inside the event window.

.Events(r=>r.Edit("onEdit"))

I looked on the docs to find a way to associate the javascript function to the button on the template, but I can't find any method that allows me to fire the function of the button.

Any help would be appreciated

Thanks

John

[Vladimir Iliev]

Hi Johnny,

 
Basically there are several ways to attach click event handler to a given button - using JQuery, using JavaScript, using attributes on the HTML element.  For example you can use the ID attribute of the needed button in the Edit event of the Scheduler to attach event handler to it. Please check the example below:

<button id="example1" class="k-button">Buscar</button>

function onEdit(e) {
      var buscaficha = function (e) {
            alert("HELLO");
        }
      element = e.container.find("#example1");
      element.bind("click", buscaficha);
}

Regards,
Vladimir Iliev
Telerik

[Johnny]

Thanks Vladimir
It worked...
I appreciate your help

Best regards

John