I want to display only 100 characters in a kendo grid

Question

Well, I don't have a better name, but here's the thing. I just had a requirement to change my kendo grid. Here is his picture.

And here is the code.

@(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)) ) ) 

In the Waarde column, for example, we have text and a button in each cell. This button opens the Kendo editor with this text.

What was suggested to be done is to display a maximum of 100 characters in a cell, and then when I open the Kendo editor to show the full text. I don’t even know if this is possible.

Answer 1

I'm sure, maybe I can see that you have client templates for the column, add this as a template

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

NOTE. Not tested, you need to check the template a little

Add any other HTML. You like its Kendo template with IF ELSE, for more information. Check the documents.

http://docs.telerik.com/kendo-ui/getting-started/framework/templates/overview#internal-vs-external-templates

Answer 2

Another way to write a ClientTemplate is to use the javascript function for logic.

This way you avoid a complex hashtag system.

First you define a function:

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

Then you use it in the CustomerTemplate function of the column:

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

It works and is being tested.