CODEWITHSUNDEEP
kendo-uikendo-grid
Aneeq
Aneeq

Reputation: 416

kendojs template data-bind click event not working

Well, I am using KendoJS grid and I have this code here in my .js file:

var viewModel = kendo.observable({

    people: new kendo.data.DataSource(...),

    isActive:true,
    friends: new kendo.data.DataSource(...),
    selectionChanged: function(){...
    }
});

$(document).ready(function () {
    kendo.bind($("#sampleGridContainer"), viewModel);
});

In my .html file, I have a kendo grid:

<div id="sampleGridContainer">
    <div data-role="grid"
         data-columns="[...]"
         data-editable="{ 'mode': 'popup', 'template': kendo.template($('#sampleTemplate').html()) }"
         data-bind="source: people"></div>
</div>


<script id="sampleTemplate" type="text/x-kendo-template">
    <form id="sampleForm">
       ...

       <div data-container-for="somedropdown" class="k-edit-field">
            <input name="somedropdown" id="somedropdown"
                 data-role="dropdownlist"
                 data-type="text"
                 data-text-field="name"
                 data-value-field="value"
                 data-bind="value: someValue, visible: isActive, source: friends, click: selectionChanged" />
       </div>           

       ...
    </form>
</script>

Now, in my dropdown input element, someValue, isActive and friends variables are properly working - infact the drop down list shows up fine. But the problem is click event selectionChanged is not called. If I remove this from template, the event starts working, but my question is when all the other variables on the same scope are accessible in template, why does event selectionChanged not get called?

Any help is highly appreciated.

Upvotes: 0

Views: 950

Answers (1)

Cara
Cara

Reputation: 644

I have also encountered this problem, my workaround for this is that I initialize my kendoDropDownList on the edit event of grid.

edit: function (e){
   e.container.find("input[name='somedropdown']").kendoDropDownList({
      dataTextField: "name",
      dataValueField: "value",
      data-bind="value: viewModel.someValue, visible: viewModel.isActive, source: viewModel.friends, click: viewModel.selectionChanged"
   });
}

Then the html would look something like this:

<div data-role="grid"
   data-columns="[...]"
   data-editable="{ 'mode': 'popup', 'template': kendo.template($('#sampleTemplate').html()) }"
   data-bind="source: people, events: { edit: onEdit }">
</div>

<script id="sampleTemplate" type="text/x-kendo-template">
    <form id="sampleForm">
       <div data-container-for="somedropdown" class="k-edit-field">
            <input name="somedropdown"/>
       </div>
    </form>
</script>

Hope this works for you.

Upvotes: 1

Related Questions