Setting Selected Value of DropDownList

4 posts, 0 answers
  1. Perry
    Perry avatar
    26 posts
    Member since:
    Feb 2019

    Posted 11 Mar Link to this post

    I have a page that has a value of fleetId that is set by the Router Object.   I also have a dropdown list that is populated with a datasource.   How can I set the selected value when the page(template) first loads?    It works if I set it to a function in the view model but that creates another set of problems (the onChange won't work)

     

     

     <script id="index" type="text/x-kendo-template">   
      
                           <input data-role="items"    
                                  data-bind="source: channelFleets, value: selectedfleet,  
                                  events: {
                                    change: onChange,                   
                                  }" 
                                  data-text-field="fleetText"
                                  data-value-field="fleetId"          
                             
                     
                />

    </script>

    ---------viewmodel.js-----------------------


    var viewModelIndex = kendo.observable({

      fleetId: "",// Set by Router 
      selectedfleet: "",   

    // Changing the databinding value to this does work.

     //selectedfleet: function() {

                   //    return this.fleetId;             
       //  },
      
      items: [
              { fleetId: "Fleet 1", fleetText: "Fleet 1" },
              { fleetId: "Fleet 2", fleetText: "Fleet 2" },
              { fleetId: "Fleet 3", fleetText: "Fleet 3" }
            ],           


       onChange: function() {              
                     var selectedFleet = this.get("selectedfleet");
                     router.navigate("/operations/fleet/" + selectedFleet);
            },


    });


  2. Dimitar
    Admin
    Dimitar avatar
    663 posts

    Posted 13 Mar Link to this post

    Hello Perry,

    From the current snippet is not clear to which widget is the template linked. Could you provide a runnable sample in the Dojo sandbox that replicates the issue so that I am able to inspect the exact scenario and investigate further?

    Regards,
    Dimitar
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Perry
    Perry avatar
    26 posts
    Member since:
    Feb 2019

    Posted 13 Mar in reply to Dimitar Link to this post

    Here you go

    http://dojo.telerik.com/@phunchak/UVuRoSUk

    If you click on an Id on the grid it will bring you to the next page.....I've displayed the FleetId...but what I want is for it to be the selected item in the dropdown list.

     

  4. Dimitar
    Admin
    Dimitar avatar
    663 posts

    Posted 15 Mar Link to this post

    Hello Perry,

    In order for the clicked item to be selected in the DropDownList, you should bind the value to fleetId as follows:
    <input data-role="dropdownlist"   
      data-bind="source: items, value: fleetId, 
                          events: {
                            change: onChange,                  
                          }"
      data-text-field="fleetText"
      data-value-field="fleetId"/>

    Here is an updated Dojo example.

    Regards,
    Dimitar
    Progress Telerik
    Get quickly onboard and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top