1. Home
  2. Forum
  3. ASP.NET Core
  4. Grid Cells with New Line

Grid Cells with New Line

Hi,

I have a grid where some of the cells could have a newline character. (\n). When the grid renders it displays it all on the same line. How can I get the grid to display the cell with the line breaks?

This is how it is currently displaying:

Building Address
--------------------------
ABC 123
--------------------------
XYZ 987
-------------------------
etc

I would like it to display like this:

Building Address
----------------------------
ABC
123
---------------------------
XYZ
987
---------------------------
etc

I have attached a screen shot showing how it is currently displayed.

Thanks,
Chris

Attachment: newlineprob_d05545b1.zip

5 Replies
KM Kuralarasan Muthusamy Syncfusion Team March 15, 2018 02:29 PM UTC

Hi Chris, 

Thanks for contacting Syncfusion support.  
 
We have analyzed your query and we suggest you to add query-cell-info event of the grid to achieve your requirement. And we have prepared the sample with your requirement. 
 
Please refer the following code example: 
 
<ej-grid id="Grid" datasource=ViewBag.parent allow-paging="true" query-cell-info="query"> 
 
  ...... 
 
</ej-grid> 
<script type="text/javascript"> 
 
    function query(args) { 
        var data = $(args.cell).text().split(" "); 
        if (data.length >= 2) { 
                $(args.cell).html(data[0] + "</br>" + data[1]); 
        } 
    } 
</script> 

Please refer the following link to sample: 
 
 
Please refer the following link to know about query-cell-info: 
 
 
If you need further assistance please get back to us, 
 
Regards, 
Kuralarasan M.  


CH Chris March 15, 2018 05:56 PM UTC

Hi,

Thanks, I got it working with some modifications but now I have a new question.  The grid has quite a few columns and I would like to run the javascript only on some of them.  Is there a way in the Javascript to get the "field" out of the "args" parameter.  For example, lets say I have "" in the grid setup.  In the QueryCellInfo function I would like to be able to figure out if the cell is in the "MyFieldName" column before checking/replacing new lines.

I ended up changing the Javascript.  Here is what I did:

        function QueryCellInfo(args) {  
            // would like to put an if statement here to only continue based on the field name.
            var data = $(args.cell).text().split("\n");  // checking for "\n" instead of " "
            if (data.length >= 2) { 
               
// the suggested code was truncating the cell value if there was more then one newline. 
// I changed it to a loop so that it would display all the text and replace all the new lines with

                var newHtml = "";
                for (var i = 0; i < data.length; i++) {
                    if (newHtml != "") {
                        newHtml = newHtml + "
";
                    }
                    newHtml = newHtml + data[i];

                }
                $(args.cell).html(newHtml);               
            }
        }

KM Kuralarasan Muthusamy Syncfusion Team March 16, 2018 09:31 AM UTC

Hi Chris,  

We have analyzed your query and you want to use javascript for only which columns you want. We could see you already have args value in your sample. So you can use that args for get what column you want. For example args.column.field == “ShipCity”. In this example it takes only ShipCity column. And we have prepared sample with your requirement. 

Please refer the following code example: 

<script type="text/javascript"> 
 
    function query(args) { 
    
         ....... 
        
        if (args.column.field == "ShipCity") { 
             
         ....... 
 
           } 
        } 
    } 
</script> 

Please refer the following link for sample: 


If you need further assistance please get back to us, 

Regards, 
Kuralarasan M. 


CH Chris March 16, 2018 02:21 PM UTC

Perfect.  It's all working now.

Thank You!
Chris

KM Kuralarasan Muthusamy Syncfusion Team March 19, 2018 11:10 AM UTC

Hi Chris, 
We are happy to hear that your problem has been solved.  Please let us know if you need further assistance.  
 
Regards, 
Kuralarasan M. 


Loader.
Up arrow icon