DropDown is not populating in KENDO Grid

Question

i am not able to populating data in KENDO dropdown where data is coming form database. here is my code for KENDO DROPDOWN:

function positionDropDownEditor(container, options) {
    $('<input name="Size" required data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoDropDownList({
         autoBind: false,
         dataTextField: "Name",
         dataValueField: "Id",
           dataSource: {
                        transport: {
                            read: {
                                dataType: "json",
                                url: "/Employee/AllPosition",
                            }
                        }
                    } 
        });
}

And the controller from where data is coming from:

public JsonResult AllPosition()
{
    EmployeeService employeeService = new EmployeeService();
    List<Position> positions= employeeService.GetAllPosition();
    return Json(positions);
}

whats wrong here that data are not populating inside the dropdown? plz explain including "container, options" and what value they contain and why we need to use?

Thank you

Answer 1

After concerning whole day and try, i solved the problem. i hope this will help others. so silly, it took my whole day. finally i found the problem in AllPosition(). here the return type will be sting. the code will be:

public string AllPosition()
    {
        EmployeeService employeeService = new EmployeeService();
        List<Position> positions= employeeService.GetAllPosition();
        var x = JsonConvert.SerializeObject(positions);      
        return x;
    }

Dont ask me why return "JsonConvert.SerializeObject(positions)" not return "json(positions)". i had to convert Return type from JsonResult to string.

Thanks all for concern and tried to help.

Answer 2

You should remove the autoBind flag

Controls whether to bind the widget to the data source on initialization.

EDIT:

I'm sorry, I totaly overlooked that it is already false . Anyways...

Did you check in the browser's debugger if you get the right response from the server at all? It might be that some properties could not be serialized correctly and the server returns null.

Add this method to your Global.asax.cs to catch more errors: it will print errors that are otherwise no where visible... if the error is on the server

protected void Application_EndRequest() {
    if (Context.AllErrors != null) {
        System.Diagnostics.Debugger.Break();
        foreach (var ex in Context.AllErrors) {
            System.Diagnostics.Debug.WriteLine(ex.Message);
        }
    }
} 

Answer 3

Change your Controller to do this:

public JsonResult AllPosition()
{
    EmployeeService employeeService = new EmployeeService();
    List<Position> positions= employeeService.GetAllPosition();
    return Json(positions, JsonRequestBehavior.AllowGet);
}

EDIT:

Also try changing your JavaScript code to look like this:

  $('<input name="Size"  data-text-field="Name" data-value-field="Id" required data-bind="value:' + options.field + '"/>')
    .appendTo(container)
    .kendoDropDownList({
     autoBind: true,
       dataSource: {
                      transport: 
                      {                         
                           read: {dataType: "json", 
                           url: "@Url.Action("Employee", "AllPosition")", type: "GET" }
                      }
                } 
    });

If this view is in an area and you find your not getting to the controller then you can add the area in the read like so:

 url: "@Url.Action("Employee", "AllPosition")",new {@area = "AreaName"} type: "GET" }

Answer 4

As an alternative you could use JSON.NET to return ActionResult

by Sven Grosen