Change Value with javascript

[Micha]

Hy 

I've updated today to the final release of kendo ui, mostly without any problems! 

But either I have a new issue with the combobox. 
I have a combobox that is bound to a remote json data source. Depending on the user input, I have then to change the value of the combobox (I get the id from the server of the new value). The filtering of the combo and also the paging is done on serverside. So what I do on client side is, I call 

var combo = $(this).data("kendoComboBox");
combo.value(newValue);

This works fine as long as the option has already been loaded by the control. But If the value is changed to something that is not in the list that has been loaded when the page has been opened, the control will just display the value, but without the right caption.

So my next try was to use the refresh method. So first I set the value as described before, then I call refresh on the combo. Either this has exactly the same behaviour, no quering of the server if the option is unkown.

My last try was to use the search function, this method does correctly the filtering of the options on the server side, but  then it will always open the suggest box that i don't want to have... I know what it has to be! 

Any suggestions how I can avoid this behaviour? Must i use the datasource directly??


Thank you 
Micha 

[Micha]

Ok I have found a solution, but it looks more like a hack then a real solution 

var combo = $(this).data("kendoComboBox"); 

var refetchData = function() {

    var view = combo.dataSource.view();

    combo.value(field.val());

    combo.dataSource.unbind('change', refetchData);

};

 

combo.dataSource.bind('change', refetchData);

combo.dataSource.query({

    id: field.val(),

    filter: { operator: "eq", field: "id", value: field.val() }

});

[Georgi Krustev]

Hello Micha,

 
The ComboBox allows custom values. The value is a custom, when there is no corresponding option in the list. Refresh method only refresh the list of items and it will not initiate additional Ajax request.

If I understand you correctly, you need to re-fetch items on some condition and set the value. If this is the case, then using the query method of the DataSource is accepted.

If I am missing something, I will ask you to send us a simple test page, which replicates the problem. Thus I will be able to observe the issue locally and advice you further.

Best regards,
Georgi Krustev
the Telerik team

[Micha]

We may have to make a difference between where those options are located. 
So as an example. I have a ComboBox with 1000 Options... The Label of an Option is always Option + Index. 

Because of the huge amount of the options, I enable server filtering and paging for the combobox. 
So as an example, Paging is set to 10. On pageload the control will automaticlly load the first 10 Options, those are in this case the Options 0 -> Option 9. 

If I now change the value of the combobox to 500, I want that the dropdown displays the label of the Option with the value 500 (in this case Option 500). Then this option is in the option list of the combobox, its just not yet loaded. 

So the hack that I actualy use is, that I first set the filter that way, that the Option with the value 500 will be loaded. As soon as the options are loaded, I set the value of the combobox to 500 and than the control handles everything correct. 

So from my point of view, the combobox should load a label for a value from the server if paging or server filtering is enabled. 

[Georgi Krustev]

Hello Micha,

 
Thank you for the clarification. By design, the combobox will not refetch the data when setting the data using the API. I will add your request to our internal build for further consideration. If other users want such functionality we will schedule it for investigation. For now you will need to refetch the data manually and set the value on "change":

combo.dataSource
.one("change", function () {

}).query({

});

Regards,
Georgi Krustev
the Telerik team

[Frank]

Would you please send a complete example of this.

combo.dataSource
.one("change", function () {

}).query({

});

I am trying to build two cascading comboxes using webservices; however demo samples only use odata.
I would like to reload the values from the second combo using the selected value of  the first combo as the webservices method parameter.

Also, when my page opens in edit mode, I need to set the selected values for both comboboxes.

Thanks in advance,
Frank