Format text returned from JSON with line breaks

3 posts, 1 answers
  1. Answer
    Carl avatar
    8 posts
    Member since:
    Nov 2013

    Posted 02 Jan 2014 Link to this post

    Hello Kendo,

    I have a ToolTip widget that is receiving data returned from a JSON call. Here is the data call:

    public JsonResult GetCountsForSessions(int Id)
               //hard coded data call for testing
                string CountsForSessions = Id.ToString() +  "<br />";
                CountsForSessions += "Item 1 info <br />";
                CountsForSessions += "Item 2 Info <br />";            
                return this.Json(CountsForSessions, JsonRequestBehavior.AllowGet);            

    The ToolTip does display the correct data, but the <br> tags are ignored and the resulting text displayed in the ToolTip looks like:

    "1077 \u003cbr /\u003eItem 1 info\u003cbr /\u003eItem 2 Info3 \u003cbr /\u003e"

    With no like breaks. My goal is to get the data to display in the ToolTip like:

    Item 1 info
    Item 2 Info

    How can  achieve this formatting? Thanks for the help,


  2. Alexander Popov
    Alexander Popov avatar
    1436 posts

    Posted 03 Jan 2014 Link to this post

    Hi Carl,

    I am afraid that displaying JSON data is not supported out of the box. Although this behavior could be achieved using a custom solution, I would recommend you to use partial views, as demonstrated here. Your code might look like this: 
    //The Controller:
            public ActionResult GetItemsInfo()
                ViewBag.ID = 123;
                ViewBag.items = new[] {
                    "Item 1 info",
                    "Item 2 info",
                    "Item 3 info",
                return PartialView();
    //The GetItemsInfo.cshtml partial view: 
        @( <br />
        @foreach (var item in ViewBag.items){
                @item <br />
    //The view:
        .LoadContentFrom("GetItemsInfo", "Tooltip")

    Alexander Popov
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Carl
    Carl avatar
    8 posts
    Member since:
    Nov 2013

    Posted 03 Jan 2014 Link to this post

    Hi Alexander,

    Thanks for the reply and the suggested solution. I implemented your idea and all works well. 

    Thanks again,

Back to Top