Json data not rendering in Kendo UI Dropdown

Question

Trying to render the Json returned data to kendo drop down list, but not rendering. Please find the code snippett. I am able to see the alert box. I tried JSON.parse(siteNameData), but no luck.

AJAX CALL

$.ajax({
    url: '../Report/GetSitesofSelectedClient',
    type: "GET",
    cache: false,
    datatype: "json",
    data: { "selectedClientCode": selectedClientCode },
    contentType: "application/json",
    async: false,
    success: function(siteNameData) {
        alert('hello');

        $("#siteNamesDropDown").kendoDropDownList({
            dataTextField: "text",
            dataValueField: "value",
            template: $("#CheckboxTemplate2").html(),
            datasource: siteNameData,
            placeholder: "Select...",
            select: function(e) {
                e.preventDefault();
            }
        }).data("kendoDropDownList");

        //PopulateSiteNamesDropDown(siteNamesReceived);
     },
     error: function(xhr, ajaxOptions, thrownError) {
         ShowDialogError(xhr, 'High Chart Status Report');
     }
});

CONTROLLER

    public JsonResult GetSitesofSelectedClient(string selectedClientCode)
    {
        ViewBag.ShowReport = true;

        var highChartModel = new HighChartViewModel();

        var siteData = highChartModel.GetListOfSites(selectedClientCode);

        return Json(new {siteData}, JsonRequestBehavior.AllowGet);

    }

MODEL

 public string GetListOfSites(string clientCode)
 {

         SiteNameList = _serviceSessionManager.GetSiteListForClient(clientCode);

        listOfSiteNames = new List<SiteStatusReportModel>();

        foreach (Site siteName in SiteNameList)
        {
            var siteNameInfo = new SiteStatusReportModel
            {
                text     = siteName.SiteName,
                value    = siteName.SiteCode,
                selected = false
            };

            listOfSiteNames.Add(siteNameInfo);
        }

        var siteNameJsonData = JsonHelper.ToJsonString(listOfSiteNames)
        return siteNameJsonData;
 }

Answer 1

This is My dropdownlist code. Make sure your DataText and DataValue fields are correctly mapped to the properties you are targeting.

 public JsonResult GetOpportunityListByAccount(Guid Id)
    {
        List<OpportunityViewModel> cpvm = new List<OpportunityViewModel>();            
        cpvm = GetOpportunityListByAccount(Id);            

        return Json(cpvm, JsonRequestBehavior.AllowGet);            
    }   

public List<OpportunityViewModel> GetOpportunityListByAccount(Guid Id)
    {
        List<OpportunityViewModel> oppVMList = new List<OpportunityViewModel>();
        var oppList = new OrderManager().GetOpportunitiesByAccount(Id); 

        foreach (var op in oppList)
        {
            OpportunityViewModel opvm = new OpportunityViewModel();
            opvm.OpportunityId = op.OpportunityId;
            opvm.OpportunityName = op.OpportunityName;

            oppVMList.Add(opvm);
        }

        return oppVMList;           
    }    


@(Html.Kendo().DropDownListFor(x => x.FromOpportunity)       
          .Name("OpportunityDDL")                 
          .DataTextField("OpportunityName")              
          .DataValueField("OpportunityId")                         
          .DataSource(source => {
              source.Read(read =>
               {
                   read.Action("GetOpportunityListByAccount", "CrmIntegration")
                        .Data("OnAdditionalData");
               })
                . ServerFiltering(true);
          })     
     //    .CascadeFrom("AdvertiserDDL")
          .HtmlAttributes( new { style = "margin-left:13px; width: 275px;" })
   )     

.Data is what your going to use to pass a parameter to the controller. Notice my GetOpportunityListByAccount function takes the Id as a parameter. And My "OnAdditionalData" also returns a parameter named Id. They gotta be called the same to work.

function OnAdditionalData() {        
    return {
        Id: $("#AdvertiserDDL").val()
   };
}      

Be careful if the call doesn't work it might be a data type issue. I've ran into the problem when my controller expected a Guid, using .val() which was also a guid but it didnt work. I had to change my controller to expect a string and do something like Id: "" + $("#AdvertiserDDL").val()

Answer 2

you don't reinitialize the drop down every time. Initialize it only once. On your controller build a List and return that through json. To reset the dropdown you need to set the datasource like this

var combobox = $("#siteNamesDropDown").data('kendoDropDownList');
if(combobox != null){
    //set the datasource of the combo
    combobox.dataSource.data(siteNameData);
    //requery the drop down so it shows the new data
    combobox.dataSource.query();
    //reset the selected value
    combobox.value("");
}

Answer 3

Did you console.log(siteNameData)? Is it returning a proper json? May be the resonse is inisde variable siteNameData.d Also not sure why you set async property to false? Please set it to true oe either remove it.

Try out this code

$.ajax(
                        {
                            url: '../Report/GetSitesofSelectedClient',
                            type: "GET",
                            cache: false,
                            datatype: "json",
                            data: { "selectedClientCode": selectedClientCode },
                            contentType: "application/json",

                            success: function(siteNameData) {

                                alert('hello');

                                $("#siteNamesDropDown").kendoDropDownList({
                                    dataTextField: "text",
                                    dataValueField: "value",
                                    template: $("#CheckboxTemplate2").html(),
                                    datasource: JSON.parse(siteNameData.d),
                                    placeholder: "Select...",
                                    select: function(e) {
                                        e.preventDefault();
                                    }
                                }).data("kendoDropDownList");

                                //PopulateSiteNamesDropDown(siteNamesReceived);
                            },
                            error: function(xhr, ajaxOptions, thrownError) {

                                ShowDialogError(xhr, 'High Chart Status Report');
                            }
                        });