cannot bind to click event

3 posts, 0 answers
  1. Neeraj
    Neeraj avatar
    48 posts
    Member since:
    May 2015

    Posted 23 Sep Link to this post

    Hello,
                I have viewmodel that has a function save. and 2 external templates files

     

    PricingViewModel = kendo.observable({
            savePrice: function(e) {
                debugger;
            },
            Item: {
            Items: ModelData,
            SavePricing: function(e){
            }
    });

     

     

    The PricingViewModel is bind to external template . there is another template in which the data source is not part of this Modeldata. i have ajax function that calls data and binds to second template . second template has a button which i want onclick bind to savePrice () or SavePricing() , how can i do that?
              i also tried kendo.bind() that didnt worked. It gets bind to normal javascript function outside viewmodel but in that i dont get e.data !!

     

  2. Neeraj
    Neeraj avatar
    48 posts
    Member since:
    May 2015

    Posted 24 Sep Link to this post

    there is a property inside Items (which as ModelData) i have a button , so i have binded that button with SavePricing function and also tried savePrice .        I get following error:

    Uncaught TypeError: n is not a function

              How can i bind inside element button with outer functions? like(savePricing() and savePrice() )
  3. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    561 posts

    Posted 26 Sep Link to this post

    Hi Neeraj,

    As far as I can understand, you are trying to bind a click handler of a button, which is placed in a template to a function, which is defined in the ViewModel (not defined in an item from the Items collection).

    If this is the case, the above could be implemented in the template in the following way:
    <script type="text/x-kendo-template" id="myTemplate">
        <li>ID: #: ProductID #; Name: #: ProductName #
        <input type="button" value="Click me" data-bind="events: { click: savePrice }" >
      </li>
    </script>

    Here you could find a simple Dojo, implementing the above suggestion.

    Here you could find a bit more information on events binding in MVVM.

    Regards,
    Veselin Tsvetanov
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top