Initial Text for ComboBox with Remote DataSource

6 posts, 0 answers
  1. Curt
    Curt avatar
    3 posts
    Member since:
    Oct 2012

    Posted 09 Nov 2012 Link to this post

    I have a combox where the choices are driven by a remote datasource as follows:
            dataTextField: 'label',
            dataValueField: 'id',
            dataSource: {
                type: "json",
                serverFiltering: true,
                transport: {
                    read: {
                        url: 'api/getchoices,
                        data: {
                            filter: function(){
                                     return input.val();

    The comboxbox is also bound to a view model
    <input data-role="combobox" data-bind="value: id"/>
    My problem is that when the page initially loads, the combobox shows the value of the id field and not the label that corresponds to that id.  This is not an issue if I use a local array as the datasource, but the remote datasource is filtered based on user input and not designed to look up label based on id.

    In code (in the viewmodel actually) I have the value of the label corresponding to this id, and I would like it to appear when the form is loaded.

    I was thinking to possibly append an additional item (current id/label) onto the datasource list of choices, but I also don't want to query the remote datasource unless the user interacts with the control.

    What is a good way to have the combobox display the label when the page loads, but also not disturb the id value which is stored in the view model unless the user actually changes the control value?

    Also, can anyone comment the use of input.val() to feed my remote query.  I do want to use the value that the user has typed in, but am wondering if combobox has some built-in alternative to using input.val().
  2. Jayesh Goyani
    Jayesh Goyani avatar
    2733 posts
    Member since:
    May 2010

    Posted 17 Dec 2012 Link to this post


    Please try with below code snippet.
    // Nullable // Nullable show Placeholder's Text at initially loads
    public int? id { get; set; }
    //Not nullable Nullable show 0 at initially loads
    public int id { get; set; }

    Jayesh Goyani
  3. Chase Huber
    Chase Huber avatar
    5 posts
    Member since:
    Oct 2009

    Posted 21 Feb 2013 Link to this post

    I would also like to know how to do this. When the page first loads, I may have a value that I need to display in the ComboBox. What do I do with it so that I can later query the combo box and get the value back. This is not problematic if you are not using different properties for dataTextField and dataValueField. In short, how to initialize the combo box with a value?
  4. Georgi Krustev
    Georgi Krustev avatar
    3724 posts

    Posted 26 Feb 2013 Link to this post

    Hello Chase,

    The ComboBox allows to define text and value if the autoBind is set to false. Check text option for more information. In general you can initialize combobox if you set value option or set the value of the origin element.

    If this does not help, I will ask you to send us a simple jsFiddle/jsBin demo, which replicates the issue.

    All the best,
    Georgi Krustev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Subhi
    Subhi avatar
    1 posts
    Member since:
    Nov 2013

    Posted 26 Nov 2013 Link to this post

    Hi Jayesh Goyani,

    I've tried your sollution..
    It's works, if you just want to remove the 0 initial value..
    BUT.. it will get error when you save the value to database, because you set nullable property but it's also required (data anotation)..
  6. Jayesh Goyani
    Jayesh Goyani avatar
    2733 posts
    Member since:
    May 2010

    Posted 26 Nov 2013 Link to this post


    Please try with the below code snippet.
    public int? id { get; set; }


    Set Manually set validation using jQuery/JacaScript.

    Jayesh Goyani
Back to Top