How to select all checkbox based on custom checkbox in filterTemplate in JsGrid - asp.net-mvc-4

Question

Here i am trying to check all checkbox for using custom checkbox we can see here filterTemplate section and selectAll or unselectAll these are Bold for getting my point
<script>
$(function () {
$.ajax({
type: "GET",
url: "/MerchandiseList/GetMerchant"
}).done(function (data) {
//$("#leftMenu").hide();
//reloadpage(data);
var MyDateField = function (config) {
jsGrid.Field.call(this, config);
};
MyDateField.prototype = new jsGrid.Field({
sorter: function (date1, date2) {
return new Date(date1) - new Date(date2);
},
itemTemplate: function (value) {
if (value == "")
return "";
else {
var date = new Date(value).toDateString()
//var date = new Date(value).toDateString("MM/dd/yyyy")
//return new Date(value).toDateString();
//return value;
var d = new Date(date),
month = '' + (d.getMonth() + 1),
day = '' + d.getDate(),
year = d.getFullYear();
if (month.length < 2) month = '0' + month;
if (day.length < 2) day = '0' + day;
var df = [month, day, year].join('/');
//var df = [year, month, day].join('/');
date = df;
return date;
}
},
insertTemplate: function (value) {
return this._insertPicker = $("<input>").datepicker({ defaultDate: new Date() });
},
editTemplate: function (value) {
if (value == "")
return this._editPicker = $("<input>").datepicker({ defaultDate: new Date() });
else {
return this._editPicker = $("<input>").datepicker().datepicker("setDate", new Date(value));
}
},
insertValue: function () {
if (this._insertPicker.datepicker("getDate") != null)
return this._insertPicker.datepicker("getDate"); //.toISOString("MM/dd/yyyy")
//else
// return this._insertPicker.datepicker("getDate");
},
editValue: function () {
//debugger
if (this._editPicker.datepicker("getDate") != null)
//.toISOString("MM/dd/yyyy")
return this._editPicker.datepicker("getDate");
//return this._editPicker.datepicker("getDate").toISOString();
//else
// return this._editPicker.datepicker("getDate");
}
});
jsGrid.fields.myDateField = MyDateField;
$("#jsGrid").jsGrid({
height: "50%",
width: "100%",
filtering: true,
editing: true,
editButtonTooltip: "Edit",
inserting: true,
sorting: true,
paging: true,
autoload: true,
pageButtonCount: 5,
pageSize: 15,
overflow: scroll,
confirmDeleting: true,
deleteConfirm: "Do you really want to delete the merchandise?",
//refreshtext: "Refresh",
//onRefreshed: function (args) { },
selecting: true,
controller: db,
fields: [
{
**filterTemplate**: function (_, item) { // how to get all grid items here? This return only single item but empty in Filter row.
return $("<input>").attr("type", "checkbox")
.prop("checked", $.inArray(item, selectedItems) > -1)
.on("change", function () {
$(this).is(":checked") ? selectAll(item) : unselectAll(item);
});
},
itemTemplate: function (_, item) {
return $("<input>").attr("type", "checkbox")
.prop("checked", $.inArray(item, selectedItems) > -1)
.on("change", function () {
$(this).is(":checked") ? selectItem(item) : unselectItem(item);
});
},
align: "center",
width: 50,
sorting: false,
filtering: false
},
{ type: "control" },
{
name: "Source", type: "text", width: 120, title: "Vendor"
},
{
name: "Description", type: "text", width: 210,
validate: { message: "Description is required!", validator: function (value) { return value != ""; } }
},
{
name: "ModelNumber", type: "text", width: 120, title: "Model#/Item"
},
{ name: "SKU", type: "text", width: 90 },
{ name: "SKU2", type: "text", width: 90 },
{ name: "Comments", type: "text", width: 200 },
{ name: "strReceiveDate", type: "myDateField", width: 80, align: "center", title: "Received" },
{ name: "Location", type: "select", items: data.loc, valueField: "LocationID", textField: "Description", width: 100 },
{ name: "Barcode", width: 80 },
{ name: "BarcodePrinted", type: "checkbox", title: "Barcode Printed", sorting: false },
//{ name: "strLastUpdatedDate", type: "myDateField", width: 80, title: "Last Updated" },
{ name: "strLastUsedDate", type: "myDateField", width: 80, title: "Last Updated" },
{ name: "DamageCode", type: "select", items: data.dam, valueField: "CodeID", textField: "CodeValue", title: "Damage" },
{ name: "strCreatedDate", editable: false, width: 80, title: "Created Date", type: "myDateField" },
{ name: "strShipDate", type: "myDateField", myCustomProperty: "bar", width: 80, title: "Ship Date" },
{ name: "strConsumeDate", type: "myDateField", myCustomProperty: "bar", width: 80, title: "Consume Date" },
{ name: "PendingShipment", type: "checkbox", title: "Pending", sorting: false, width: 60 },
{ name: "Donated", type: "checkbox", title: "Is Donated", sorting: false, width: 60 },
{ name: "ReturnRequested", type: "checkbox", title: "Return Requested", sorting: false },
{ name: "ReturnTo", type: "text", width: 150, title: "Return To" },
{ name: "Quantity", type: "number", width: 50, title: "Qty" },
{ name: "GroupName", type: "text", width: 150, title: "Group Name" },
{ name: "CustomerID", width: 100, title: "Customer ID" }
],
});
var selectedItems = [];
var selectItem = function (item) {
document.getElementById("hdn").value = document.getElementById("hdn").value + "," + item.Barcode;
selectedItems.push(item);
//debugger
var $grid = $("#jsGrid");
$grid.jsGrid("option", "editing", false);
$grid.jsGrid("option", "editing", true);
};
var unselectItem = function (item) {
selectedItems = $.grep(selectedItems, function (i) {
//debugger
return i !== item;
});
var value = document.getElementById("hdn").value;
value = value.replace(item.Barcode, "");
document.getElementById("hdn").value = value;
var $grid = $("#jsGrid");
$grid.jsGrid("option", "editing", false);
$grid.jsGrid("option", "editing", true);
};
var **selectAll** = function (item) {
document.getElementById("hdn").value = document.getElementById("hdn").value + "," + item.Barcode;
selectedItems.push(item);
var $grid = $("#jsGrid");
$grid.jsGrid("option", "editing", false);
$grid.jsGrid("option", "editing", true);
};
var **unselectAll** = function (item) {
selectedItems = $.grep(selectedItems, function (i) {
//debugger
return i !== item;
});
var value = document.getElementById("hdn").value;
value = value.replace(item.Barcode, "");
document.getElementById("hdn").value = value;
var $grid = $("#jsGrid");
$grid.jsGrid("option", "editing", false);
$grid.jsGrid("option", "editing", true);
};
});
});
here the output image here [https://i.stack.imgur.com/gMfwn.png][1]
But noting happens can any one help me