I had <br/> tags in the database content that it pulls from, but it just displays "<br/>" instead of rendering it as an actual line break.

It renders as javascript in mine. I'm not sure if you meant the same thing.

<script type="text/javascript">$.ig.loader('igGrid.Paging.Resizing.Sorting', function() {$('#Grid1').igGrid({ dataSource: '/Products/GetContentData',autoGenerateColumns: false,autoGenerateLayouts: false,responseDataKey: 'Records', generateCompactJSONResponse: false, enableUTCDates: true, columns: [ { key: 'SKU', headerText: 'SKU', dataType: 'string', width: '150px' }, { key: 'ImageURL', headerText: 'Image', dataType: 'string', template: '<img src="${ImageURL}" style=\'width:100px;\' />', width: '110px' }, { key: 'Manufacturer', headerText: 'Manufacturer', dataType: 'string' }, { key: 'ProductType', headerText: 'Product Type', dataType: 'string' }, { key: 'Description', headerText: 'Name', dataType: 'string', template: '${Description}', width: '450px' }, { key: 'CoId', headerText: ' ', dataType: 'string', template: '<form action=\'/Orders/CreateOrderFromSku\' method=\'post\'><input type=\'hidden\' name=\'coId\' value=\'${CoId}\'/><input type=\'hidden\' name=\'partnerCoId\' value=\'${PartnerCoId}\'/><input type=\'hidden\' name=\'documentType\' value=\'Order\'/><input type=\'hidden\' name=\'portal\' value=\'true\'/><input type=\'hidden\' name=\'sku\' value=\'${SKU}\'/>{{if ${PartnerCoId} == 0 }}<input type=\'submit\' value=\'Add to Order\' disabled=\'disabled\' />{{else}}<input type=\'submit\' value=\'Add to Order\'/>{{/if}}</form>', width: '120px' }, { key: 'PartnerCoId', headerText: ' ', dataType: 'string', template: '<a href="/Products/ProductDetail?productId=${Id}&sku=${SKU}&partnerCoId=${PartnerCoId}" ><input type=\'button\' value=\'View Details\' /></a>', width: '120px' } ], features: [ { recordCountKey: 'TotalRecordsCount', pageIndexUrlKey: 'page', pageSizeUrlKey: 'pageSize', name: 'Paging', type: 'remote', pageSize: 10 }, { name: 'Resizing', allowDoubleClickToResize: true, deferredResizing: false }, { sortUrlKey: 'sort', sortUrlKeyAscValue: 'asc', sortUrlKeyDescValue: 'desc', name: 'Sorting', mode: 'single' } ], initialDataBindDepth: 0, primaryKey: 'SKU', width: '100%', height: '520px', localSchemaTransform: false });});</script>

Hi Jessica,

You see the "<br/>", because it is HTML encoded by the MVC framework. By default any submitted data is HTML encoded. 

What I wanted to say was that you should add a formatter property to the column which data needs to be split into line breaks.

Here is an example code for the "Description" column:

{
key: 'Description',
headerText: 'Name',
dataType: 'string',
//template: '${Description}',
width: '450px',
formatter: function(val) {
return val.replace(/\n/g, "<br/>");
}
}

This code will replace the new line character with the "<br/>" string. In your case if you have HTML encoded "<br/>" string then you may want to replace the "&lt;br/&gt;" string with "<br/>".

Hope this helps,
Martin Pavlov
Infragistics, Inc. 

So I got part of it working with this

gridModel.Columns.Add(new GridColumn

                                       {
                                          Key = "Description",
                                          HeaderText = "Name",
                                          DataType = "string",
                                          FormatterFunction = "function(val) {return val.replace(/\\r\\n/g, '&lt;br/&gt;');}",
                                          Width = "450px"
                                      });

However, the <br tag still shows up as "<br/>" and not as a line break. It's still coming in as HTML encoded.

This is actually the code, the <> got replaced somehow in the previous post. It's displaying as "<br/>"

gridModel.Columns.Add(new GridColumn
                                       {
                                          Key = "Description",
                                          HeaderText = "Name",
                                          DataType = "string",
                                          FormatterFunction = "function(val) {return val.replace(/\\r\\n/g, '<br/>');}",
                                          Width = "450px"
                                      });

In the database I had this separated with linebreaks

"blah
blah"

and this is how it comes in to the code

"blah\r\n   blah"

Hello Jessica,

You should check how this new line is serialized in the JSON string back in the browser. Keep in mind that the FormatterFunction code is executed in the browser.

Best regards,
Martin Pavlov
Infragistics, Inc. 

Hello Jessica,

My test showed that the actual serialized value in the browser is only "\n", so you should replace only "\n" and not "\r\n".

Hope this helps,
Martin Pavlov
Infragistics, Inc. 

This is my workaround :

- First, remove the FormatterFunction for desired column.

- Add a class in RowTemplate like : "<td class=\"applyMultilineFormater\">${MyColumnValue}</td>"

- Then, add a delegate to intercept the 'dataRendered' event.

$(document).delegate("#myMasterGridName", "iggriddatarendered", function (evt, ui) {
 $('.applyMultilineFormater').each(function () {
 $(this).html(MultilineFormater($(this).html()));
 });
 });

function MultilineFormater(val) {
 return val.replace(/\n/g, "<br/>");
 }

And it works !

Feel free to correct/update my code.

Thanks.

Hello,

I have exactly the same problem. My grid displays "<br/>" instead of a real line break.

And this is due to my RowTemplate: If I remove it, the formatter works.

Can you help me ?

Regards,

Maxime DRIVET.

Hi,

Do you have template configured for the column. If you have then remove it.

If this doesn't help, can you provide a sample for me to investigate.

Best regards,
Martin Pavlov
Infragistics, Inc. 

I don't think that's the problem. I think the problem is with the HTML encoding.

The line break IS SUCESSFULLY REPLACED with the break tag. The problem is that instead of the break tag being a line break, it's displayed as "<br/>"