DropDownList enabling and populating datasource programmatically

6 posts, 0 answers
  1. Alicia
    Alicia avatar
    6 posts
    Member since:
    Apr 2013

    Posted 24 May 2013 Link to this post

    I'm having problems with enabling.  I need to be able to have the dropdownlist, initially, be disable.  After I enable it, I need to retrieve data and filter based on parameters.  What I am running into is that when I enable the dropdownlist via javascript, nothing is happening.  What am I doing wrong?  Any help is greatly appreciated.

    <script>
        function myFunction() {
            var functionalRequirements = new Array();
            var i = 0;
            var hearing = document.getElementById("hearing");
            var vision = document.getElementById("vision");
            if(hearing.checked) {
                functionalRequirements[i] = hearing.value;
                i++;
            }
            if(vision.checked){
                functionalRequirements[i] = vision.value;
                i++;
            }
      
            var categories = $("#categories").data("kendoDropDownList"),
                products = $("#products").data("kendoDropDownList"),
                orders = $("#orders").data("kendoDropDownList");

            categories.enable(true);
            categories.setDataSource(read.action("GetCascadeCategories", "Home", functionalRequirements));
            
            });

        }
    </script>
    <div class="demo-section">
    <form name="input" id="theForm">
        <input type="checkbox" name="hearing" value="Hearing" id="hearing"/>Hearing
        <input type="checkbox" name="vision" value="Vision" id="vision"/>Vision
        <br/>
        <input type="submit" value="Submit" onclick="myFunction()"/>

    </form>


        <p>
            <label for="categories">Catergories:</label>
            @(Html.Kendo().DropDownList()
                  .Name("categories")
                  .HtmlAttributes(new { style = "width:300px" })
                  .OptionLabel("Select category...")
                  .DataTextField("CategoryName")
                  .DataValueField("CategoryId")
                  .Enable(false)
                 
                  
                  )

        </p>.....
  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 27 May 2013 Link to this post

    Hello Alicia,


    The reason for the issue in the current implementation is on the line, where the dataSource is set. The setDataSource accepts an instance of kendo.data.DataSource as a parameter. As a solution, you should create a new dataSource and pass it as a parameter to this function.


    Another approach that I could suggest you is to define the dataSource read action in the DropDownList configuration and set the AutoBind(false) option in order to specify that the data should not be read initially.
    E.g.
    @(Html.Kendo().DropDownList()
          .Name("categories")
          .HtmlAttributes(new { style = "width: 300px" })
          .DataTextField("CategoryName")
          .DataValueField("CategoryId")
          .OptionLabel("Select category...")
          .DataSource(source => {
              source.Read(read =>
              {
                  read.Action("GetCascadeCategories", "Home").Data("additionalData");
              });
          })
          .Enable(false)
          .AutoBind(false)
    )

    The Data method specifies the name of the JavaScript function that will return the additional parameters.
    E.g.

    function additionalData() {
        var functionalRequirements = [];
        ...
     
        return {
            functionalRequirements : functionalRequirements
        }
    }

    At the end, you should just enable the widget and call the read action of it's dataSource.
    E.g.
    var categories = $("#categories").data("kendoDropDownList");
    categories.dataSource.read();
    categories.enable();

    I hope this information was helpful for you. I wish you a great day!


    Regards,
    Dimiter Madjarov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Alicia
    Alicia avatar
    6 posts
    Member since:
    Apr 2013

    Posted 28 May 2013 Link to this post

    It was helpful.  Thank you!  However, it still isn't enabling and now the parameter passed to "GetCascadeCategories" is null.  

    My updated code.

    <script>
        function myFunction() {        
            var categories = $("#categories").data("kendoDropDownList"),
                products = $("#products").data("kendoDropDownList"),
                orders = $("#orders").data("kendoDropDownList");

            categories.dataSource.read();
            categories.enable();
            
            $("#get").click(function () {
                var categoryInfo = "\nCategory: { id: " + categories.value() + ", name: " + categories.text() + " }",
                    productInfo = "\nProduct: { id: " + products.value() + ", name: " + products.text() + " }",
                    orderInfo = "\nOrder: { id: " + orders.value() + ", name: " + orders.text() + " }";

                alert("Order details:\n" + categoryInfo + productInfo + orderInfo);
            });

        }
    </script>
    <div class="demo-section">
    <form name="input" id="theForm">
        <input type="checkbox" name="hearing" value="Hearing" id="hearing"/> Hearing
        <input type="checkbox" name="vision" value="Vision" id="vision"/> Vision
        <br/>
        <input type="submit" value="Ok" onclick="myFunction()"/>

    </form>


        <p>
            <label for="categories">Functional Limitations:</label>
            @(Html.Kendo().DropDownList()
                  .Name("categories")
                  .HtmlAttributes(new { style = "width:300px" })
                  .OptionLabel("Select functional limitations...")
                  .DataTextField("CategoryName")
                  .DataValueField("CategoryId")
                  .DataSource(source=> source.Read(read=>read.Action("GetCascadeCategories", "Home").Data("additionalData")))
                  .Enable(false)
                  .AutoBind(false)
                  )
            <script>
                function additionalData() {
                    
                    var functionalRequirements = new Array();
                    var i = 0;
                    var hearing = document.getElementById("hearing");
                    var vision = document.getElementById("vision");
                    if (hearing.checked) {
                        functionalRequirements[i] = hearing.value;
                        i++;
                    }
                    if (vision.checked) {
                        functionalRequirements[i] = vision.value;
                        i++;
                    }
                    return { functionalRequirements: functionalRequirements };
                }
            </script>

    ********************
    Method in Controller

    public JsonResult GetCascadeCategories(String[] functionalRequirements)
            {
                //Todo filter by functional requirements
                colleges = new CollegesModelView();

                return Json(colleges.Categories.Select(c => new { CategoryId = c.CategoryID, CategoryName = c.CategoryName }), JsonRequestBehavior.AllowGet);
            }

    Thank you so much!

    Alicia
  5. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 30 May 2013 Link to this post

    Hi Alicia,


    I missed a detail in my previous answer, regarding the format of the data returned by the additionalData() function. The object result should be formatted following the pattern "parameterName[index]=value". So in the current scenario, you should format the array the following way.
    E.g.
    function additionalData() {
        var functionalRequirements = [];
        //custom actions
     
        var result = {};
        for (var i = 0; i < functionalRequirements.length; i++) {
            result["functionalRequirements[" + i + "]"] = functionalRequirements[i];
        }
        return result;
    }

    Then you could use the data in the controller action as a normal collection.
    E.g.
    public JsonResult GetProducts(string[] functionalRequirements)
    {
      //...
    }

     

    Regards,
    Dimiter Madjarov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Paul
    Paul avatar
    28 posts
    Member since:
    Mar 2013

    Posted 24 Feb Link to this post

    Hi there,

    I am attempting the solution as posted above, regarding formatting the result from the additionalData function. This works fine when the array has a length of 1, but not when it has multiple elements.

    The MVC controller only ever receives a string[] with 1 element in it. Am I doing something wrong, or is the above example no longer valid?

    Thanks

  7. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 26 Feb Link to this post

    Hello Paul,

    The example is generic one, not directly related to Kendo UI specifics, so it should still be valid. If the problem is still persisting, you could send us isolated runnable example here or in a support ticket, so we could inspect further.

    Regards,
    Dimiter Madjarov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready