简单的Kendo网格单元模板，不以“.”结尾的方式显示单元数据。还有一个按钮

Question

我希望在不使用多行和word包装模式下显示较长的文本单元格，而是以一种形式显示：|Alfred Fu... [mybutton]\x

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

​

​

我的自定义工作示例可以查看和编辑这里是Telerik dojo游乐场

我知道没有词包装可以通过CSS white-space: nowrap;实现，我也知道我应该使用列模板(.ClientTemplate("...")在ASP.MVC中)。我正在使用kendo模板基础设施，所以我的模板不是内联的。

该栏：

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

kendo模板(注意:使用引导3，通过maxcdn在工作样品中引用的内容)：

<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

我有种感觉(也许我错了)自动.呈现来自具有td的外部role=gridCell，并测量文本长度。所以没办法骗你了。...unless我们有一个专门的td和role=gridCell作为文本。我唯一能找出的方法是一个带有一行和两个单元格的嵌入式表。

以下是我的结论：见实际行动

风格：

<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>  

Answer 2

你可以解决这个问题，给出风格。像这样的css：

.widthStyle
{
     width: 50px;
     overflow: hidden; 
     white-space: nowrap; 
     text-overflow: ellipsis; 
     float:left;
}

和html：

<div class="widthStyle">
    #=text#   
</div>
<a href="" style="width:12px; float:left;" class=" btn btn-info btn-xs"> 
<span class="glyphicon glyphicon-zoom-in"></span></a>

这起作用了，链接