Develop Reference

DataTables FixedColumn Plugin, 2 fixed columns issue

I'm using the DataTables jquery plugin to build an HTML scrolling table with fixed headers and fixed columns.
Everything was working fine with 1 fixed column, but there seems to be a bug if I set more than one fixed column. The first fixed column works normally, but for the others, only the header stay fixed.
This is the javascript I'm using to initialize the DataTable :
_$grid.dataTable({
colReorder: {
fixedColumnsLeft: 1
},
dom: 'Rlfrtip',
info: false,
ordering:false,
paging: false,
scrollCollapse: true,
scrollY: scrollYSize(), // A function that compute the height of the table wrapper
scrollX: '100%',
searching: false,
fixedColumns: {
leftColumns: 1 // If leftColumns is set to 2 (or more) the bug appears
}
});
I've tried to initialize the FixedColumns extension this way, same effect :
_dataTable = _$grid.dataTable({
colReorder: {
fixedColumnsLeft: 2
},
dom: 'Rlfrtip',
info: false,
ordering:false,
paging: false,
scrollCollapse: true,
scrollY: scrollYSize(), // A function that compute the height of the table wrapper
scrollX: '100%',
searching: false
});
new $.fn.dataTable.FixedColumns(_dataTable, {
leftColumns: 2 // If leftColumns is set to 2 (or more) the bug appears
})
Did you ever facing this problem ?
EDIT : (screenshot)

Disable checkbox select on row click in jqGrid

I'm using jqGrid in my client side development. The truth is that I didn't choose it, it was integrated by other developer in entry development level and now there it is late to do something about that.
There is some functionality that I'm trying to change. I have a column of checkboxes and checkboxes are also selected on row click. I want this to work in another way - there must be no connection between checkbox and row state - so I want to disable checkbox select on row click. Is there any way to do this using the plugin?
$(this.options.grid).jqGrid({
height: 'auto',
width: width,
shrinkToFit: true,
colNames: columns.colNames,
colModel: columns.colModel,
rowNum: pageSize,
rowList: pageSizeValues,
viewrecords: true,
multiselect: true,
multiboxonly: true,
deepempty: true,
subGrid: false,
scrollrows: true,
altRows: true,
altclass: 'ui-widget-content-alt-row',
datatype: 'clientSide',
pager: pager,
toppager: false,
sortname: this.options.sortByVal,
sortorder: this.options.sortDirectionVal,
sortable: true,
jsonReader: reader,
editurl: 'clientArray',
beforeSelectRow: function(rowId, e) {
return true;
},
onSelectRow: function(rowId, status) {
return true;
},

Data size limit for display on jqgrid

This is a follow-up to my earlier question posted here. I have cases where we get large amount of data, around 200KB to be displayed on the jqgrid. In such case, the last sets of data are never displayed. Each record is split by a newline character. The data is in this format:
{"data":{"data":"\tat org.aaa.aaa.aaa.aaa.aaa.aaa(aaa.java:512)[147:org.aaa.aaa.aaa:9.1.1]\n\tat aaa.aaa.aaa.aaa.aaa.aaa(aaa.java:1789)[146:org.aaa:9.1.1]\n"}}
The code for grid is as follows:
$("#grid").jqGrid({
type: "GET",
url: "/getdata",
datatype: "json",
colNames: [''],
colModel: [
{name: 'data', align: 'left', sortable: false}
],
jsonReader: {
root: "data",
cell: "",
id: function () {
return function () {
return $.jgrid.randId();
}
},
page: function() { return 1; },
total: function() { return 1; },
records: function(obj) { return obj.data.length; }
},
loadonce: false,
viewrecords: true,
sortname:'',
rowNum: '9999',
autowidth: true,
ignoreCase: true,
height: "auto",
multiselect: false,
sortable: false,
autoencode: true,
loadComplete: function() {
$("tr.jqgrow:even").css("background", "#DDDDDC");
},
// We will handle the errors with ajax error handlers for now
loadError: function(error){
displayError(error.responseText);
},
beforeProcessing: function (data) {
var items = data.data.split("\n"), i, l, item;
data.logs = [];
for (i = 0, l = items.length; i < l; i++) {
item = $.trim(items[i]);
if (item.length > 0) {
data.data.push([item]);
}
}
}
});
I tried setting the rowNum to '', 99999, nothing worked. The total number of lines wwas The same lines seem to be getting chopped from display in jqgrid. Is there any limit to the amount of data that jqgrid can display? As of now, no pagination has been implemented on jqgrid.
Any pointers are greatly appreciated.
thanks,
Asha

First of all I recommend you to use correct type of all input parameters of jqGrid. In the documentation you will find the table which has "Type" column. The type of rowNum column is integer. So you should use rowNum: 9999 instead of rowNum: '9999'.
Additionally I strictly recommend you always use gridview: true option of jqGrid. In case of placing all data on one page such setting can improve the performance of filling of the grid in many times.
In the same way I don't recommend you to make any modification of the grid inside of loadComplete. It reduce the performance of jqGrid. You can define your custom CSS class for example
.myAltRows: { background: #DDDDDC }
and use the options altRows: true, altclass: "myAltRows". Alternatively you can use rowattr callback to set custom class or custom style on selected rows of the grid. See the answer for more details.
The last remark. I don't recommend you to include options which has default values (for example, type: "GET", loadonce: false, sortname:'', multiselect: false, sortable: false) or properties of colModel having default values (for example align: 'left'). You should examine default values column of the option and colModel options of the documentation.

How can I make a jqgrid with a subgrid load faster?

This is an example of the code I have. I left out the colNames and colModel because I know that's not the problem. I'm just wondering if there is any way to make a jqgrid that has a subgrid load faster. When this grid has > 100 records, it is fairly slow. If I remove the subgrid code and put gridview: true on the grid, it loads sooooooooooooooo much faster, but obviously, I can't have gridview: true and a subgrid. Any suggestions?
$(scheduleGridName).jqGrid({
url: dataURL,
datatype: "json",
mtype: 'GET',
colNames: [...],
colModel: [...],
height: "auto",
width: '100%',
rowNum: 2000,
loadonce: true,
jsonReader: {
root: "SearchResults",
records: "NumberOfResults",
repeatitems: false
},
viewrecords: true,
subGrid: true,
subGridRowExpanded: getSubgrid
});

You have rowNum: 2000. So that is a lot of records plus a subGrid for each one. Try setting rowNum: 10. or a number that you find that loads fast enough. If that does not work then consider a different way to show the subgrid. You could create an "action" column that has a link to another grid to dig into the details.
This code example will add the html to the "Action" column.
gridComplete: function () {
var ids = jQuery("#grid").jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
var cl = ids[i];
be = "<a href='../Company/EditUser?contactID=" + cl + "'>Edit</a></xsl:text>";
jQuery("#grid").jqGrid('setRowData', ids[i], {
Action: be
});
}
}
});

jqGrid columns width seem to go off after clicking on paginator

Using jqGrid version 3.6.5
Current pager extended options:
{ add: false, del: false, edit: false, search: false,
refresh: false, position: "left" }
Current grid options:
$("#tblID").jqGrid({
url: '...',
datatype: datatype,
datastr: GridJsonData,
mtype: 'GET',
colNames: arrColumnLabels,
colModel: gridColumns,
rowNum: 10,
rowList: [10, 20, 30],
pager: $('#pgrID'),
sortname: '',
viewrecords: true,
sortorder: "desc",
caption: "",
forceFit: true,
previewPaneMessageId: 0,
previewPaneProjectId: 0,
height: "100%",
Fixed width columns appear different from initial load after I navigate with the pager. Is there an options I need to add to ensure that widths in colModel persists?
I notice the setGridWidth is the method causing the problem. So I need a solution which uses setGridWidth but still allow the columns with fixed widths to remain fixed (according to colModel), while the dynamic width columns expand/reduce to fill the gap.

I had to upgrade to jqgrid 3.7.2 and utilise the "fixed" property.
[DataMember(Name = "fixed")]
public bool Fixed { get; set; }
...
internal static JsonColumnData JsonColumnGridSelector
{
get { return new JsonColumnData { name = "GridSelector", index = "", width = 35, Fixed = true, align = "center"