How do you set the value of a dropdownlist after reading external data?

27 posts, 1 answers
  1. Todd
    Todd avatar
    13 posts
    Member since:
    Dec 2011

    Posted 17 Dec 2011 Link to this post

     $("#PrimaryDisabilityList").kendoDropDownList({
                    index: 0,
                    dataTextField: "Text",
                    dataValueField: "Id",
                    change: PrimaryDisabilityListChange,
                    dataSource: {
                        type: "json",                 
                        severFiltering: false,
                        serverPaging: false,
                        change:PrimaryDisabilityListLoaded,
                        transport: {
                            read: "@Url.Content("~/FormData/DisabilityCategories")"
                        }
                    }
                });  
     
                
                /*set the values that were loaded*/
                function PrimaryDisabilityListLoaded(){
                var dropdownlist = $("#PrimaryDisabilityList").data("kendoDropDownList");
                var hiddenField = $("#PrimaryDisabilityId");
                var value = hiddenField.val();
                dropdownlist.value(value);
                //Why is this not working? It works when I call if from an event on the page, but not the change event.
                //If I can't use this on the change event for the data source, how should I set the value?
                };
  2. Answer
    Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 20 Dec 2011 Link to this post

    Hello Todd,

     
    It is possible to change the value of the dropdownlist when change event is raised. Check this jsFiddle demo. Modify it if I am missing something.

    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!
  3. Kendo UI is VS 2017 Ready
  4. Todd
    Todd avatar
    13 posts
    Member since:
    Dec 2011

    Posted 23 Dec 2011 Link to this post

    Thanks for the response. I was trying to modify the value after the data has been loaded, not after the change event.
  5. Gary
    Gary avatar
    7 posts
    Member since:
    Jul 2007

    Posted 03 Feb 2012 Link to this post

    The approach used in the jsFiddle prevents the user from being able to choose a different dropdown value.

    I have the same problem. as the initial poster. I need to set the initial value. It seems that calling the value method does not work if that dataSource hasn't had time to bind yet. I also tried setting the value in the dataSource.change event handler with no success.
  6. Gary
    Gary avatar
    7 posts
    Member since:
    Jul 2007

    Posted 06 Feb 2012 Link to this post

    Hi -- I just wanted to follow up on this to make sure it has been seen. I wasn't sure since I'm replying to a post that already has a response marked as answered. If I don't hear anything, I'll write it up in a new post.

    Thanks,
    Gary
  7. Todd
    Todd avatar
    13 posts
    Member since:
    Dec 2011

    Posted 06 Feb 2012 Link to this post

    Gary, I never got an answer to this. I ended up loading the select items during the page response. Then I set the default value in the document.ready. I was never able to load the items via ajax and then set a value.
  8. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 07 Feb 2012 Link to this post

    Hi,

     
    You can set the intial value to the input element. Check this jsFiddle demo.

    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!
  9. Gary
    Gary avatar
    7 posts
    Member since:
    Jul 2007

    Posted 07 Feb 2012 Link to this post

    Ahh... so simple and elegant. Thank you, Georgi. This is the correct answer to the question.
  10. Brian Roth
    Brian Roth avatar
    136 posts
    Member since:
    Oct 2005

    Posted 03 Apr 2012 Link to this post

    I'm having trouble doing this with autoBind: false on my DropDownList.  I have the dropdown on a hidden window and want to bind it when the window is open.  The on-demand binding works fine, but I can't set the initial value on the DropDownList with the methods suggested in this thread.  Any ideas what I might be doing wrong?  I can get it to work if I set autoBind: true, but my preference is to only load the data when the user needs it.
  11. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 05 Apr 2012 Link to this post

    Hello Brian,

     
    I was not able to replicate the depicted issue. Check the updated jsFiddle demo.

    All the best,
    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!
  12. Brian Roth
    Brian Roth avatar
    136 posts
    Member since:
    Oct 2005

    Posted 05 Apr 2012 Link to this post

    Hi Georgi,

    Thanks for getting back to me.  I think my example is a little different than the demo you posted.  I'm firing off a call to bind the dropdown list to the datasource when the button to activate my KendoUI window is activated.  In this situation, it doesn't set the current value for me - it ends up just showing the option label.  I'm guessing there's something wrong with my process, but was hoping to get some help.  Here is the javascript code I have that sets up the window and dropdownlist:

    $(document).ready(function () {
            var window = $('#instanceWindow');
            var dropdown = $('#instances'),
                    instance = $('#instance')
                            .bind('click', function () {
                                dropdown.data('kendoDropDownList').dataSource.read();
                                window.data('kendoWindow').center();
                                window.data('kendoWindow').open();
                            });
      
            if (!window.data('kendoWindow')) {
                window.kendoWindow({
                    visible: false,
                    modal: true,
                    title: 'My Title',
                    width: '415px',
                    draggable: true
                });
            }
      
            dropdown.val('MyValue').kendoDropDownList({
                autoBind: false,
                dataTextField: 'Text',
                dataValueField: 'Value',
                optionLabel: 'Select a Value',
                dataSource: {
                    transport: {
                        read: {
                            url: '@Url.Action('LookupValues', 'Values', new { area = "" })',
                            dataType: 'json',
                            type: 'POST'
                        }
                    }
                },
                close: function (e) {
                    // Run some logic here
                }
            });
        });

    Thanks for your help,
    Brian
  13. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 10 Apr 2012 Link to this post

    Hello Brian,

     
    I was not able to replicate the issue locally. Here is the updated jsFiddle demo. I will ask to send us a simple test project which replicates the problem in order to review it locally and advice you further.

    All the best,
    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!
  14. Brian Roth
    Brian Roth avatar
    136 posts
    Member since:
    Oct 2005

    Posted 10 Apr 2012 Link to this post

    Hi Georgi,

    Thanks for the example.  I took a look and figured out what was different between what you did and what I'm trying to do.  I'm making a call to dataSource.read() on the DropDownList when the window is opened to populate the values.  I wanted to do this proactively rather than waiting for the user to click to open the dropdown.  It gets the list of data fine, it just doesn't seem to display the current value once the data has been retrieved.  Here's how I would modify your jsFiddle project to replicate what I'm seeing - it's just a line at the end to call read():

    $(document).ready(function() {
        $("#window").kendoWindow({
            visible: false,
            modal: true,
            title: 'My Title',
            width: '415px',
            draggable: true
        });
     
        $("#window").data("kendoWindow").open();  
     
        $("#titles").val("ApOCQ").kendoDropDownList({
            dataTextField: "Name",
            dataValueField: "Id",
            autoBind: false,
            dataSource: {
                type: "odata",
                serverFiltering: true,
                filter: [{
                    field: "Name",
                    operator: "contains",
                    value: "Star Wars"
                },{
                    field: "BoxArt.SmallUrl",
                    operator: "neq",
                    value: null
                }],
                transport: {
                    read: "http://odata.netflix.com/Catalog/Titles"
                }
            }
        });
         
        $("#titles").data('kendoDropDownList').dataSource.read();
    });


    Thanks again for helping with this.  I'm guessing there's something wrong with the way I'm making the call to bind the dropdown.

    Regards,
    Brian
  15. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 13 Apr 2012 Link to this post

    Hi,

    You will need to use the value method in order to initiate data binding of the DropDownList and select the correct item:

    $("#titles").data('kendoDropDownList').value("ApOCQ");
    Check the updated jsFiddle demo.
      All the best,
    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!
  16. Prashant
    Prashant avatar
    3 posts
    Member since:
    May 2012

    Posted 30 May 2012 Link to this post

    How can we set the value of the dropdownlist where we have the text and not the value.

    Something like below:
    $("#titles").data('kendoDropDownList').text("Star Wars"); 
  17. Surabhi
    Surabhi avatar
    6 posts
    Member since:
    Dec 2011

    Posted 09 Aug 2012 Link to this post

    I tried this and doesn't work:

     var url = "/lookup/GetDropDownListECFType";      
           $("#ECOType").kendoDropDownList({       
              dataTextField: "LookupText",          
           dataValueField: "LookupValue",   
                    dataSource: {             
                transport: {          
                   read: {               
                  url: url,            
                     dataType: "json",     
                            severFiltering: false      
                       }                     }                 }             });

     $("#ECOType").data("kendoDropDownList").value(4); 
  18. David
    David avatar
    1 posts
    Member since:
    Aug 2012

    Posted 20 Aug 2012 Link to this post

    Someone correct me if I'm wrong, but it looks to me like it didn't work because you didn't put autobind: false. Without the autobind: false, it fires off the bind asynchronously and then your .value(4) is hit before the data is bound. Add the autobind: false and then when you call .value(4) THEN it will bind and set the value accordingly.
  19. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 20 Aug 2012 Link to this post

    Hello,

    The DropDownList widget with autoBind: false will perform Ajax request when the one call value() method. Check the latest official release of Kendo UI. 

    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!
  20. Jeff
    Jeff avatar
    7 posts
    Member since:
    Jun 2012

    Posted 31 Aug 2012 Link to this post

    How can we select a value by index after reading from the external datasource?  I forked the demo here:

    http://jsfiddle.net/xAwYf/2/ 

    It is completely broken - what am I doing wrong?

  21. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 04 Sep 2012 Link to this post

    Hello Jeff,

     
    The demo works fine on my end and if you need to select 4-th item (index: 3) after the DropDownList is bound then you need to use the index option. Check the updated jsFiddle demo. Also if you need to show text before binding you can use the text option.

    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!
  22. Jeff
    Jeff avatar
    7 posts
    Member since:
    Jun 2012

    Posted 07 Sep 2012 Link to this post

    Well, this doesn't really work because it only selects by index once you expand the drop down.

    I have some linked drop down boxes.  When the value of A changes, I want to refresh the datasource for B and automatically pick the second value in B.  I've got the datasource refresh working, but I cannot get the pick part working.  I've tried select(1), index = 1, etc.  nothing seems to work.  What's the secret?
  23. Jeff
    Jeff avatar
    7 posts
    Member since:
    Jun 2012

    Posted 07 Sep 2012 Link to this post

    Never mind - figured it out.  I need to wait until the ajax call completes before setting the selected item.
  24. Robert
    Robert avatar
    19 posts
    Member since:
    Dec 2012

    Posted 07 Jan 2013 Link to this post

    Does any of these methods work if the drop down list is in a grid popup editor. No matter what I try I cannot get the default value to return unless I first change it.
  25. Klas
    Klas  avatar
    9 posts
    Member since:
    Aug 2012

    Posted 09 Jan 2013 Link to this post

    I have the same issue.

    My dilemma is this. I need to change the default values of my foreign key columns each time a user adds a new value so that next time he gets the last values as default values. Is there a smoother way of doing this otherwise? (I use MVC extensions btw).
  26. Grahame
    Grahame avatar
    7 posts
    Member since:
    Feb 2013

    Posted 23 May 2014 Link to this post

    This may not work or be the correct solution for every issue here, but my issue was solved by using the DataBind event in the Kendo Dropdown control.

    <script type="text/javascript">
       //Set the value using Javascript, ext...
        function selectDDDataBound() {
            this.value(getCookie('weekBatchSM'));
        }
    </script>
     
    @* I use Razor but this can be done without *@
    @(Html.Kendo().DropDownList()
                          .Name("selectDDWeek")
                          .DataTextField("Name")
                          .DataValueField("Code")
                          .DataSource(source => {
                              source.Read(read =>
                              {
                                  read.Action("GetDDWeeks", "ControlerNameHere");
                              });
                          })
                          .Events(ev => ev.DataBound("selectDDDataBound"))
                    )
  27. Peggy
    Peggy avatar
    11 posts
    Member since:
    Mar 2013

    Posted 31 Dec 2015 Link to this post

    Thanks Grahame, your databound solution worked for my issue!
  28. Grahame
    Grahame avatar
    7 posts
    Member since:
    Feb 2013

    Posted 18 Jan Link to this post

    Good to hear! :)
Back to Top
Kendo UI is VS 2017 Ready