Binding Remote Data to a KendoUI combobox

[Dileep]

I have a simple controller which sends colored and Name. I want to bind  to a kendoUI combobox.   I am putting my sample code with this.

Controller

namespace KendoMVCStudy.Controllers
{
public class GetColorController : Controller
{
//
// GET: /GetColor/

public ActionResult Index()
{
Color _color = new Color();
List<Color> _colors = new List<Color>();

_color.Colorid = 1;
_color.Name = "White";

_colors.Add(_color);

_color.Colorid = 2;
_color.Name = "Black";

_colors.Add(_color);

return Json(_colors, JsonRequestBehavior.AllowGet);

//return View(_colors);
}




}
}

Model



using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace KendoMVCStudy.Models
{
public class Color
{
public int Colorid { get; set; }
public string Name { get; set; }
}
}

View

@model List<KendoMVCStudy.Models.Color>

@{
ViewBag.Title = "Index";
}

<h2>Index</h2>


<div class="demo-section">
<h2>Products</h2>

@(Html.Kendo().ComboBox()
.Name("products")
.DataTextField("Name")
.DataValueField("Colorid")
.HtmlAttributes(new { style = "width:250px" })
.Filter("contains")
.AutoBind(true)
.MinLength(3)
.DataSource(source => {
source.Read(read =>
{
read.Action("Index", "GetColor");
})
.ServerFiltering(true);
})
)
</div>

[Daniel]

Hello,

The same color instance is assigned twice and server filtering is enabled for the DataSource but is not implemented for the action method but this should not prevent the data from being bound. I attached a sample project with the provided code. Could you check it and let me know if I am missing something and if the data is bound on your side?

Regards,
Daniel
Telerik

 

 

[Daniel]

Hello

I am also having difficulties.   I think the key is REMOTE...

My scenario: 2 different solutions (websites)

I have a webforms app that has a WebApi controller to serve up Countries and states.  
I now have a new MVC project and and attempting to implement a combobox.    (note: I have succcessfully implemented the combobox where the data is coming from withing the project, but not from the webapi of the other project).

Here is the WebApi retrun method

public IEnumerable<CountryModel> GetCountries()<br> {<br>             IEnumerable<Country> countries =  countryRepository.GetCountries();<br>             List<CountryModel> listOfCountries = new List<CountryModel>(); <br> <br> <br>             foreach (Country country in countries)<br>             {<br>                 CountryModel countryModel = new CountryModel();<br>                 countryModel.CountryId = country.ID;<br>                 countryModel.Name = country.Name;<br>                 countryModel.Abbrev = country.Abbrev;<br>                 countryModel.Active = country.Active;<br> <br>                 listOfCountries.Add(countryModel);<br>             }<br> <br>             IEnumerable<CountryModel> countriesToReturn = listOfCountries;<br> <br>             return countriesToReturn;<br>        }

here is my combobox.  It redners but does not bind to the data

  

@(Html.Kendo().ComboBoxFor(m => m.CountryId)<br>                                      .HtmlAttributes(new { style = "width:300px" })<br>                                      .DataTextField("Name")<br>                                      .DataValueField("CountryId")<br>                                      .Placeholder(Labeling.PleaseSelect)                                     <br>                                      .Filter("contains")<br>                                      .AutoBind(true)<br>                                      .HighlightFirst(true)<br>                                      .Suggest(true)<br>                                      .IgnoreCase(true)                                      <br>                                      .DataSource(source =><br>                                      {<br>                                          source.Read(read =><br>                                          {<br>                                              read.Action("GetCountries", "http://localhost:50500/api/Country")<br>                                                  .Data("FilterCountries");<br>                                          })<br>                                          .ServerFiltering(false);<br>                                      })<br>                                )<br><br>

Thanks for any direction

[Daniel]

Hello Daniel,

If the service is in a different domain then you should either enable JSONP support for the Web API and use the DataSource Custom builder to specify that JSONP should be used:

.DataSource(source => source
    .Custom()
    .ServerFiltering(false)
    .Transport(transport => transport
        .Read(read =>
        {
            read.Url("http://localhost:50500/api/Country/GetCountries")
                .DataType("jsonp")
                .Data("FilterCountries");
        })
    )
)

or enable CORS for the service.

Regards,
Daniel
Telerik