Medo Medo - 1 month ago 18
jQuery Question

Json Returns "Undefined" to Kendo Dropdownlist?

Hello I am using Kendo MVC Grid

in cell
mode, I'm trying to build cascaded drop down lists,I am trying to fill
SubCategory
drop down list based on
Category
drop down list. I have everything working fine except that I get the results that are returned by
JSON
as
undefined
instead of the real value,
here is the code


@(Html.Kendo().Grid<WebApplication6.Models.SubSubCategory>()
.Name("grid")
.Events(events => events.Change("Grid_OnRowSelect"))
.Columns(columns =>
{
columns.ForeignKey(c => c.CategoryID, (System.Collections.IEnumerable)ViewData["Category"],"CategoryID","CategoryName").Title("Category");
columns.ForeignKey(c => c.SubCategoryID (System.Collections.IEnumerable)ViewData["SubCategory"], "SubCategoryID", "SubCategoryName").Title("Sub-Category");


Here is the
ajax
part:-

<script>
Grid_OnRowSelect = function (e) {
var CatID = (this.dataItem(this.select()).CategoryID);
$.ajax({
//url: "SubSubCategories/SearchSubCategory",
url:'@Url.Action("SearchSubCategory", "SubSubCategories")',
type: "GET",
data: { CategoryID: CatID },
dataType: "json",
success: function (retData) {
if (JSON.stringify(retData) != "[]") {
var ddl = $('#SubCategoryID').data("kendoDropDownList");
ddl.setDataSource(retData);
ddl.refresh();



}else {
alert("No");
}
},
error: function (jqXHR, textStatus, errorThrown) {
alert(jqXHR.responseText);
}

});
<script>


And here is the simple Controller (SubSubCategories):-

public JsonResult SearchSubCategory(int CategoryID)
{

var x = ((db.SubCategories.Select(p =>
new { CategoryID = p.CategoryID, SubCategoryID = p.SubCatgeoryID, SubCategoryName = p.SubCategoryName }))
.Where(p => p.CategoryID == CategoryID));
return Json(x, JsonRequestBehavior.AllowGet);
}


Thanks in advance :)

Answer

The issue was in the JQuery code that retrieves the data from the controller, I have put the data inside of an Array and then I bound the DropDownList from that Array, here is the solution:-

<script>
Grid_OnRowSelect = function (e) {
    var CatID = (this.dataItem(this.select()).CategoryID);
    //alert(CatID);
    document.getElementById("cat_id").innerHTML = CatID;
        $.ajax({
            url:'@Url.Action("SearchSubCategory", "SubSubCategories")',
            type: "GET",
            data: { CategoryID: CatID },
            success: function (retData) {
                if (JSON.stringify(retData) != "[]") {
                    //var ddl = $('#SubCategoryID').data("kendoDropDownList");
                    var x = []
                    for (i = 0; i < retData.length; i++) {
                        x.push(retData[i]);
                    }
                    $("#SubCategoryID").kendoDropDownList({
                        dataTextField: "SubCategoryName",
                        dataValueField: "SubCategoryID",
                        dataSource: x
                    });
                }
                else {
                    alert("No sub-categories were found for this category");
                }
            },
                error: function (jqXHR, textStatus, errorThrown) {
                //alert(jqXHR.responseText);
            }

        });
}