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

Question

我想在非多行和自动换行模式下显示较长的文本单元格，而不是在以下形式中：|Alfred Fu... [mybutton]|

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

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

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

栏目：

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

kendo模板（注：使用bootstrap 3、working sample via 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

你可以解决这个问题，给样式。像这样 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>

这是有效的，link

Answer 2

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

这是我结束的内容：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>

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

Simple Kendo grid cell Template to display cell data in no wrapped way with ending '...' and a button

html

javascript

css

twitter-bootstrap

kendo-ui