I want the following ability in jqGrid.
When a user clicks on the checkbox in the grid a row is selected.
When the user subsequently clicks "Control key" and selects the checkbox the user can subsequently select more no of rows. Then when user clicks on the checkbox and if the current row is selected, the current row is then selected. Is this possible with jqGrid?
However nothing should happen when cells are are clicked. Only events should be available from checkbox.
Yes, it should be possible. Take a look at the normal example for checkbox selection - it gets you part of the way there. It doesn't really handle the SHIFT select stuff the way you'd expect, though.
I did some searching and found this code on the jqGrid support site:
function multiSelectHandler(sid, e) {
var grid = $(e.target).closest("table.ui-jqgrid-btable");
var ts = grid[0], td = e.target;
var scb = $(td).hasClass("cbox");
if ((td.tagName == 'INPUT' && !scb) || td.tagName == 'A') {
return true;
}
var sel = grid.getGridParam('selarrrow');
var selected = $.inArray(sid, sel) >= 0;
if (e.ctrlKey || (scb && (selected || !e.shiftKey))) {
grid.setSelection(sid,true);
} else {
if (e.shiftKey) {
var six = grid.getInd(sid);
var min = six, max = six;
$.each(sel, function() {
var ix = grid.getInd(this);
if (ix < min) min = ix;
if (ix > max) max = ix;
});
while (min <= max) {
var row = ts.rows[min++];
var rid = row.id;
if (rid != sid && $.inArray(rid, sel)<0) {
grid.setSelection(row.id, false);
}
}
} else if (!selected) {
grid.resetSelection();
}
if (!selected) {
grid.setSelection(sid,true);
} else {
var osr = grid.getGridParam('onSelectRow');
if ($.isFunction(osr)) {
osr(sid, true);
}
}
}
}
To use it, you're supposed to be able to set the beforeSelectRow handler to this function. Ex. something like this:
$("#gridid").jqGrid({
// Rest of code to configure grid
beforeSelectRow: multiSelectHandler,
// Other handlers/configuration
});
Related
I have a ext:gridpanel in my application and we have given the user the ability to arrange columns as per his convenience in the grid.
We also have given a button reset columns to default so that user can go back to the original gridpanel column order.
A method is written in javascript file to bring back the grid to original state when the user clicks "Reset Column to Default button"
The click handler for this button calls the method-"gridpanel_restore"
The code for this method is:-
var gridpanel_restore = function (grid) {
try
{
grid._State = appGlobal.getGridState(grid);
if (grid._State == grid._DefaultState) {
return;
}
grid._State = grid._DefaultState;
var settings = Ext.decode(grid._State);
var cm = grid.getColumnModel();
if (cm.isLocked != null) {
for (var i = cm.columns.length - 1; i > 0; i--) {
if (cm.isLocked(i) && !settings.settings[0].lockField.contains(i)) {
cm.setLocked(i, false, false);
}
}
for (var j = 0; j < settings.settings[0].lockField.length; j++) {
if (!cm.isLocked(i)) cm.setLocked(settings.settings[0].lockField[j], true, false);
}
}
if (settings.settings[0].state.sort) {
}
else {
grid.store.sortInfo = null;
}
grid.applyState(settings.settings[0].state);
var lastColumn = cm.getColumnAt(cm.columns.length - 1);
cm.setColumnWidth(cm.columns.length - 1, lastColumn.width - 1, false);
noMask = true;
CMS.ResetUserSettings(grid._ControlID);
if (settings.settings[0].state.group != null) {
async: false
window.location.href = window.location.href;
}
}
catch (err) {
}
}
This code works perfectly fine in IE but in firefox I get Communication failure on line "window.location.href = window.location.href;" on line 34
I have used this line because the page should be reloaded after setting columns to default otherwsise the grid does not render properly.
I have seen posts related to this but could not find a solution.
Please help. I have already asked this question in ext.net forum but no answer.
Currently using the Telerik MVC 3.0 in Asp.net. I Have grid with few Columns.
When the pageloads the rows are binded. When i click on the column it should sort in Descending sorder in the first Click instead of Ascending order.
You can do it by overwritting grid's toggleOrder method.
First, define a new ReverseToggleOrder function:
function ReverseToggleOrder(l) {
l = typeof l == "number" ? this.columns[l] : l;
var n = "desc";
if (l.order == "desc") {
n = "asc";
} else {
if (l.order == "asc") {
n = null;
}
}
l.order = n;
var m = $.inArray(l, this.sorted);
if (this.sortMode == "single" && m < 0) {
$.each(this.sorted, function () {
this.order = null;
});
this.sorted = [];
}
if (m < 0 && n) {
this.sorted.push(l);
}
if (!n) {
this.sorted.splice(m, 1);
}
}
function grid_onLoad(e) {
var grid = $(this).data('tGrid');
grid.toggleOrder = ReverseToggleOrder;
}
Then in grid's OnLoad event handler you need to overwrite its default behaviour:
.ClientEvents(events => events.OnLoad("grid_onLoad"))
The Grid does not support such sorting configuration. It always sorts ASC then DESC.
Suppose we've a grid with sortable columns.
If a user clicks on a column, it gets sorted by 'asc', then if a user clicks the column header again, it gets sorted by 'desc', now I want similar functionality when a user clicks the column third time, the sorting is removed, i.e. returned to previous style, the css is changed back to normal/non-italic etc?
Today I was trying to achieve same thing. I've skimmed through SlickGrid code but didn't find any 'Reset' function. So, I've tweaked the slick.grid.js v2.2 a little bit.
Basically you just need to add a new array - 'latestSortColumns' which will store sort columns state (deep copy of internal SlickGrid sortColumns array).
var latestSortColumns = [];
Optionally add new setting to opt-in for sort reset.
var defaults = {
(...),
autoResetColumnSort: false
};
Change setupColumnSort to reset sort after third click on column's header.
function setupColumnSort() {
$headers.click(function (e) {
// temporary workaround for a bug in jQuery 1.7.1 (http://bugs.jquery.com/ticket/11328)
e.metaKey = e.metaKey || e.ctrlKey;
if ($(e.target).hasClass("slick-resizable-handle")) {
return;
}
var $col = $(e.target).closest(".slick-header-column");
if (!$col.length) {
return;
}
var column = $col.data("column");
if (column.sortable) {
if (!getEditorLock().commitCurrentEdit()) {
return;
}
var sortOpts = null;
var i = 0;
for (; i < sortColumns.length; i++) {
if (sortColumns[i].columnId == column.id) {
sortOpts = sortColumns[i];
sortOpts.sortAsc = !sortOpts.sortAsc;
break;
}
}
**if ((e.metaKey || (options.autoResetColumnSort && latestSortColumns[i] != null && latestSortColumns[i].sortAsc === !column.defaultSortAsc)) && options.multiColumnSort) {**
if (sortOpts) {
sortColumns.splice(i, 1);
**latestSortColumns.splice(i, 1);**
}
}
else {
if ((!e.shiftKey && !e.metaKey) || !options.multiColumnSort) {
sortColumns = [];
}
if (!sortOpts) {
sortOpts = { columnId: column.id, sortAsc: column.defaultSortAsc };
sortColumns.push(sortOpts);
} else if (sortColumns.length == 0) {
sortColumns.push(sortOpts);
}
}
setSortColumns(sortColumns);
if (!options.multiColumnSort) {
trigger(self.onSort, {
multiColumnSort: false,
sortCol: column,
sortAsc: sortOpts.sortAsc}, e);
} else {
trigger(self.onSort, {
multiColumnSort: true,
sortCols: $.map(sortColumns, function(col) {
return {sortCol: columns[getColumnIndex(col.columnId)], sortAsc: col.sortAsc };
})}, e);
}
}
});
}
Store new state after every sort change in latestSortColumns:
function setSortColumns(cols) {
sortColumns = cols;
var headerColumnEls = $headers.children();
headerColumnEls
.removeClass("slick-header-column-sorted")
.find(".slick-sort-indicator")
.removeClass("slick-sort-indicator-asc slick-sort-indicator-desc");
$.each(sortColumns, function(i, col) {
if (col.sortAsc == null) {
col.sortAsc = true;
}
var columnIndex = getColumnIndex(col.columnId);
if (columnIndex != null) {
headerColumnEls.eq(columnIndex)
.addClass("slick-header-column-sorted")
.find(".slick-sort-indicator")
.addClass(col.sortAsc ? "slick-sort-indicator-asc" : "slick-sort-indicator-desc");
}
});
**for (var i = 0; i < sortColumns.length; i++)
latestSortColumns[i] = { columnId: sortColumns[i].columnId, sortAsc: sortColumns[i].sortAsc };**
}
That's all, should work now.
This is a function I call to reset all columns back to their original order.
It requires one of columns to be set up as not sortable.
In the example below I use the first column of the table, columns[0], which has the field id "locus".
function removeSorting() {
columns[0].sortable = true;
$('.slick-header-columns').children().eq(0).trigger('click');
columns[0].sortable = false;
// clear other sort columns
grid.setSortColumns( new Array() );
}
Then in the typical dataView.sort() function you make an exception for this column:
grid.onSort.subscribe(function(e,args) {
var cols = args.sortCols;
dataView.sort(function (dataRow1, dataRow2) {
for( var i = 0; i < cols.length; i++ ) {
var field = cols[i].sortCol.field;
// reset sorting to original indexing
if( field === 'locus' ) {
return (dataRow1.id > dataRow2.id) ? 1 : -1;
}
var value1 = dataRow1[field];
var value2 = dataRow2[field];
if( value1 == value2 ) continue;
var sign = cols[i].sortAsc ? 1 : -1;
return (value1 > value2) ? sign : -sign;
}
return 0;
});
});
Will the table always be sorted in some order on some column?
If not then you'll have to store a lot of state the first time a column is clicked just in case you want to restore it after a third click.
How do I obtain the selected row value for a hidden column in a Telerik RadGridView? The column is hidden on the aspx page and I would like to retrieve the value on the client side (JavaScript).
Essentially, I want to display a name in the grid view and be able to retrieve a value from the hidden field "ID" to bring up an edit form.
Here is an example of how I'm hiding the RadGridView column.
code sample:
onKeyPressEvent(sender, args) {
var variable = function (e) {
e = e || window.event;
if (e.keyCode == 13) {
var PartyID = args.getDataKeyValue("PARTY_ID");
var oManager = '<%=winMgr.ClientID %>';
var oManager = window.radopen("AttorneyEdit.aspx?PARTY_ID=" + PartyID, null);
oManager.setSize(1000, 530);
//Width, Height oManager.center();
} else { return true;
}
}
theForm.onkeypress = variable
}
Thanks for your help...
maybe you're going the wrong way. There is a property called "ClientDataKeyNames" on the mastertableview. You can add several key separated by a comma in this property. Then you'll be able to get your value without adding an extra column.
You should do something like this:
function onKeyPressEvent(sender, args) {
if (args.get_keyCode() == 13) {
var dataItem=sender.get_selectedItems()[0];
var PartyID = dataItem.getDataKeyValue("PARTY_ID");
var oManager = '<%=winMgr.ClientID %>';
var oManager = window.radopen("AttorneyEdit.aspx?PARTY_ID=" + PartyID, null);
oManager.setSize(1000, 530);
//Width, Height oManager.center();
}
else {
return true;
}
}
good luck
I'm using a YUI DataTable with a checkbox column like this:
var myColumnDefs = [
{key:"check", label:'', formatter:"checkbox"},
{other columns...}
];
How can I iterate over all the rows that have been checked?
UPDATE:
Here is my current work-around:
function getCheckedIds() {
var records = yuiDataTable.getRecordSet().getRecords();
var ids = '';
for (i=0; i < records.length; i++) {
var checked = false;
if (records[i] != undefined)
{
checked = $('#' + records[i].getId() + ' td div.yui-dt-liner input.yui-dt-checkbox').attr('checked');
if (checked) {
if (ids != '') {
ids += ',';
}
ids += records[i].getData("item.id");
}
}
}
return ids;
}
A better approach might be to subscribe to the checkboxClickEvent of the Datatable, then when a check box is selected (or unselected) programmatically mark the row as selected using the selectRow/unselectRow method of the Datatable. If you do this, it looks better in the UI (the rows are highlighted) and it is easy to get the selected rows using the getSelectedRows method of the Datatable.