I want to display only 100 characters in Kendo Grid
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
http://docs.telerik.com/kendo-ui/getting-started/framework/templates/overview#internal-vs-external-templates
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.
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.