Limit the text that is shown in kendo scheduler month view box

2 posts, 1 answers
  1. developer
    developer avatar
    58 posts
    Member since:
    Nov 2015

    Posted 10 Aug 2016 Link to this post

    I would like to limit the text inside my kendo scheduler month view as it is affecting other text elements inside the date box.

    Please refer the screen shot.

    I tried to use the below code of my event-template that identifies if the text length is greater that 10 then print "NA" which I'm not suppoed to do.Instead I would like to trim the word and display in the date box..


    <span class="bold"> #: kendo.toString(title.length>10 && title.slice(0,10) || title) # </span>   //not working

    <script id="event-template" type="text/x-kendo-template">
         <div style="background-color: #: kendo.toString(colorId, "hh:mm") #;height: 100%">
             <p class="bold">
               <span class="bold"> #: kendo.toString(title.length>10 && "NA" || title) # </span>
               <span> <small>(#: kendo.toString(start, "hh:mm") #)</span>-<span class="">(#: kendo.toString(end, "hh:mm") #) </<small></span>
                <span class="bold pull-right">   #: kendo.toString(trip.length) # Trips    </<span>
            <h3 style="background-color: #: kendo.toString(colorId, "hh:mm") #"> </h3>

  2. Answer
    Dimiter Topalov
    Dimiter Topalov avatar
    633 posts

    Posted 12 Aug 2016 Link to this post


    You can use the ternary operator in the eventTemplate to display either the initial title, or a modified one, depending on the initial title length, e.g.:

    Title: #=title.length > 10 ? title.substring(0, 7) + '...': title #

    I have prepared a simple example to illustrate the suggested approach:

    You can find out more information and examples on Kendo UI Templates in the following section of our documentation:

    I hope this helps.

    Dimiter Topalov
    Telerik by Progress
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
Back to Top