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>

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. 

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/>"

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. 

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.

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.