on fiddle fiddle code a jqpivot shows sales data of cars. Following problem could be a css issue or a configuration issue. When i ran the same code in IE with the size of height of grid set to 100.
{
iconSet: "fontAwesome",
cmTemplate: { autoResizable: true, width: 75 },
shrinkToFit: false,
useUnformattedDataForCellAttr: false,
autoResizing: { compact: true },
groupingView: {
groupField: ["x0"],
groupColumnShow: [false],
groupText: ["<span class='group-text'>{0}</span>"]
},
width: 600,
height:100,
toolbar: [true, "top"],
pager: true,
rowNum: 7,
threeStateSort: true,
sortname:['x1'],
caption: "<b>Car sales statistics</b>",
rowList: [5,7, 10, 20, 100, "10000:All"]
});
As shown on the image below, when the user scrolls down and stops at a point and clicks on row the highlighter shows that the row is not in one line instead there is a visual split. . with a large dataset this is very visible to the naked eye on IE. How do i fix this issue?
I can't reproduce the problem in IE, but I'd recommend you to add
$grid.trigger("jqGridResizeStop.setFrozenColumns");
in your code to force recalculation of the height and the position of all elements of frozen divs. See https://jsfiddle.net/OlegKi/rkxutxuv/7/ as an example.
Related
Is there a way with slick to use responsive settings to unslick and reslick the slider below and above certain resolutions automatically?
I tried to use the simple method
var rooms = jQuery('.room-slides').slick({
dots: false,
slidesToShow: 1,
centerMode: true,
draggable: true,
infinite: true,
speed: 300,
adaptiveHeight: false,
variableWidth: true,
responsive: [
{
breakpoint: 960,
settings: "unslick"
}
]
});
However below 960px the entire HMTL is deleted from the DOM, I thought the "destroy" method was only for de-attach all CSS/JS associated not the entire slider.
I am trying to get the data from a jqGrid (free version and latest version) and it's suppose that I get:
all the data if none is selected
the selected data if any
This is how I am doing it:
$(function () {
var $order_logs = $('#order_logs');
$order_logs.jqGrid({
url: Routing.generate('api_order_logs'),
datatype: "json",
colModel: $colmodel.data('values'),
width: 980,
height: 300,
pager: true,
toppager: true,
hoverrows: true,
shrinkToFit: true,
autowidth: true,
rownumbers: true,
viewrecords: true,
rowList: [25, 50, 100],
rownumWidth: 60,
gridview: true,
sortable: {
options: {
items: ">th:not(:has(#jqgh_order_logs_cb,#jqgh_order_logs_rn,#jqgh_order_logs_actions),:hidden)"
}
},
jsonReader: {
root: 'rows',
page: 'page',
total: 'total',
records: 'records',
cell: '',
repeatitems: false
},
cmTemplate: {autoResizable: true, editable: true},
autoResizing: {compact: true, resetWidthOrg: true},
autoresizeOnLoad: true
}).jqGrid('navGrid', {
edit: false,
add: false,
del: false,
search: false,
refresh: true,
refreshstate: "current",
cloneToTop: true
}).jqGrid('navButtonAdd', {
caption: 'Export',
title: 'Export',
onClickButton: function () {
var filteredData = $order_logs.jqGrid("getGridParam").lastSelectedData,
allData = $order_logs.jqGrid('getGridParam', 'data');
exportData(filteredData, allData);
}
});
});
function exportData(filteredData, allData) {
if (filteredData.length === 0 || allData.length === 0) {
alert('There is no data to export');
return;
}
// Export only the filtered data
if (filteredData.length > 0) {
return;
}
// Export all the grid data
}
For some reason the value of allData is always an empty array and I am not sure since I am using the same code as everyone is using out there and found in a lot of answer here in SO.
UPDATE:
Currently the grid is holding six columns and a set of 60 records as total paginated by 20 each time however you can change the pagination to be 50 or 100.
Can any tell me why is this?
I'd recommend to use loadonce: true, forceClientSorting: true options in case of small dataset: less at 1000 or 10000 rows. It simplifies the code server side and you can use full functionality of free jqGrid. The problem with access to lastSelectedData and data will be solved.
More then that, you can easy use many advanced features like createColumnIndex: true, generateValue: true of generateDatalist: true options and so on. See demos included in README of version 4.14.1. Good and comfortable filtering of the data is, in my option, the part of displaying the data. Having the data locally allows to find unique values and build <select> in the filter bar or to use <datalist> to have autocomplete functionality.
Am facing a design issue when re sizing the column headers as below,
Here is the code i use , can anyone please advise me if am wrong ?
jQuery("#jQGridDemo").jqGrid({
data:dataArray,
datatype: "local",
shrinkToFit: true,
height: 500,
width: 900,
rowheight: 160,
colNames: ['User', 'IP Address', 'Registered Contacts'],
colModel: [{ name: 'UserLinePort', width: 520, index: 'UserLinePort', stype: 'text', sortable: true },
{ name: 'SourceIP', index: 'SourceIP', width: 130, editable: true, stype: 'text', sortable: true },
{ name: 'registeredcontact', index: 'registeredcontact', width: 190, editable: true, sortable: true },
],
rowNum: 30,
rowList: [30, 50, 100],
pager: '#jQGridDemoPager',
loadComplete: function () {
stopLoadingIcon();
}
});
jqGrid 4.5.1 is relatively old version. After publishing 4.7.1 short after publishing 4.7 and renaming jqGrid to Guriddo jqGrid JS with changing license agreement and prices (see the post), I started alternative fork of jqGrid: free jqGrid which features are described in the readmes to every published version and in the wiki.
I rewrote many places of old jqGrid code. For example I rewrote the large part of column resizing and have changes the resizing of the grid. You can see on the demo for example how the resizing works now.
One can't change the existing behavior in jqGrid 4.5.1 using some additional options. You can test the current behavior of free jqGrid (the current version is 4.10.0) and Guriddo jqGrid JS (the current version is 5.0.1) and choose, which one corresponds more to your requirements. You can see on the demo site how Guriddo jqGrid JS works.
I am using array data to load a jqGrid with support for pagination. Without the pager property set, the grid loads the data, and looks like this:
The blue bar at the bottom is the pager element. But if the pager property is set, I am getting the following error:
Uncaught TypeError: Cannot read property 'integer' of undefined jquery.jqGrid.min.js:131
> a.updatepager jquery.jqGrid.min.js:131
> U jquery.jqGrid.min.js:67
> M jquery.jqGrid.min.js:81
> (anonymous function) jquery.jqGrid.min.js:135
> jQuery.extend.each jquery-1.10.2.min.js:657
> jQuery.fn.jQuery.each jquery-1.10.2.min.js:266
> b.fn.jqGrid jquery.jqGrid.min.js:33
> createGrid
Please help me find what I am doing wrong.
HTML:
<div>
<table id=grid></table>
<div id=grid_pager></div>
</div>
JS
function createGrid(dataAsArray) {
$('#grid').jqGrid({
caption: caption,
colModel: getColumnModel(),
scrollOffset: 0,
hidegrid: true,
sortorder: 'desc',
recreateForm: true,
height: '100%',
pager: '#grid_pager'
rowNum: 10,
rowList: [5, 10, 20, 40, 80],
viewrecords: true,
multiselect: true,
datatype: 'local',
data: dataAsArray,
localReader: {
repeatitems: true,
cell: '',
id: 0
}
});
$('#grid').jqGrid('navGrid', { edit: true, add: false, del: false, position: 'left' });
.jqGrid('setGridParam', {
rowNum: 5,
rowList: [5, 10, 20, 30, 100, 500]
}).trigger('reloadGrid');
}
ARRAY DATA
[
[ 246802, 'ab', 2, 'Invalid amount' ],
[ '', 12, 3, 'Invalid account' ],
...
]
Your help is highly appreciated!
Thanks
Vivek Ragunathan
Such error occurs typically if one forget to include grid.locale-en.js (or some other file from i18n directory). The file is really required for jqGrid. You should include it before jquery.jqGrid.min.js (or alternatively jquery.jqGrid.src.js). If you forgot to include grid.locale-en.js then the line
fmt = $.jgrid.formatter.integer || {};
will produce the error which you described because $.jgrid.formatter stay undefined (it will be defined in the line) and the expression $.jgrid.formatter.integer will generate the error.
Try this
pager: $('#grid_pager'),
Hope it helps.
I am using a jqgrid but am having trouble positioning to a specific page. I have seen a couple of examples using reloadGrid which I have tried but it doesn't work. I have a large data set that is paged. If I try to go to page 76 of my data set it acts like it is trying to do it as the "View" count at the bottom is correct however the grid is displayed empty (even though my JSON data looks correct). I notice the scroll bar is still positioned to the top and if I touch it it automatically reloads back to page 1. Am I missing something?
Here is my grid definition:
$("#list1").jqGrid({
url: 'jqgrid.php?cmd=getrecs',
editurl: 'jqgrid.php?cmd=editrec',
datatype: 'json',
colNames:['Branch', 'Description', 'Type', 'Active' ],
colModel :[
{name:'rbranch',
index:'rbranch',
sortable:true,
editable:true
},
{name:'des',
index:'des',
sortable:true,
editable:true
},
{name:'type',
index:'type',
sortable:true,
editable:true
},
{name:'status',
index:'status',
sortable:false,
editable:true
}
],
pager: '#pager1',
sortname: 'rbranch',
sortorder: 'asc',
rowNum: 100, // Only fetch 100 at a time
viewrecords: true,
scroll: 1,
sortable: true,
caption: 'Scheduling Resources'
});
$("#list1).navGrid("#pager1",
// Turn on the icons
{edit:true,
add:true,
del:true,
search:true,
refresh:true,
refreshstate:'current',
view:true
},
// Edit dialog parameters
{reloadAfterSubmit: false,
closeAfterEdit: true
},
// Add dialog parameters
{reloadAfterSubmit: true,
closeAfterAdd: true
},
// Delete dialog parameters
{reloadAfterSubmit: false},
// Search dialog parameters
{},
// View dialog parameters
{}
);
To go to page 76 I am trying this:
$("#list1").trigger("reloadGrid",[{page:76}]);
You use scroll: 1 option. It's a special virtual scrolling mode. In the mode many things work in another way or not works at all. You can try to remove the option and use standard paging.