Binding Remote Data to a KendoUI combobox

4 posts, 0 answers
  1. Dileep
    Dileep avatar
    1 posts
    Member since:
    Feb 2012

    Posted 03 Jun 2014 Link to this post

    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>







  2. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 05 Jun 2014 Link to this post

    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.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Daniel
    Daniel avatar
    34 posts
    Member since:
    Feb 2011

    Posted 26 Aug 2014 in reply to Daniel Link to this post

    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
  5. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 28 Aug 2014 Link to this post

    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.

     
Back to Top
UI for ASP.NET MVC is VS 2017 Ready