I am trying to remove the cell selected square box with the below code but it is not working. Please refer to the screenshot attached and advise.
beforeCellClick: function (evt, ui) {
if (!evt.ctrlKey && this.SelectRow().isSelected(ui)) {
return false;
}
}
My Grid code as below:
$(function ()
{
var loData = "fbAllUser=true";
var objUserMaster =
{
flex: { one: true },
height: 'flex',
rowHt: 30,
wrap: false,
hwrap: false,
columnBorders: false,
stripeRows: false,
strNoRows: 'No User found.',
menuIcon: true,
numberCell: { width: 60, show: false },
trackModel: { on: true },
toolbar: {
items: [
{
type: 'button',
icon: 'ui-icon-plus',
cls: 'add_btn',
label: 'Add User',
listener: function () {
addRowfromgrid(this, 2);
}
}
]
},
scrollModel: { autoFit: true },
validation: { icon: 'ui-icon-info' },
colModel: [My User Column Model],
postRenderInterval: -1, //synchronous post rendering.
dataModel:
{
method: "GET",
location: "remote",
recIndx: "stUserUID",
beforeSend: function (jqXHR, settings) {
jqXHR.setRequestHeader("Content-Type", "application/json");
},
getUrl: MyWeb API URL,
getData: function (response) {
var loClientMasterJS = $.parseJSON(response.d);
data = loClientMasterJS;
return { data: data, curPage: 1, totalRecords: data.length }
},
error: function (jqXHR, textStatus, errorThrown) {
customalerterror('Error!', jqXHR.responseText, '500px');
}
},
pageModel: { type: "remote" },
//make rows editable based upon the class.
editable: function (ui) {
return this.hasClass({ rowIndx: ui.rowIndx, cls: 'pq-row-edit' });
},
create: function (evt, ui) {
this.widget().pqTooltip();
},
beforeCellClick: function (evt, ui) {
if (!evt.ctrlKey && this.SelectRow().isSelected(ui)) {
return false;
}
},
};
var grid = pq.grid("#MyGridDivID", objUserMaster);
//check the changes in grid before navigating to another page or refresh data.
grid.pager().on("beforeChange beforeRefresh", function (evt, ui) {
if (grid.isDirty()) {
var ans = window.confirm("There are unsaved changes. Are you sure?");
if (!ans) {
return false;
}
}
});
});