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.