How to print raw HTML code in a column in jsGrid?

Question

I have a HTML data for a column and I want to print it without interpreting the HTML. He is my code

 $(function() { $("#grid").jsGrid({ width: "100%", height: "400px", filtering: true, editing: true, sorting: true, paging: true, data: friends, fields: [{ name: "Name", type: "text", width: 100 }, { name: "Age", type: "number", width: 50 }, { name: "test", type: "string", autoencode: true, width: 50 }, countries, { name: "Cool", type: "checkbox", width: 40, title: "Is Cool", sorting: false }, { type: "control" } ] }) }) var friends = [{ Name: "Alan Turing", Age: 41, Country: 3, Cool: true, test: "<h1>test</h1>", }, ]; var countries = { name: "Country", type: "select", items: [{ Name: "", Id: 0 }, { Name: "United States", Id: 1 }, ], valueField: "Id", textField: "Name" } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script> <div id="grid"></div> 

Here the test column displays the html. I want to print

test

without interpreting. Help would be appreciated.

Answer 1

I've added the cellRenderer and returned an html escaped string. You can change the itemTemplate method too if you please, I've left it as is. You can also use $(document.createElement("div")).text(item).html() instead of the String.replace logic.

I couldn't find anything in the documentation.

 $(function() { $("#grid").jsGrid({ width: "100%", height: "400px", filtering: true, editing: true, sorting: true, paging: true, data: friends, fields: [{ name: "Name", type: "text", width: 100 }, { name: "Age", type: "number", width: 50 }, { name: "test", type: "string", width: 50, itemTemplate: function(value, item) { return "<td>" + value + "</td>"; }, cellRenderer: function(item, value) { //return "<td>" + $(document.createElement("div")).text(item).html() + "</td>"; return "<td>" + String(item).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;') + "</td>"; } }, countries, { name: "Cool", type: "checkbox", width: 40, title: "Is Cool", sorting: false }, { type: "control" } ] }) }) var friends = [{ Name: "Alan Turing", Age: 41, Country: 3, Cool: true, test: "<h1>test</h1>", }, ]; var countries = { name: "Country", type: "select", items: [{ Name: "", Id: 0 }, { Name: "United States", Id: 1 }, ], valueField: "Id", textField: "Name" } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script> <div id="grid"></div>