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

Binding Remote Data to a KendoUI combobox

3 Answers 127 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Dileep
Top achievements
Rank 1
Dileep asked on 04 Jun 2014, 01:59 AM
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>







3 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 05 Jun 2014, 03:47 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Daniel
Top achievements
Rank 1
answered on 26 Aug 2014, 10:43 AM
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
0
Daniel
Telerik team
answered on 28 Aug 2014, 07:30 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
ComboBox
Asked by
Dileep
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Daniel
Top achievements
Rank 1
Share this question
or