Is it possible to warn the user, when the disable items in the DropDownList are selected
Description:
We can able to show the “warning” message, when the disabled items in the DropDownList is hovered. This can be achieved by adding the additional span tag to the “li” elements of the DropDownList in the client side event called “create”.
Solution:
- Render the DropDownList as follows
JavaScript
<div class="control"> <div class="ctrllabel">Select your skill</div> <input type="text" id="skillsets" /> <button id="btn">Disable</button> </div>
<script type="text/javascript"> var target; $(function () { var skillset = [ { skill: "ASP.NET" }, { skill: "ActionScript" }, { skill: "Basic" }, { skill: "C++" }, { skill: "C#" }, { skill: "dBase" }, { skill: "Delphi" }, { skill: "ESPOL" }, { skill: "F#" }, { skill: "FoxPro" }, { skill: "Java" }, { skill: "J#" }, { skill: "Lisp" }, { skill: "Logo" }, { skill: "PHP" } ]; $('#skillsets').ejDropDownList({ dataSource: skillset, fields: { text: "skill" }, showCheckbox: true, enableFilterSearch: true, create : "myFunc" }); $("#btn").ejButton({ showRoundedCorner: true, size: "mini", click : "onClick" }); target = $('#skillsets').data("ejDropDownList"); }); </script> |
- Upon clicking to the Disable button, certain element in the DropDownList will be disabled.
JavaScript
function onClick(args){ target.disableItemsByIndices("1,3,5,7"); } |
- In the “create” event of DropDownList, we have appended the span element to the all items (li element) in the DropDownList.
JavaScript
function myFunc(args){ this._getLi().append($("<span class='e-msg e-icon'> </span>")); } |
- When hover to the disable items in the popup wrapper, the warning icon will be shown.
- In this example, we have used “font icon” for the warning message. Apply the following CSS
CSS
<style type="text/css" class="cssStyles"> .control { margin-left: 20px; }
#btn { margin-left: 200px; }
.ctrllabel { padding-top: 15px; }
.e-ddl-popup div > ul li.e-disable:hover > span.e-msg:before { float: right; margin-top: 5px; content: "\e64c"; color: red; } </style> |
