kendo ui - issue with binding of viewmodel

2 posts, 0 answers
  1. Valay
    Valay avatar
    4 posts
    Member since:
    Jun 2014

    Posted 07 Jun 2014 Link to this post

    Here is the situation. I've 2 views: grid-view and add-view. When page loads, grid-view is visible. By clicking on "New" button, add-view comes into the picture. Both views are into the layout.Here's the code:

    var customerSearchLayout = new kendo.Layout($('#customer-search-view-template').html());
        customerSearchLayout.render($("#searchCust"));
     
        var addCustomerView = new kendo.View($('#add-customer-view-template').html());
            var customerGridView = new kendo.View($('#customer-grid-view-template').html());
            var layout = new kendo.Layout("<div id='content' class='contentDiv'></div>");
     
            layout.render($("#main")); 
            layout.showIn("#content", customerGridView);

    "New" button is inside customer-search-view-template.

    var customerSearch = kendo.observable({
            customerName: "Customer name",
     
            searchClicked: function() {
                this.set("customerName", "Search clicked");                    
            },     
            newClicked: function(e){
                  e.preventDefault();
                  this.trigger("newCustomerClicked");
            }  
        });
     
        customerSearch.bind("newCustomerClicked", function(){
            layout.render($("#main"));
            layout.showIn("#content", addCustomerView, "swap");
        });
     
        // Bind the view model to the customer element.
        kendo.bind($('#searchCustomer'), customerSearch);

    When "New" button is clicked, it triggers newCustomerClicked event and displays add-view. add-view has a form to add a new customer. The form is nested inside a <div>.

    <form id="addCustForm">
    <label for="txtFname">First name</label>                       
    <input id="fname" data-bind="value: firstName" class="k-textbox"  />
    </form>
     
    // observable object of add customer
        var customerAdd = kendo.observable({       
            firstName: "Hello world!"
        });
     
        // Bind the view model to the customer element.
        kendo.bind($('#addCustForm'), customerAdd);

    Each template has a wrapping element.

    I've tried to bind viewmodel customerAdd with form, with parent div, with container div but none of these worked.
    I couldn't figure out what is the issue with binding here.
    So, how do I bind viewmodel customerAdd with form ?????

  2. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 10 Jun 2014 Link to this post

    Hi Valay,

    the correct means to use data binding in the SPA framework is via the view model configuration option. Using kendo.bind is not necessary. You may refer to the source code of our sample sushi application for some samples. The view model configuration option is explained in detail in our documentation

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top