6
« on: April 20, 2016, 02:05:11 pm »
The link you gave ( demo ) bascially selects only one column , but in our case , we select all columns and all rows , so bascially the whole table gets scrolled .
This is the Select all event Listener ( on click )
}).click(function (evt) {
$("#user-details").find("td.pq-grid-cell").find("input[type='checkbox']").prop("checked", true);
var data = $("#user-details").pqGrid('option', 'dataModel.data'),
i = 0,
len = data.length,
userName;
while (len--) {
userName = data[len].userName;
if (userName == "admin" || userName == "guest")
continue;
$("#user-details").pqGrid("setSelection", {rowIndx: len});
data[len].state = true;
}
toggleButtons(evt, ui);
}));
function toggleButtons() {
var checkedUsers = getSelectedUsers();
if ($.inArray('admin', checkedUsers) != -1)
checkedUsers.splice(checkedUsers.indexOf('admin'), 1);
if ($.inArray('guest', checkedUsers) != -1)
checkedUsers.splice(checkedUsers.indexOf('guest'), 1);
if (checkedUsers.length > 0) {
$("#btn_deluser").button("enable");
} else {
$("#btn_deluser").button("disable");
}
}
function getSelectedUsers(fetchAll) {
fetchAll = fetchAll || false;
var $grid = $("#user-details"),
data = $grid.pqGrid('option', 'dataModel.data'),
checkedUser = [],
len = data.length,
state, name, rowData;
while (len--) {
rowData = data[len];
state = rowData.state;
name = rowData.userName;
if (state) {
if (name == "admin" || name == "guest")
continue;
else if (fetchAll)
checkedUser.push(rowData);
else
checkedUser.push(name);
}
}
return checkedUser;
}
This is the column model
function getUserDetailsColumn() {
return [
{
title: "",
dataIndx: "state",
maxWidth: 30,
minWidth: 30,
align: "center",
cb: {
header: false,
all: false
},
render: function (ui) {
if (ui.rowData.userName == "guest" || ui.rowData.userName == "admin") {
return "";
}
},
dataType: 'bool',
type: 'checkBoxSelection',
cls: 'ui-state-default',
resizable: false,
sortable: false,
editable: false,
editor: false
},