Programmatic template binding with source

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

    Posted 21 Sep Link to this post

    Hello,
    1) i have scenario where viewModel and external template are loaded .  The viewModel is bind to that template . The script inside template has div with no data-bind specified. In middle i want to make ajax call to get data source and bind that data to div  . how to do that, since new data is not part of viewModel?

    2) if we specify kendo.bind() statement in javascript we dont need to write data-bind="source: x" in div attribute right? either one of them should be written or both are needed ?
            
  2. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    558 posts

    Posted 25 Sep Link to this post

    Hi Neeraj,

    As far as I can understand, you have a scenario, in which a Template is defined for an element. Initially, the parent element has no source bound and the data is loaded later with an AJAX call. If this is the case, you will need to pass the data from that call to a property in the ViewModel:
    clickToMakeAjax: function() {
      var that = this;
      $.get(url, function(data) {
        that.set('data', data);
      }, "jsonp");       
    }

    Here you will find a simple implementation of the above suggestion.

    Concerning the second question, in order to successfully bind a source to an element, you will need to use both data-bind="source:..." and kendo.bind(..., ...).

    Further information on source binding in Kendo MVVM could be found in our Documentation.

    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.
  3. Neeraj
    Neeraj avatar
    48 posts
    Member since:
    May 2015

    Posted 02 Oct Link to this post

    Hello, intially if there is no value in ViewModel for particular property, what would be best way to set it as 'new Array()' or 'null' in javascript?
     
  4. Dimitar
    Admin
    Dimitar avatar
    173 posts

    Posted 04 Oct Link to this post

    Hello Neeraj,

    The model property can be updated by using the ObservableObject's set() method as follows:
    <script>
       observable.set("data", null);
    </script>


    Here is a Dojo example that demonstrates the above.

    Regards,
    Dimitar
    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