Kendo ui 我只想在剑道网格中显示100个字符

好吧，我没有更好的标题，但事情是这样的。 我刚刚要求改变我的剑道格网。这是它的照片

{ field: "description", title: "Description", width: 140,template:function(dataItem){

        if(dataItem.description.length>100){
            return dataItem.description.substring(0,20);
        }else{
            return dataItem.description;
        }

} },

{ field: "description", title: "Description", width: 140,template:function(dataItem){

        if(dataItem.description.length>100){
            return dataItem.description.substring(0,20);
        }else{
            return dataItem.description;
        }

} },

这是代码

@(Html.Kendo().Grid<TekstenViewModel.Tekst>()
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Template(@<text></text>).ClientTemplate("<input type='checkbox'/>").Width(10).Hidden(!Model.Administrator);

        columns.Bound(product => product.RESOURCE_SET_NAAM).ClientTemplate("#= RESOURCE_SET_NAAM#");

        columns.Bound(product => product.Naam).ClientTemplate("#= Naam#");

        columns.Bound(product => product.Waarde).ClientTemplate("<div id='editorDiv'><div class='input'>#=Waarde#</div><div class='editor'>" +
            Html.WebCore().LinkButton(type: ButtonType.Edit, htmlAttributes: new { onclick = "openPopupDemo('#: Waarde #', '#: ID #', 'Waarde')" }));

        columns.Bound(product => product.Opmerking).ClientTemplate("<div id='editorDiv'><div class='input'>#=Opmerking#</div><div class='editor'>" +
            Html.WebCore().LinkButton(type: ButtonType.Edit, htmlAttributes: new { onclick = "openPopupDemo('#: Opmerking #', '#: ID #', 'Opmerking')" }));

        columns.Template(@<text></text>).ClientTemplate("<div id='deleteDiv'><div class='delete'><a class=\"delete iconBtn\" onclick=\"deleteResourceItem(#: ID #, '#: Naam #')\"></a></div></div>").Width(10).Hidden(!Model.Administrator);
    })
    .Pageable()
    .Sortable()
    .Filterable()
    .Events(events => events.Edit("onCellEdit").DataBinding("onDataBinding"))
    .Groupable()
    .Navigatable()
    .Editable(editable => editable.Mode(GridEditMode.InCell).DisplayDeleteConfirmation(false))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Batch(true)
        .Events(e => e.Error("error_handler"))
        .Model(model =>
        {
            model.Id(product => product.ID);
            model.Field(product => product.Naam).Editable(Model.Administrator);
            model.Field(product => product.Opmerking).Editable(Model.Administrator);
            model.Field(product => product.Waarde).Editable(!Model.ReadOnly);
            model.Field(product => product.RESOURCE_SET_ID).DefaultValue(Model.SetID);
            model.Field(product => product.Type).DefaultValue(Domain.Agromilieu2.Common.Objects.Entities.Resources.ResourceType.GLOBAL_RESOURCES);
            model.Field(product => product.Taal).DefaultValue(Domain.Agromilieu2.Common.Agromilieu2Constants.Resources.DEFAULT_TAAL_CODE);
        })
        .Create(create => create.Action(MVC.BeheerTeksten.ActionNames.ResourceItems_Create, MVC.BeheerTeksten.Name).Data("onCreateAdditionalData"))
        .Read(read => read.Action(MVC.BeheerTeksten.ActionNames.ResourceItems_Read, MVC.BeheerTeksten.Name, new { setID = Model.SetID }).Data("onReadAdditionalData"))
        .Update(update => update.Action(MVC.BeheerTeksten.ActionNames.ResourceItems_Update, MVC.BeheerTeksten.Name))
        .Destroy(destroy => destroy.Action(MVC.BeheerTeksten.ActionNames.ResourceItems_Delete, MVC.BeheerTeksten.Name))
        )
)

{ field: "description", title: "Description", width: 140,template:function(dataItem){

        if(dataItem.description.length>100){
            return dataItem.description.substring(0,20);
        }else{
            return dataItem.description;
        }

} },

@（Html.Kendo（）.Grid（））
.名称（“网格”）
.列（列=>
{
columns.Template（@）.ClientTemplate（“”）.Width（10）.Hidden（！Model.Administrator）；
columns.Bound（product=>product.RESOURCE_SET_NAAM）.ClientTemplate（“#=RESOURCE_SET_NAAM”）；
columns.Bound（product=>product.Naam）.ClientTemplate（“#=Naam”）；
columns.Bound（product=>product.Waarde）.ClientTemplate（“#=Waarde#”+
Html.WebCore（）.LinkButton（类型：ButtonType.Edit，htmlAttributes:new{onclick=“openPopupDemo（'#：Waarde#'，'#：ID#'，'Waarde'）”）；
columns.Bound（product=>product.Opmerking）.ClientTemplate（“#=Opmerking#”+
Html.WebCore（）.LinkButton（类型：ButtonType.Edit，htmlAttributes:new{onclick=“openPopupDemo（'#：Opmerking'，'#：ID#'，'Opmerking'）”）；
columns.Template（@）.ClientTemplate（“”）.Width（10）.Hidden（！Model.Administrator）；
})
.Pageable（）
.Sortable（）
.可过滤（）
.Events（Events=>Events.Edit（“onCellEdit”）.DataBinding（“onDataBinding”））
.Groupable（）
.Navigatable（）
.Editable（Editable=>Editable.Mode（GridEditMode.InCell）.DisplayDeleteConfirmation（false））
.DataSource（DataSource=>DataSource
.Ajax（）
.Batch（真）
.Events（e=>e.Error（“错误处理程序”））
.Model（Model=>
{
model.Id（product=>product.Id）；
model.Field（product=>product.Naam）.可编辑（model.Administrator）；
model.Field（product=>product.Opmerking）.可编辑（model.Administrator）；
model.Field（product=>product.Waarde）.可编辑（！model.ReadOnly）；
model.Field（product=>product.RESOURCE\u SET\u ID）.DefaultValue（model.SetID）；
model.Field（product=>product.Type）.DefaultValue（Domain.Agromilieu2.Common.Objects.Entities.Resources.ResourceType.GLOBAL\u Resources）；
model.Field（product=>product.Taal）.DefaultValue（Domain.Agromilieu2.Common.Agromilieu2Constants.Resources.DEFAULT\u Taal\u代码）；
})
.Create（Create=>Create.Action（MVC.BeheerTeksten.ActionNames.ResourceItems_Create，MVC.BeheerTeksten.Name）.Data（“onCreateAdditionalData”））
.Read（Read=>Read.Action（MVC.BeheerTeksten.ActionNames.ResourceItems_Read，MVC.BeheerTeksten.Name，new{setID=Model.setID}）.Data（“onReadAdditionalData”））
.Update（Update=>Update.Action（MVC.BeheerTeksten.ActionNames.ResourceItems_Update，MVC.BeheerTeksten.Name））
.Destroy（Destroy=>Destroy.Action（MVC.beheertek.ActionNames.ResourceItems_Delete，MVC.beheertek.Name））
)
)

例如，在Waarde列中，每个单元格中都有文本和按钮。 该按钮将打开一个包含该文本的剑道编辑器

{ field: "description", title: "Description", width: 140,template:function(dataItem){

        if(dataItem.description.length>100){
            return dataItem.description.substring(0,20);
        }else{
            return dataItem.description;
        }

} },

{ field: "description", title: "Description", width: 140,template:function(dataItem){

        if(dataItem.description.length>100){
            return dataItem.description.substring(0,20);
        }else{
            return dataItem.description;
        }

} },

---

要求我在单元格中最多显示100个字符，然后在我打开剑道编辑器时显示全文。我不知道这是否可行。

你当然可以，我看到你有专栏的客户端模板，将此添加为模板

#if(Waarde.length>100){# # var myContent =Waarde; #  # var dcontent = myContent.substring(0,100); # <span>#=kendo.toString(dcontent)#</span> #}else{# <span>#=Waarde#</span> #}#

{ field: "description", title: "Description", width: 140,template:function(dataItem){

        if(dataItem.description.length>100){
            return dataItem.description.substring(0,20);
        }else{
            return dataItem.description;
        }

} },

#if（Waarde.length>100）{#var myContent=Waarde；#var dcontent=myContent.substring（0100）；#=kendo.toString（dcontent）#else{#

注意：未测试，可能需要稍微检查一下模板

{ field: "description", title: "Description", width: 140,template:function(dataItem){

        if(dataItem.description.length>100){
            return dataItem.description.substring(0,20);
        }else{
            return dataItem.description;
        }

} },

添加任何其他HTML你喜欢它的剑道模板，如果还有，更多信息请查看文档

{ field: "description", title: "Description", width: 140,template:function(dataItem){

        if(dataItem.description.length>100){
            return dataItem.description.substring(0,20);
        }else{
            return dataItem.description;
        }

} },

---

编写ClientTemplate的另一种方法是对逻辑使用javascript函数

{ field: "description", title: "Description", width: 140,template:function(dataItem){

        if(dataItem.description.length>100){
            return dataItem.description.substring(0,20);
        }else{
            return dataItem.description;
        }

} },

这样可以避开复杂的hashtag系统

{ field: "description", title: "Description", width: 140,template:function(dataItem){

        if(dataItem.description.length>100){
            return dataItem.description.substring(0,20);
        }else{
            return dataItem.description;
        }

} },

首先定义函数：

<script type="text/javascript">
    function getTheSubstring(value, length)
    {
        if (value.length > length)
            return kendo.toString(value.substring(0, length)) + "...";
        else return kendo.toString(value);
    }
</script>

columns.Bound(p => p.Value).ClientTemplate("#:getTheSubstring(data.Value,40)#");

{ field: "description", title: "Description", width: 140,template:function(dataItem){

        if(dataItem.description.length>100){
            return dataItem.description.substring(0,20);
        }else{
            return dataItem.description;
        }

} },

---

有效且经过测试。

只是为了提供一个替代方案，尽管如果您确实需要固定数量的字符，那么这里的其他答案会更好。但是，如果您只是在列中的有限宽度之后，没有使用省略号表示更多数据的换行符，那么您也可以使用css来实现这一点

.k-grid td{
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width : 200px;
}

.k-grid table {
    table-layout: fixed;
}

{ field: "description", title: "Description", width: 140,template:function(dataItem){

        if(dataItem.description.length>100){
            return dataItem.description.substring(0,20);
        }else{
            return dataItem.description;
        }

} },

当然，这将以所有网格单元为目标，因此如果您只想以一列为目标，那么在JavaScript中定义网格时，为该列设置css类

$("#grid").kendoGrid({
    columns: [{ field: "Id", hidden: true },
        { field: "Name", title: "Name" },
        { field: "LongData", title: "Main Content", attributes: { "class": "myColClass" } }
    ],
    dataSource: {}
});

{ field: "description", title: "Description", width: 140,template:function(dataItem){

        if(dataItem.description.length>100){
            return dataItem.description.substring(0,20);
        }else{
            return dataItem.description;
        }

} },

然后返回css以设置类：

 .myColClass {
    max-width : 200px;
    background-color : azure;
}

{ field: "description", title: "Description", width: 140,template:function(dataItem){

        if(dataItem.description.length>100){
            return dataItem.description.substring(0,20);
        }else{
            return dataItem.description;
        }

} },

避免任何额外的JavaScript代码和模板中复杂的hashtag系统。即使列或网格的大小变小，它也将保持为单线列。

试试这个

{ field: "description", title: "Description", width: 140,template:function(dataItem){

        if(dataItem.description.length>100){
            return dataItem.description.substring(0,20);
        }else{
            return dataItem.description;
        }

} },

---

工作起来很有魅力。这是最好的答案，因为如果你正在编辑一些东西，它会像预期的那样工作！