Synchronous binding to data source

7 posts, 1 answers
  1. Gary
    Gary avatar
    62 posts
    Member since:
    Sep 2013

    Posted 14 Feb 2012 Link to this post

    I keep hitting a timing issue whereby reading the value() of the DropDownList is not correct unless the dataSource binding has been completed. How do I configure the DropDownList so that it is bound to its dataSource synchronously?

    I know I can attach code to the change event, but this isn't feasible because I need to ensure all DropDownLists are populated on the page rather than just one. I tried declaring the dataSource separately and calling read() explicitly, but the dataSource is read a second time when it is bound to the DropDownList. I tried binding to the view() method as well, but this had no data.

    Can you help?

    Gary

  2.
  3. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3747 posts

    Posted 15 Feb 2012 Link to this post

    Hello Gary,

     
    If you set autoBind to true, the widget will retrieve the data on initialization. Let me know if I am missing something.

    Regards,
    Georgi Krustev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Gary
    Gary avatar
    62 posts
    Member since:
    Sep 2013

    Posted 15 Feb 2012 Link to this post

    I tried setting autoBind explicitly to true (even though that it is the default value), but it still doesn't work as expected.

    Here is a snippet of my code.

                     var stateDataSource = new kendo.data.DataSource({
                    transport: {
                        read: "/Agent/StateProvinceData"
                    },
                    type: "json"
                });
                kState = $content.find("#reports-state").kendoDropDownList({
                    dataSource: stateDataSource,
                    autoBind: true,
                    dataTextField: "name",
                    dataValueField: "id",
                    optionLabel: "Any State"
                }).data("kendoDropDownList");
                //window.setTimeout(function () {
                    console.log("create state");
                    console.log(kState.options.dataSource._data);
                //}, 1000);


    If I uncomment the two lines above, then I can see the populated results, otherwise an empty array is logged.
  7. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3747 posts

    Posted 16 Feb 2012 Link to this post

    Hello Gary,

     
    In this case you will need to wire the change event of the DataSource. It will notify you when the DataSource was able to retrieve the data from the remote source. 

    Greetings,
    Georgi Krustev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. Gary
    Gary avatar
    62 posts
    Member since:
    Sep 2013

    Posted 16 Feb 2012 Link to this post

    Hello Georgi,

    Please see my original posting for an explanation why this is not a viable approach.

    Still looking for assistance...

    Thanks,
    Gary
  11. Answer
    Georgi Krustev
    Admin
    Georgi Krustev avatar
    3747 posts

    Posted 17 Feb 2012 Link to this post

    Hello Gary,

     
    Sorry for missing the first post. In that case you will need to use jQuery Defferred object. Check this jsFiddle demo, which shows how to achieve your goal. 

    Kind regards,
    Georgi Krustev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  13. Gary
    Gary avatar
    62 posts
    Member since:
    Sep 2013

    Posted 17 Feb 2012 Link to this post

    Wow... impressive! It would be nice if this was supported by the control to avoid having to write all this complex plumbing code, but I do appreciate you finding a solution. Thank you.
  14.
Back to Top