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. 

I'm creating the grid in # and it's throwing me a javascript undefined error. I'm not sure what I'm doing wrong.

 gridModel.Columns.Add(new GridColumn
                                      {
                                          Key = "Description",
                                          HeaderText = "Name",
                                          DataType = "string",
                                          FormatterFunction = "replaceLineBreaks('${Description}')",
                                          Width = "450px"
                                      });

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

Hello Jessica,

Try with the following code:

Controller code:
gridModel.Columns.Add(new GridColumn
{
Key = "Description",
HeaderText = "Name",
DataType = "string",
FormatterFunction = "replaceLineBreaks",
Width = "450px"
});

View code:
<script type="text/javascript">
function replaceLineBreaks(val) {
return val.replace(/\n/g, "<br/>");
}
</script>

Hope this helps,
Martin Pavlov
Infragistics, Inc.