Line breaks in grid data

[Mark]

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.

 

 

[Kostadin]

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

[Mark]

Worked a treat, thank you.

[Richard Lewis]

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]

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

[Milosz]

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]

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