How to bind DropDownList to remote data that returns DataSourceResult?

[Wasae]

Hi,
I am using a combination of Kendo in Razor with WebApi. I have a dropdown which fetches data from a function which is also used to populate a grid. The issue is that the JSON returned by that function has the list in another JSON object which the DropDownList is not able to understand. So the basic question is how to bind a DropDownList() to a remote data which has a list in another object.
Here is my dropdown

@(Html.Kendo().DropDownListFor(m => m.MyData)
                                .DataTextField("Name")
                                .DataValueField("Id") 
                                .DataSource(source =>
                                {
                                        source.Read(read =>
                                        {
                                            read.Url("../api/sample/").Type(HttpVerbs.Get);
                                        })
                                        .ServerFiltering(true); 
                                })
                                .SelectedIndex(0)
                    )

and the data returned is as following 

{"Data":[
{"Id":4,"Name":"alpha"},
{"Id":5,"Name":"beta"}
],
"Total":6,
"AggregateResults":null,
"Errors":null}

Thanks

[Daniel]

Hello,

I am afraid that this is not supported by the Kendo MVC DropDownList. It always expects a JSON array from the server. Can be achieved by initializing the DropDownList through JavaScript and using the schema data option e.g.

@Html.TextBoxFor(m=> m.MyData)

<script>
    $(function () {
        jQuery("#MyData").kendoDropDownList({
            dataSource: {
                transport: {
                    read: {
                        url: "../api/sample/"
                    }
                },
                schema: {
                    data: "Data"
                },
                serverFiltering: true
            },
            dataTextField: "Name",
            dataValueField: "Id",
            index: 0
        });
    });
</script>

Regards,
Daniel
the Telerik team

[danilopimentel]

Hi All,
   
I found a solution for the same problem. Follow the code for this:

@(Html.Kendo().DropDownList()
   .Name("cboSegmento")
   .DataTextField("SEME_NOME")
   .DataValueField("SEME_ID")
   .DataSource(source => source
   .Read(r => r.Action("", ""))
   .ServerFiltering(true)
   )
)

<script>
$(document).ready(function () {
      var dataSource = new kendo.data.DataSource({
      transport: {
      read: {
      url: "/api/SegmentoMercado/Lista",
      }
   },
      schema: {
         data: "Data",
         total: "Total",
         errors: "Errors",
         error: function (e) {
         alert("Erro ao processar os dados da combo!");
      }
   }
});

var segments = $("#cboSegmento").data("kendoDropDownList");
segments.setDataSource(dataSource);
segments.dataSource.read();
});
</script>

The concept is very simple, after the initialization of kendoDropDownList with Razor sintax I changed the DataSource with a new one entirely defined by a javascript function.

The initial defintion for read method of datasource points to a fake controller/action defined by: r.Action("", ""), this is for only purpose that razor syntax requires the definition of this method.

Danilo Pimentel

[Daniel]

Hello,

This approach will also work. I am also glad to inform you that since the latest official release you can also set all dataSource options via the Custom builder:

@(Html.Kendo().DropDownList()
      .Name("cboSegmento")
      .DataTextField("SEME_NOME")
      .DataValueField("SEME_ID")
      .DataSource(source => source
          .Custom()
          .Transport(transport => transport
                .Read(read =>
                {
                    read.Url("/api/SegmentoMercado/Lista");
                })
          )
          .Schema(schema=>  schema
                .Data("Data")
                .Total("Total")
                .Errors("errors")
           )
      )
)

Regards,
Daniel
Telerik