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.

This might help: https://stackoverflow.com/questions/6221067/display-html-markup-in-browser-without-it-being-rendered — Devashish, Jul 12 '19 at 05:57
@shrys the h1 tag runs and displays bold characters. So i want to avoid it and print the html tags itself — Jezreel, Jul 12 '19 at 06:04
@Jezreel No i dont think so. jsGrid is just a jQuery plugin in the end and so it wont have anything like this "built-in". you will have to fix up something yourself. there is a solution that i have.. but it works if all your "html code" is in a single line only (not new lines or multiple lines) — Devashish, Jul 12 '19 at 07:11
@Jezreel what part of the above code do you want to display "as-is" inside the `test` field? i think i might have a solution.. — Devashish, Jul 12 '19 at 07:14

shrys · Accepted Answer · 2019-07-12T08:16:36.383

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>

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

test

1 Answers1