点击图片显示kendo dropdownlist popup

问题描述：

是否可以点击图标/图片，然后让kendo下拉列表出现在他的图标/图片下方？点击图片显示kendo dropdownlist popup

（换句话说，我只想做使用下拉列表的弹出窗口，我想输入编辑器被隐藏，并用图像替换它，当用户点击图像弹出下拉列表应该会出现）

我来解决最接近的是隐藏输入元素

<div style="display:none;"> <input id="dropdownlist"/> </div>

，并点击图像/图标，当我打开下拉列表剑道弹出

$("#dropdownlist").data("kendoDropDownList").open();

与此问题是，弹出式菜单显示在左上角，我还没有找到一种方法使弹出窗口出现在图标/图像下方。

您正在使用哪个版本的剑道？ –

答

这里是一小段代码，可能适合您的需要：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"/> 
    <title>Kendo UI Snippet</title> 

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css"/> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css"/> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css"/> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css"/> 

    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script> 
    <script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script> 
</head> 
<body> 

    <div style="position: absolute; visibility: hidden;"> 
    <input id="dropdownlist" style="height: 100px;" /> 
    </div> 

    <img src="https://cdn2.scratch.mit.edu/get_image/gallery/1778374_200x130.png" style="height: 100px; position: absolute;" onclick="$('#dropdownlist').data('kendoDropDownList').open()" /> 
<script> 
$("#dropdownlist").kendoDropDownList({ 
    dataSource: [ 
    { id: 1, name: "Apples" }, 
    { id: 2, name: "Oranges" } 
    ], 
    dataTextField: "name", 
    dataValueField: "id", 
    index: 1 
}); 
</script> 
</body> 
</html>

注意，图像高度，并且下拉高度应该是相同的。

点击图片显示kendo dropdownlist popup

相关推荐