Line breaks in grid data

1 Answer 5312 Views
Grid
Mark
Top achievements
Rank 1
Mark asked on 30 Dec 2015, 02:41 PM

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.

 

 

1 Answer, 1 is accepted

Sort by
1
Accepted
Kostadin
Telerik team
answered on 04 Jan 2016, 08:56 AM
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
Mark
Top achievements
Rank 1
commented on 04 Jan 2016, 10:12 AM

Worked a treat, thank you.
Richard Lewis
Top achievements
Rank 1
commented on 21 Feb 2017, 08:41 AM

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?

Stefan
Telerik team
commented on 23 Feb 2017, 08:55 AM

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.
Milosz
Top achievements
Rank 1
commented on 02 Jul 2021, 10:25 PM

I am running into the same issue when using #: # I would still like a way to preserve the new line characters and not allow encoding as I want to make sure there isn't any xss vulnerabilities. Any suggestions?
Anton Mironov
Telerik team
commented on 06 Jul 2021, 12:42 PM

Hi Milosz,

In order to achieve the desired behavior, I would recommend setting the "encoded" property of the column to false.

An example of the implementation could be found in this forum thread answer.

I hope this information helps.

Kind Regards,
Anton Mironov

Tags
Grid
Asked by
Mark
Top achievements
Rank 1
Answers by
Kostadin
Telerik team
Share this question
or