Kendo ui “获取”按钮显示在悬停时KendoComboBox中的项目旁边_Kendo Ui_Kendo Combobox

Kendo ui “获取”按钮显示在悬停时KendoComboBox中的项目旁边

kendo-ui

Kendo ui “获取”按钮显示在悬停时KendoComboBox中的项目旁边,kendo-ui,kendo-combobox,Kendo Ui,Kendo Combobox,我试图在KendoComboBox列表中当前悬停的项目右侧显示一个按钮。这可能吗？我该怎么做呢（最终目标是，如果单击此按钮，相应的项目文本应成为可编辑字段。）我从以下内容开始，我一直在浏览，但我似乎找不到任何关于在列表中的某个项目旁边显示弹出按钮的内容（几乎就像侧面弹出菜单一样，只有一个项目，即KendoComboBox中每个项目的按钮）我在下面包含了我当前的原型代码。我可以让“licenseHoverButton”出现在列表项中，但我不知道如何让它出现在旁边 <html> &

我试图在KendoComboBox列表中当前悬停的项目右侧显示一个按钮。这可能吗？我该怎么做呢

（最终目标是，如果单击此按钮，相应的项目文本应成为可编辑字段。）

我从以下内容开始，我一直在浏览，但我似乎找不到任何关于在列表中的某个项目旁边显示弹出按钮的内容（几乎就像侧面弹出菜单一样，只有一个项目，即KendoComboBox中每个项目的按钮）

我在下面包含了我当前的原型代码。我可以让“licenseHoverButton”出现在列表项中，但我不知道如何让它出现在旁边

<html>
<head>
    <title></title>
    <link href="styles/kendo.common.min.css" rel="stylesheet" />
    <link href="styles/kendo.default.min.css" rel="stylesheet" />
    <script src="js/jquery-1.7.2.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
</head>
<body>

    <div id="example" class="k-content">

        <div class="demo-section">
            <h2>Licenses</h2>
            <input id="licenses" style="width: 400px;"/>
        </div>

        <script id="template" type="text/x-kendo-tmpl">
            <div class="licenseListItem">
                # if (data.expired) { #
                    <p class="licenseName">#=data.name# (Expired)</p>
                    <button class="licenseHoverButton">Remove</button>
                #} else { #
                    <p class="licenseName">#=data.name#</p>
                    <button class="licenseHoverButton">Rename</button>
                #} #
                <p class="licenseUsage">#=data.remaining#/#=data.total#GB</p>

            </div>
        </script>

        <script>
            $(document).ready(function() {

                var mydata = [{ "name":"License Name", "remaining":"24", "total":"60", "expired":false},
                                { "name":"1234-1234-1234-1234", "remaining":"60", "total":"60", "expired":false},
                                { "name":"Old License Name", "remaining":"2", "total":"60", "expired":true}];
                $("#licenses").kendoComboBox({
                    dataTextField: "name",
                    dataValueField: "name",
                    filter:"startswith",
                    template: kendo.template($("#template").html()),
                    dataSource: mydata
                });

                var combobox = $("#licenses").data("kendoComboBox");
            });

        </script>

        <style scoped>                
            .demo-section {
                width: 400px;
                padding: 30px;
            }
            .demo-section h2 {
                text-transform: uppercase;
                font-size: 1.2em;
                margin-bottom: 10px;
            }
            #licenses-list .k-item {
                overflow: hidden;
            }
            #licenses-list .k-item .licenseHoverButton{
                display: none;
            }
            #licenses-list .k-item.k-state-hover .licenseHoverButton {
                display: block;
            }
            #licenses-list .k-item.k-state-hover .licenseUsage {
                display: none;
            }
            #licenses-list p {
                margin: 0;
            }
        </style>
    </div>

</body>
</html>


执照
#如果（数据已过期）{#
#=data.name#（过期）
去除
#}否则{#
#=data.name#
改名
#} #
#=数据。剩余#/#=数据。总计#GB
$（文档）.ready（函数（）{
var mydata=[{“名称”：“许可证名称”，“剩余”：“24”，“总计”：“60”，“过期”：false}，
{“名称”：“1234-1234-1234-1234”，“剩余”：“60”，“总计”：“60”，“过期”：false}，
{“名称”：“旧许可证名称”，“剩余”：“2”，“总计”：“60”，“过期”：true}]；
$（“#许可证”）.kendoComboBox({
dataTextField:“名称”，
dataValueField:“名称”，
过滤器：“startswith”，
模板：kendo.template（$（“#template”）.html（），
数据源：mydata
});
var组合框=$（“#许可证”）.data（“kendoComboBox”）；
});
.演示部分{
宽度：400px；
填充：30px；
}
.演示部分h2{
文本转换：大写；
字体大小：1.2米；
边缘底部：10px；
}
#许可证列表。k项{
溢出：隐藏；
}
#许可证列表.k项.LicenseShover按钮{
显示：无；
}
#许可证列表.k-item.k-state-hover.LicenseShover按钮{
显示：块；
}
#许可证列表.k-item.k-state-hover.licenseUsage{
显示：无；
}
#许可证列表p{
保证金：0；
}

如何使用工具提示？（点击“删除”按钮，使其与项目对齐，但我猜这不是您想要的？）


改名
变量工具提示=$（'.licenseName'）。kendoTooltip({
位置：“对”，
内容：kendo.template（$（“#btnTemplate”）.html（）
}).数据（“kendoTooltip”）；

不幸的是，单击该按钮将关闭组合框。是否可以打开下拉列表，以便我可以编辑项目文本？（我指的是我在初始问题中提到的最终目标）工具提示不是一个有用的结果，因为我无法向工具提示中的按钮添加点击处理程序。试着在你的小提琴上添加以下几行，看看我的意思。$（'.licensehorvebutton'）。在（'click'，函数（e）{alert（'clicked'）；}）；

 <script id="btnTemplate" type="text/x-kendo-template">
                 <button class="licenseHoverButton">Rename</button>
    </script>

  var tooltip = $('.licenseName').kendoTooltip({
      position: "right",
       content: kendo.template($("#btnTemplate").html())
  }).data("kendoTooltip");