JsGrid Sorting Not working on Customized column

The sorting function will no longer work on column that is using itemTemplate and headerTemplate.

You can see a fiddle from here.

As you can see, in the column "Client ID", the sorting works really well. But on column "Client Name", the sorting doesn't work as I am using itemTemplate and headerTemplate for customization.

Any workaround is really appreciated.

Here's the code:

$("#jsGrid").jsGrid({
    width: "100%",
    sorting: true,
    paging: true,
    data: [{
            ClientId: 1,
            Client: "Aaaa Joseph"
        },
        {
            ClientId: 2,
            Client: "Zzzz Brad"
        },
        {
            ClientId: 3,
            Client: "Mr Nice Guy"
        }
    ],
    fields: [{
            width: 80,
            name: "ClientId",
            type: "text",
            title: "Client ID"
        },
        {
            width: 80,
            itemTemplate: function(value, item) {
                return "<div>" + item.Client + "</div>";
            },
            headerTemplate: function() {
                return "<th class='jsgrid-header-cell'>Client Name</th>";
            }
        },
    ]
});

In jsgrid name is a property of data item associated with the column. And on header click this _sortData function will call in jsgrid.js for sorting data. And this name config will use here. So for this you have to provide this config other it will blank and no data sorting on header click.

Please search this below function in jsgrid.js

_sortData: function() {
    var sortFactor = this._sortFactor(),
        sortField = this._sortField;

    if (sortField) {
        this.data.sort(function(item1, item2) {
            return sortFactor * sortField.sortingFunc(item1[sortField.name], item2[sortField.name]);
        });
    }
},

In above code sortField.name as column config and it is must mandatory.

DEMO

$("#jsGrid").jsGrid({
        width: "100%",
        sorting: true,
        paging: true,
 				data: [
        	{ ClientId : 1, Client: "Aaaa Joseph"},
          { ClientId : 2, Client: "Zzzz Brad"},
          { ClientId : 3, Client: "Mr Nice Guy"}        
        ],
        fields: [
          {
              width: 80,
							name: "ClientId",
              type: "text",
              title: "Client ID"
          },
          {
              width: 80,
              name:'Client',
              itemTemplate: function (value, item) {    
                  return "<div>"+item.Client+"</div>";
              },
              headerTemplate: function () {
                  return "<th class='jsgrid-header-cell'>Client Name</th>";
              }
          },          
        ]
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" />

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>

<div id="jsGrid"></div>

Another way you can make manually sorting on header click.