Line breaks in grid data

5 posts, 1 answers
  1. Mark
    Mark avatar
    93 posts
    Member since:
    Jul 2014

    Posted 30 Dec 2015 Link to this post

    Hi,

    I'm using a client row template to style my grid which is created as follows:

     

    @(Html.Kendo().Grid<TEAMSV2.Models.JobLogNoteDTO>()
        .Name("jobLogGrid")
        .DataSource(datasource => datasource
            .Ajax()
            .Read(read =>
            {
                read.Action("GetJobLogNotes", "TeamsV2").Type(HttpVerbs.Post);
            })
            .Sort(sort => sort.Add("DateCreated").Descending())
            .PageSize(10)
        )
        .Columns(columns =>
        {
            columns.Bound(note => note.ItemNo).Title("Ref.").Width(60);
            columns.Bound(note => note.DateCreated).Title("Note Recorded").Width(110);
            columns.Bound(note => note.NoteHtml).Title("Description").Encoded(false);
            columns.Bound(note => note.Employee).Title("Employee").Width(110);
        })
        .HtmlAttributes(new { style = "max-height:496px; height:496px;" })
        .Scrollable()
        .Sortable()
        .Pageable()
        .ClientRowTemplate(Html.Partial("JobLog/JobLogTab/JobLogNotesGridTemplate").ToHtmlString())
        .Events(e => e.DataBound("JobLogNotesDatabound"))
    )

    The row template is as follows:

    <tr>
        <td>
            <a href="/TeamsV2/Search?search=#:data.ItemNo#" style="text-decoration:underline;">#:data.ItemNo#</a>
        </td>
        <td>
            #: kendo.toString(data.DateCreated, 'd MMM yyyy HH:mm')#
        </td>
        <td>
            #: data.NoteHtml#
        </td>
        <td>
            #: data.Employee#
            <br />
            <div class="JobLogEmployeePhoto" data-id="#: data.EmployeeID#">
            </div>
        </td>
    </tr>

    The value of "data.NoteHtml" contains "/n" for line breaks as it was inserted via a TextArea.  These /n's are not showing as line breaks in the grid.  I've tried replacing them with HTML so the data contains <br> tags instead but they still do not show.

     My main question is this:  If I modify the data so that the string acxtually contains HTML markup for <BR> or <BR></BR> or <BR /> how can I get the client row template to treat this as HTML instead of just as a string.

     I've set Encoded(false) for the column but still no joy.

    Thanks,

    Mark.

     

     

  2. Answer
    Kostadin
    Admin
    Kostadin avatar
    1733 posts

    Posted 04 Jan 2016 Link to this post

    Hi Mark,

    Thank you for contacting us.

    I would suggest you to try replacing the line breaks "\n" with a "<br>" tag on the client.
    #= changeNewLine(data.NoteHtml) #
    ..........
     function changeNewLine(text) {
            var regexp = new RegExp('\n', 'g');
            return text.replace(regexp, '<br>');
        }

    Please give this suggestion a try and let me know about the result.

    Regards,
    Kostadin
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Mark
    Mark avatar
    93 posts
    Member since:
    Jul 2014

    Posted 04 Jan 2016 in reply to Kostadin Link to this post

    Worked a treat, thank you.
  4. Richard Lewis
    Richard Lewis avatar
    7 posts
    Member since:
    Nov 2009

    Posted 21 Feb Link to this post

    This works well in the grid, but when I do an export to excel using the built-in grid export feature, the <br> tags appear in the excel data. How do I create new lines in the Kendo MVC UI Grid which work well in the grid, and also show new lines in excel cells without the <br> tag appearing in excel?

  5. Stefan
    Admin
    Stefan avatar
    829 posts

    Posted 23 Feb Link to this post

    Hello Richard,

    As stated in our documentation, exporting of the templates is not supported out of the box, as the Grid will be exported based on the data and the columns:

    http://docs.telerik.com/kendo-ui/controls/data-management/grid/excel-export#excel-export

    If modifications are needed in the exported document, please check the article demonstrating how this can be achieved on the excelExport event:

    http://docs.telerik.com/kendo-ui/controls/data-management/grid/excel-export#excel-customization

    Regards,
    Stefan
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top