This is a migrated thread and some comments may be shown as answers.

How to bind DropDownList to remote data that returns DataSourceResult?

3 Answers 1453 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Wasae
Top achievements
Rank 1
Wasae asked on 12 Mar 2013, 07:00 AM
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

3 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 14 Mar 2013, 09:45 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
danilopimentel
Top achievements
Rank 1
answered on 21 Mar 2014, 02:21 AM
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
0
Daniel
Telerik team
answered on 24 Mar 2014, 11:42 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
DropDownList
Asked by
Wasae
Top achievements
Rank 1
Answers by
Daniel
Telerik team
danilopimentel
Top achievements
Rank 1
Share this question
or