How to Populate Jason Data response to Kendo Dropdown?

Question

I've a kendo drop down that I'm trying to populate data using ajax jason response. Unfortunately the dropdown list shows blank. Any idea what am I missing? can you please help?

DIV:

<div class="row form-group spacer">
                            <div class="col-md-12">
                                <div class="col-md-12">
                                    @Html.Label("Recipients")
                                    <div id="commentrecipients" class="dirtyignore" name="commentrecipients"></div>
                                </div>
                            </div>
                        </div>

Here is my Ajax call

function DisplayCommentDialog(EntityOrganizationID) {

    $('#commentrecipients').kendoDropDownList({
        dataTextField: "Name",
        dataValueField: "UserID",
        autoBind: false
    });

        $.ajax({
            type: "GET",
            url: "/Submission/SecurityGroupsUsersAccessRight",
            async: false,
            dataType: "JSON",
            data: {
                id: EntityOrganizationID
            },
            success: function (data) {
                
                    var ddl = $('#commentrecipients').data("kendoDropDownList");
                    ddl.setDataSource(data);
                    ddl.refresh();
    
                    $('#commentrecipients').show();
                
            }
        }); 
    
    }

Jason response:

data = "[{"SecurityGroupID":31,"SecurityGroupName":"Permission Testers","UserID":30,"Name":"Dawn Test'Neil"},{"SecurityGroupID":31,"SecurityGroupName":"Permission Testers","UserID":213,"Name":"Dawn 2 Bates"}]"

Answer 1

I changed the approach slightly and used data source transport in order to resolve this issue. Works as expected. Solution is provided below.

function DisplayCommentDialog(EntityOrganizationID) {
    var categories = $("#commentrecipients").kendoDropDownList({
        optionLabel: "Select Recipients...",
        dataTextField: "Name",
        dataValueField: "UserID",
        height: 310,
        Width: "900px",
        dataSource: {
            transport: {
                read: function (options) {
                    $.ajax({
                        url: "/Submission/SecurityGroupsUsersAccessRight",
                        dataType: "JSON", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
                        data: {
                            id: EntityOrganizationID
                        },
                        success: function (result) {
                            // notify the data source that the request succeeded
                            options.success(result);
                        },
                        error: function (result) {
                            // notify the data source that the request failed
                            options.error(result);
                        }
                    });
                }
            }
        }
    }).data("kendoDropDownList");
}