Show / Hide columns programmatically

by OnaBai

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2013.2.716/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<script src="http://demos.kendoui.com/content/shared/js/people.js"></script>
<label>No ellipsis: <input id="list1" style="width: 100px" /></label><br/>
<label>With ellipsis: <input id="list2" style="width: 100px" /></label>

CSS

.ob-ellipsis li.k-item {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; 
    }

JavaScript

$("#list1").kendoDropDownList({
    dataSource: titles
});

var dd = $("#list2").kendoDropDownList({
    dataSource: titles
}).data("kendoDropDownList");
dd.list.addClass("ob-ellipsis");