Label tag numeric text box

by krustev

HTML

<script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.default.min.css">
<label for="ddl">DropDownList: </label><select id="ddl" data-role="dropdownlist"><option>Value1</option><option>Value2</option> </select><br/></br>

//handle focus manually
<br/>
<label for="numeric">Number: </label><input id="numeric" data-role="numerictextbox"/><br/><br/>
<label for="combobox">ComboBox: </label><select id="combobox" data-role="combobox"><option>Value1</option><option>Value2</option> </select><br/><br/>
<label for="multiselect">MultiSelect: </label><select style="width:200px" multiple id="multiselect" data-role="multiselect"><option>Value1</option><option>Value2</option> </select>

CSS

.k-multiselect {
    display: inline-block;    
}

JavaScript

kendo.bind($('body'));

var roles = {
    numerictextbox: "kendoNumericTextBox",
    combobox: "kendoComboBox",
    multiselect: "kendoMultiSelect"
}

function getWidget(element) {
  var role = element.data("role");
  role = roles[role];
    
  if (role) {
     return element.data(role);
  }    
}

$("label").click(function() {
   var label = $(this),
       id = label.attr("for"),
       widget;

    if (id) {
        widget = getWidget($("#" + id));
        if (widget) { 
            widget.focus(); 
        }
    }
});