This is a migrated thread and some comments may be shown as answers.

ComboBox PlaceHolder change dynamically.

1 Answer 193 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Bhautik
Top achievements
Rank 1
Bhautik asked on 16 Mar 2019, 12:08 PM

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

Sort by
1
Martin
Telerik team
answered on 19 Mar 2019, 02:37 PM
Hello Bhautik,

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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
ComboBox
Asked by
Bhautik
Top achievements
Rank 1
Answers by
Martin
Telerik team
Share this question
or