Hello,
I want to change ComboBox placeholder dynamically if there is no data return from api.
<!DOCTYPE html><html><head><title></title><link rel="stylesheet" href="styles/kendo.common.min.css" /><link rel="stylesheet" href="styles/kendo.default.min.css" /><link rel="stylesheet" href="styles/kendo.default.mobile.min.css" /><script src="js/jquery.min.js"></script><script src="js/kendo.all.min.js"></script></head><body><div id="example"><div class="demo-section k-content"><h4>Find a product</h4><input id="products" style="width: 100%;" /><div class="demo-hint">Hint: type at least three characters. For example "che".</div></div><script> $(document).ready(function() { $("#products").kendoComboBox({ placeholder: "Select product", dataTextField: "ProductName", dataValueField: "ProductID", filter: "contains", autoBind: false, minLength: 3, dataSource: { type: "odata", serverFiltering: true, transport: { read: { url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products",}}}});});</script></div></body></html>
if Above url not return any data then I want to change my Placeholder to "Try Again".
1 Answer, 1 is accepted
The functionality you are looking for can be achieved by using the dataBound event of the ComboBox widget. That will allow you to change the value of the placeholder manually in case there are no matches to the product you are searching for. The dataBound event should look like this:
dataBound: function(e){ var combo = e.sender; var dataSource = combo.dataSource; var data = dataSource.data(); var numberOfItems = data.length; var comboInput = combo.input; if(numberOfItems === 0){ //check if there are matches to what you are searching comboInput.attr("placeholder", "Try Again"); } else { comboInput.attr("placeholder", "Select product"); }}You would also need to set the enforceMinLength property of the ComboBox to true. That would prevent the widget to populate its dropdown with all items, when the filter has been cleared. A complete example of the mentioned above you could find on this link: https://dojo.telerik.com/IKUPebON/3. Note that the above implementation will reset the placeholder to its original value (Select Product), when matching items are found.
In case you want to change the content of the dropdown field, when no data is present, you could change the value of the noDataTemplate property.
I hope this will prove useful to you. Please do not hesitate to contact us in case you have further questions.
Regards,
Martin
Progress Telerik