jQuery Grid

Set the autoshowfiltericon property of the jqxGrid. Author: http://jqwidgets.com

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div id='jqxWidget'></div>

JavaScript

var data = [{
 "id": "1",
 "name": "Hot Chocolate",
 "type": "Chocolate Beverage",
 "calories": "370",
 "totalfat": "16g",
 "protein": "14g"
 }, {
 "id": "2",
 "name": "Peppermint Hot Chocolate",
 "type": "Chocolate Beverage",
 "calories": "440",
 "totalfat": "16g",
 "protein": "13g"
}, {
 "id": "3",
 "name": "Salted Caramel Hot Chocolate",
 "type": "Chocolate Beverage",
 "calories": "450",
 "totalfat": "16g",
 "protein": "13g"
}, {
 "id": "4",
 "name": "White Hot Chocolate",
 "type": "Chocolate Beverage",
 "calories": "420",
 "totalfat": "16g",
 "protein": "12g"
}];

var source =
{
    datatype: "json",
    datafields: [
        { name: 'name', type: 'string' },
        { name: 'type', type: 'string' },
        { name: 'calories', type: 'int' },
        { name: 'totalfat', type: 'string' },
        { name: 'protein', type: 'string' }
    ],
    id: 'id',
    localdata: data
};

var dataAdapter = new $.jqx.dataAdapter(source, {
    loadComplete: function (records) {
        // get data records.
        var records = dataAdapter.records;
        // get the length of the records array.
        var length = records.length;
        var html = "<div id='jqxPanel'>";        
        for (var i = 0; i < length; i += 1) {
        		html += "<div style='margin: 10px;'><h3>" + records[i].name + "</h3></div>";
            html += "<div style='white-space: nowrap;'>";
            	html += "<ul>";
              html += "<li><strong>" + records[i].type + "</strong></li>";
              html += "<li>Calories: " + records[i].calories + "</li>";
              html += "<li>Protein: " + records[i].protein + "</li>";
              html += "<li>Totalfat: " + records[i].totalfat + "</li>";
              html += "</ul>";
            html += "</div>";
        }
        
        html += "</div>";
        $("#jqxWidget").html(html);
        
    },
    loadError: function (jqXHR, status, error) {
    		console.log(jqXHR, status, error);
    },
    beforeLoadComplete: function (records) {
...