I am using kendodropdown. I used optionLabel = "Actions" and it is displayed as an option in the dropdown how do I ignore it as a value in dropdown.

Is there a way where we can stop or hide optionLabel in kendo dropdownlist to be displayed as an option in the dropdown.

var $dropdownElement = $("<input />");

$dropdownElement.appendTo($dropdownContainer);
$dropdownElement.kendoDropDownList({
        dataTextField: "text",
        dataValueField: "value",
        dataSource: dropdown.items,
        optionLabel: 'Actions'
})

As of now Actions is displayed as an option in the dropdown please help me to ignore it as a value in dropdown.

I am using kendodropdown. I used optionLabel = "Actions" and it is displayed as an option in the dropdown how do I ignore it as a value in dropdown.

Is there a way where we can stop or hide optionLabel in kendo dropdownlist to be displayed as an option in the dropdown.

var $dropdownElement = $("<input />");

$dropdownElement.appendTo($dropdownContainer);
$dropdownElement.kendoDropDownList({
        dataTextField: "text",
        dataValueField: "value",
        dataSource: dropdown.items,
        optionLabel: 'Actions'
})

As of now Actions is displayed as an option in the dropdown please help me to ignore it as a value in dropdown.

• javascript
• angularjs
• kendo-ui
• kendo-dropdown

• (As per my knowledge) It is default functionality of drop down list we can not change it. – Jayesh Goyani Commented Oct 29, 2015 at 6:05

2 Answers 2

This is the solution that worked well, I am hiding the first element when I click the dropdown.

var $dropdownElement = $("<input />");

$dropdownElement.appendTo($dropdownContainer);
$dropdownElement.kendoDropDownList({
        dataTextField: "text",
        dataValueField: "value",
        dataSource: dropdown.items,
        optionLabel: 'Actions',
        open: function () { $($dropdownElement).getKendoDropDownList().list.find("li.k-item").first().hide(); 
                }
})

I am extending from @Shashi's answer and @MarkosyanArtur's ment in the same answer. The open event fires every time the user tries to expand the DropDown list. Why not use dataBound event instead? Also, an additional tit-bit, the this specifier links to the ddl itself, therefore;

var $dropdownElement = $("<input />");

$dropdownElement.appendTo($dropdownContainer);
$dropdownElement.kendoDropDownList({
        dataTextField: "text",
        dataValueField: "value",
        dataSource: dropdown.items,
        optionLabel: 'Actions',
        dataBound: function () { this.element.getKendoDropDownList().list.find(".k-list-optionlabel").hide(); }
})