how do i put line breaks inside iggrid

my iggrid takes in data that has line breaks but it just shows up as one line. how can I make it multi-line with respect to the line breaks?

Hello Jessica,

The grid data is rendered as pure HTML, so you'll need to use <br/> tag instead of line breaks.

One way to achieve this is to use column formatter function and replace the "\n" character with "<br/>".

Here is an example code:

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

Hope this helps,
Martin Pavlov
Infragistics, Inc. 

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. 

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.

Hello Jessica,

Can you post some example data which is populated in the Description column.
You can also try to use the following code:

FormatterFunction = "function(val) {return val.replace('&lt;br/&gt;', '<br/>');}",

Best regards,
Martin Pavlov
Infragistics, Inc. 

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. 

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.