Initial Text for ComboBox with Remote DataSource

[Curt]

I have a combox where the choices are driven by a remote datasource as follows:

input.kendoComboBox({

        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().

[Jayesh Goyani]

Hello,

Please try with below code snippet.

// Nullable // Nullable show Placeholder's Text at initially loads


public int? id { get; set; }

 

//OR

 

//Not nullable Nullable show 0 at initially loads


public int id { get; set; }

Thanks,
Jayesh Goyani

[Chase Huber]

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?

[Georgi Krustev]

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

[Subhi]

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)..

[Jayesh Goyani]

Hello,

Please try with the below code snippet.

[Required]
public int? id { get; set; }

OR

Set Manually set validation using jQuery/JacaScript.

Thanks,
Jayesh Goyani