Best way to bind data to multiple controls

5 posts, 0 answers
  1. Raja
    Raja avatar
    47 posts
    Member since:
    Oct 2013

    Posted 29 Oct 2014 Link to this post

    I am trying to build a single page application with Kendo UI. I have 7 drop down lists and 2 combo boxes on a form. 2 out of 7 drop downs will have same values. 
    What is the best way to get data and bind to these controls?

    1. Make everything an individual datasource
    2. One data source which will have all the collections and bind them once the read request is completed
    3. Any other approach?

  2. Dimo
    Admin
    Dimo avatar
    8457 posts

    Posted 30 Oct 2014 Link to this post

    Hello Raja,

    The most basic and common sense thing is to use a shared DataSource for the two DropDownLists and separate DataSources for the other widgets.

    http://docs.telerik.com/kendo-ui/framework/datasource/overview#binding-ui-widgets-to-the-kendo-ui-datasource

    Theoretcally, it is possible to retrieve all collections with a single request and when the response arrives, distribute the data among several different Kendo UI widgets via the so called local data binding.

    http://docs.telerik.com/kendo-ui/framework/datasource/basic-usage#creating-a-datasource-for-local-data

    http://docs.telerik.com/kendo-ui/framework/datasource/overview#creating-a-local-datasource-in-line-with-ui-widget-configuration

    If you think that this optimization will make a difference in your case, keep in mind that it is applicable only if the data will not change later, otherwise you will need to do a lot of manual coding related to rebinding or CRUD operations.

    Regards,
    Dimo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Raja
    Raja avatar
    47 posts
    Member since:
    Oct 2013

    Posted 30 Oct 2014 in reply to Dimo Link to this post

    I am already using shared datasource. But it is not working in the expected way. here is my code:

    HTML Markup:
    <div>
       <input id="PrimaryClass"
                   name="PrimaryHazard"
                   data-role="dropdownlist"
                   data-value-field="Id"
                   data-text-field="ClassName"
                   data-bind="source: hazard" />
    </div>
     
    <div>
       <input id="SecondaryClass"
                   name="SecondaryHazard"
                   data-role="dropdownlist"
                   data-value-field="Id"
                   data-text-field="class"
                   data-bind="source: hazard" />
    </div>

    Data Source:
    var classNames = new kendo.data.DataSource({
        schema: { model: { id: "Id" } },
        transport: {
            read: {
                url: 'Api/Classes',
                dataType: 'json',
                type: 'GET'
            }
        }
    });

    Model:
    var classModel = kendo.observable({
        title: "",
        class: classNames,
    });

    If i define this way there are two calls to the service to get class names. Do i need to retrieve the data separately and bind to drop-down lists once the read request end?
  4. Raja
    Raja avatar
    47 posts
    Member since:
    Oct 2013

    Posted 30 Oct 2014 in reply to Raja Link to this post

    Ignore the difference in Id and name for the controls. Its a typo.
  5. Dimo
    Admin
    Dimo avatar
    8457 posts

    Posted 03 Nov 2014 Link to this post

    Hello Raja,

    Normally, a dataSource instance will not make unnecessary repetitive data requests even when used by multiple widgets, however, this is theoretically possible in certain scenarios. Make sure you are not calling read() instead of fetch() somewhere.

    http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-read

    http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-fetch

    Another possible option is to try setting data-auto-bind="false" to all widgets, which use a shared DataSource, except one widget, which will trigger the data request.

    If you need more information oin your scenario, please send me a runnable example, so that I can inspect it.

    Regards,
    Dimo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top