DropDownList enabling and populating datasource programmatically

[Alicia]

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>.....

[Dimiter Madjarov]

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

[Alicia]

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

[Dimiter Madjarov]

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

[Paul]

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

[Dimiter Madjarov]

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