javascript - 简单的 Kendo 网格单元格模板以无包装方式显示单元格数据，结尾为 '...' 和一个按钮

Question

我想在非多行和单词换行模式下显示更长的文本单元格，而不是以一种形式显示:|Alfred Fu... [mybutton] |

不幸的是，我无法解决如何在单元格内将结尾“...”和按钮保持在一行中:

可以查看和编辑我的自定义工作示例here in Telerik dojo playground

我知道CSS可以实现无自动换行white-space: nowrap;我也知道我应该使用列模板(ASP MVC 中的 .ClientTemplate("..."))。我正在使用剑道模板基础设施，所以我的模板不是内联的。

专栏:

columns: [{
    ...
}, {
    field: "CompanyName",
    title: "Company Name",
    width: 100,
    template: "#=getClientViewTemplate(data.CompanyName)#",
}, {
   ....
}]

kendo 模板(注意:使用 bootstrap 3，通过 maxcdn 在 working sample 中引用的内容):

<script type="text/kendo-template" id="clientViewTemplate">
<span style="white-space: nowrap;">
    #=text# 
    <a href="" style="float: right" class=" btn btn-info btn-xs"><span class="glyphicon glyphicon-zoom-in"></span></a>
</span>

以及模板提供者的 javascript 函数:

<script>
    function getClientViewTemplate(data) {
        var template = kendo.template($('#clientViewTemplate').html());
        var result = template({ text: data });
        return result;
    }
</script> 

我想保留那些“...”，同时我想将数据和按钮放在单元格中的一行中。我怎样才能做到这一点？

Answer 1

我感觉(也许我错了)自动...渲染来自 outer td，它有 role=gridCell ，并测量文本长度。所以骗术是无望的。 ...除非我们有一个专用的 td 和用于文本的 role=gridCell。我能想出的唯一方法是一个包含一行和两个单元格的嵌入式表格。

这是我结束的:see in action

风格:

<style>
    table.clientViewTemplate td span
    {
        white-space: nowrap;
    }
    table.clientViewTemplate td
    {
        border: 0px; // No border for our embedded table
        padding: 0px; // No padding for our embedded table
    }

    table.clientViewTemplate td:nth-child(2)
    {
         width: 24px; // TODO: The button width should not hardcoded
    }
</style>

模板:

<script type="text/kendo-template" id="clientViewTemplate">
    <table class="clientViewTemplate">
        <tr>
            <td role="gridCell">
                <span>
                    #=text#
                </span>
            </td>
            <td role="gridCell">
                <a href="" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-zoom-in"></span></a>
            </td>
        </tr>
    </table>
</script>