Kendo combobox is tied to an odate without looking at text for a set of values

Question

I have a standard kendo combo box that is bound to an odata data source. It looks great if you enter it and get the correct text and value.

However, if you have a related relationship and you set the .value () property in the code, the text does not get the search for the set value. (pretty standard behavior if you are loading existing data)

I would suggest that he would go to the server and look with the dataValueField property for the exact value and return the item specifically and set the text.

How do I get him to do this?

Answer 1

Lets have the following ComboBox :

 var combobox = $("#combobox").kendoComboBox({ dataTextField : "ProductName", dataValueField: "ProductID", dataSource : { type : "odata", transport: { read: "http://demos.kendoui.com/service/Northwind.svc/Products" } } }).data("kendoComboBox"); 

(you can use it yourself, as it refers to a service available on the Kendo user interface servers).

You can then use the following code snippets to set the value or text (whatever you prefer).

 // Set value of the ComboBox using dataValueField (ProductId) combobox.value(4); // Set value of the ComboBox using dataTextField (ProductName) combobox.text("Chef Anton Cajun Seasoning"); 

And for reading you should use:

 alert("Current text/value: " + combobox.text() + "/" + combobox.value()); 

Both methods work fine, as you can register here http://jsfiddle.net/OnaBai/64gXE/ .

Answer 2

You have to really kick this thing in ** to make it work. There are a million configurations, of which few seem to work

The WebAPI implementation of OData (4.5) and Telerik Datasource are really poorly combined. Here is my working version of the ComboBox on the client side:

 $("#dropdownlist").kendoComboBox({ optionLabel: " ", dataTextField: "name", dataValueField: "id", dataSource: { serverFiltering: true, transport: { read: { url: "/odata/MyService", 'type': 'Get' } }, schema: { parse: (response: any) => { var results = response.value; var items: any = []; for (var i = 0; i < results.length; i++) { items.push( { id: results[i].id, name: results[i].name, }); } return items; }, } } }); 

You will notice that I have to capture the data in the analysis method in the circuit object and massage it

My OData answer for reference:

Answer 3

I had this problem when re-binding the kendo quota. Basically I had to re-query the server as if the user had typed it. Then, as soon as the request is complete, I select the correct item using the previously selected value.

 var comboBoxElem = $("#controlNameHere"); comboBoxElem.kendoComboBox( { placeholder: "Start typing...", dataTextField: "yourDataTextField", // field used in the re-query due to 'contains' filter dataValueField: "yourDataValueField", filter: "contains", change: selectFunc, dataSource: { serverFiltering: true, pageSize: 20, transport: { read: { url: "http://yourUrlHere" } } } }); // the following code is all about re-selecting the previous value var comboBox = comboBoxElem.data('kendoComboBox'); var previousTextValue = 'text of the previous entry here'; var previousValue = '543'; comboBox.text(previousTextValue); // to show the user text while re-query takes place // reload previous item(s) from server, then re-select the desired item comboBox.dataSource.query({ filter: { operator: "contains", field: 'yourDataTextField', value: previousTextValue }, complete: function () { setTimeout(function () { comboBox.select(function (dataItem) { return dataItem.yourDataValueField == previousValue; }); }, 200); //allow the observable collection to be updated (no event I know of helps here :( } }); 

Hope this is clear enough, I modified the inline code to protect it so that the slightest syntax error may occur.

Remember that the filter that you use in the settings (settings) of the control must be the same as that you use for the second request for simplicity, otherwise you will get several filters arriving at the server.