I want to display only 100 characters in Kendo Grid
Solution 1
Ya sure Can , I see you have Client Templates for the Column add this as the 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 , Might have to check the template a bit
Add any other HTML You like its a Kendo Template with IF ELSE , For more Info Check the Docs
Solution 2
Another way to write the ClientTemplate is to use a javascript function for the logic.
This way you evade the complex hashtag system.
First you define the 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 column ClientTemplate function:
columns.Bound(p => p.Value).ClientTemplate("#:getTheSubstring(data.Value,40)#");
Works and tested.
Solution 3
Just to offer an alternative, although if you really need a fixed number of characters then other answers here are better. But if you are simply after a limited width in a column without wrap with an ellipsis to indicate more data then you can also use css to achive this.
.k-grid td{
white-space: nowrap;
text-overflow: ellipsis;
max-width : 200px;
}
.k-grid table {
table-layout: fixed;
}
Of course that will target all grid cells so if you only want to target one column then set a css class for the column when you define your grid in your JavaScript.
$("#grid").kendoGrid({
columns: [{ field: "Id", hidden: true },
{ field: "Name", title: "Name" },
{ field: "LongData", title: "Main Content", attributes: { "class": "myColClass" } }
],
dataSource: {}
});
then back to css to set the class:
.myColClass {
max-width : 200px;
background-color : azure;
}
Avoids any extra JavaScript code and the complex hashtag system in templates. It also will stay as single line column even when the column or grid is resized smaller.
Rui Martins
Updated on August 14, 2022Comments
-
Rui Martins almost 2 years
Ok, I don't really have a better title, but here's the thing. I just had a requirement for a change in my kendo grid. Here's a picture of it.
And here's 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. That button opens a Kendo Editor with that text.
What was asked to do is display a maximum of 100 characters in the cell and then, as I open the Kendo Editor, to show the full text. I have no idea if this is even possible.