Replies
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/>"
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"
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, '<br/>');}",
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.
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/>");
}
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>