0

我正在尝试在当前悬停的 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>
4

1 回答 1

0

使用 tooltip 怎么样？http://jsfiddle.net/vojtiik/BfyPf/1/ （“删除”按钮使其与项目一致，但我猜这不是你的意思吗？）

 <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");
于 2013-08-02T16:31:16.643 回答