How to rename jsGrid button class - jsgrid

Question

I would like to rename the following button css classes set in the jsGrid prototype:
modeOnButtonClass,
searchModeButtonClass,
insertModeButtonClass,
editButtonClass,
deleteButtonClass,
searchButtonClass,
clearFilterButtonClass,
insertButtonClass,
updateButtonClass,
cancelEditButtonClass
Instead of doing it in the main jsgrid.js file I would like to do it in my application's js file.
jsGrid's developer suggested that I redefine the values on the jsGrid prototype before grid initialization:
jsGrid.Grid.prototype.headerRowClass = "my-custom-class";
My grids are created inside functions (like below) and I am uncertain where to insert the renaming code, and, whether it would be written differently than how the developer suggests?:
function populateUsersGrid() {
var grid = $("#users_grid").jsGrid({
height: "auto",
width: "100%",
autoload: true,
sorting: true,
editing: true,
selecting: false,
noDataContent: "",
deleteConfirm: function (item) {
return "The User, \"" + item.first_name + ' ' + item.last_name + "\" , will be removed from the Users table. Are you sure?";
},
controller: {
loadData: function () {
var d = $.Deferred();
$.post("assets/php/get_users.php", {}, function (data) {
d.resolve(data);
});
return d.promise();
}
,
updateItem: function(item) {
return $.ajax({
type: "POST",
url: "assets/php/update_user.php",
data: {
'user_id': item.id,
'role_id': item.role_id
},
success: function (data) {
$("#users_grid").jsGrid("render");
}
});
},
deleteItem: function(item) {
return $.ajax({
type: "POST",
url: "assets/php/delete_user.php",
data: {
'user_id': item.id
},
success: function (data) {
$("#users_grid").jsGrid("render");
}
});
}
},
fields: [
{
title: "Last Name",
name: "last_name",
editing: false,
type: "text",
align: "left",
width: "20%"
},
{
title: "First Name",
name: "first_name",
editing: false,
type: "text",
align: "left",
width: "20%"
},
{
title: "Email Address",
name: "email",
editing: false,
type: "text",
align: "left",
width: "30%"
},
{
title: "Role",
name: "role_name",
type: "text",
align: "left",
width: "20%"
},
{
type: "control"
}
]
});
}
One further wrinkle is when I inspect 'prototype' in the console the prototype values I listed above do not appear.
Any help would be greatly appreciated.

Answer 1

Since I am renaming ControlField prototypes the code needs to be:
jsGrid.ControlField.prototype.editButtonClass = "my-button-class";
I placed these lines of code at the top of my main JS file inside the $(function () {} code block.
CSS classes have been successfully renamed.