CODEWITHSUNDEEP
htmlkendo-ui
chan
chan

Reputation: 274

Set default text in dropdown options

I want to set a default text on dropdown menu which is disabled and can not let users select. 

<select kendo-drop-down-list  style="width: 28rem;">
  <option selected="selected" disabled="disabled" >State</option>
  <option>Azerbaijan</option>
  <option>Belarus</option>
</select>

The problem is when I set selected and disabled it doen not show state option in dropdown menu. Can someone help me out.Thanks in advance

Upvotes: 2

Views: 1688

Answers (2)

Rion Williams
Rion Williams

Reputation: 76557

Update

The issue here is being caused by the use of the Kendo DropDownList component, which when instantiated is going to remove any disabled elements from the collection of items in the list.

Since Kendo doesn't support this behavior, you can implement it yourself using the following hack that involves explicitly disabling that option after instantiating the component :

<select id='state' kendo-drop-down-list  style="width: 28rem;">
    <option>State</option>
    <option>Azerbaijan</option>
    <option>Belarus</option>
</select>
<script>
$(function(){
    // Instantiate the drop down
    $('#state').kendoDropDownList();
    // Explicitly disable the first element
    $("#state_listbox .k-item")[0].disabled = true;
});
</script>

You can see a working snippet of this below :

<!DOCTYPE html>
<html>
<head>
<link href="https://da7xgjtj801h2.cloudfront.net/2015.2.624/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="https://da7xgjtj801h2.cloudfront.net/2015.2.624/styles/kendo.silver.min.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://da7xgjtj801h2.cloudfront.net/2015.2.624/js/kendo.ui.core.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Kendo Snippet Example</title>
</head>
<body>
  <select id='state' kendo-drop-down-list  style="width: 28rem;">
    <option>State</option>
    <option>Azerbaijan</option>
    <option>Belarus</option>
  </select>
  <script>
    $(function(){
        $('#state').kendoDropDownList();
        // Explicitly disable the first element
        $("#state_listbox .k-item")[0].disabled = true;
    });
  </script>
</body>
</html>

Original Response (Not Pertaining to Kendo)

Have you tried setting the placeholder attribute to "State"?

<select kendo-drop-down-list  style="width: 28rem;" placeholder='State'>
   <option selected disabled="disabled" >State</option>
   <option>Azerbaijan</option>
   <option>Belarus</option>
</select>

which would set the default display text to "State", however it would not allow it to explicitly be selected afterwards :

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<select kendo-drop-down-list  style="width: 28rem;" placeholder='State'>
  <option selected disabled="disabled" >State</option>
  <option>Azerbaijan</option>
  <option>Belarus</option>
</select>
</body>
</html>

Additionally, if the issue is due to Kendo-related styles being applied to the element, you can explicitly set this default "placeholder" by using the optionLabel attribute when instantiating your Kendo Dropdown :

$('[kendo-drop-down-list').kendoDropDownList(){
      /* Other configuration here */
      optionLabel: 'State'
}

Upvotes: 2

Jwags
Jwags

Reputation: 502

I am a bit confused on what you mean. When I tested the code, it did display the "State" option, which is what it sounded like you want.

if you don't want the state to appear in the drop down as an option, try this:

<select kendo-drop-down-list  style="width: 28rem;">
  <option selected="selected" disabled="disabled" style="display: none;">State</option>
  <option>Azerbaijan</option>
  <option>Belarus</option>
</select>

here is a fiddle

Upvotes: 1

Related Questions