Develop Reference

Push data to array populate jqGrid

Im try to populate my JQgrid with data each time I press the button "1" but I dont know what Im doing wrong. Im new to jquery. I have no problem printing the data to a p tag.
Im trying to use push should I use add instead? Or do I need to refresh the grid every press.
Any other suggested solutions are welcome.
$(document).ready(function () {
// Examle data for jqGrid
var currentTime = [
{time:""} ,
];
// Configuration for jqGrid Example 1
$("#table_list_1").jqGrid({
data: currentTime,
datatype: "local",
height: 250,
autowidth: true,
shrinkToFit: true,
rowNum: 14,
rowList: [10, 20, 30],
colNames: ['Time'],
colModel: [
{name: 'time', index: 'time', width: 60, sorttype: "double"},
],
pager: "#pager_list_1",
viewrecords: true,
caption: "Example jqGrid 1",
hidegrid: false
});
// Add responsive to jqGrid
$(window).bind('resize', function () {
var width = $('.jqGrid_wrapper').width();
$('#table_list_1').setGridWidth(width);
});
});
window.addEventListener('keydown', doKeyDown, false);
function doKeyDown(e){
if(e.keyCode == 49 & wavesurfer.isPlaying()){
// KEY = " 1 "
currentTime.push(wavesurfer.getCurrentTime());
});
}
}

My solution:
jQuery("#table_list_1").addRowData("1",{id: id, time: wavesurfer.getCurrentTime()});

What's wrong with my dynamically built colModel in jqGrid?

So, I am using jqGrid and due to the nature of this project, I need to build out the colModel dynamically. Meaning, I need to build the model itself dynamically. I am retrieving data fine with my JSON call.
So, I build an array of objects and then assign that array to the colModel property. No errors, but the data doesn't show up.... I am doing something very similar with colNames and it works fine. Does anyone see what I am missing? I have worked on this yesterday afternoon and all morning today and can't find any reason it shouldn't work.
As you can see, it am assigning the siteVal array at the top of my code to the colModel property.
var siteVal = [{name: 'InvtId', index: 'InvtId', width: 20, editable: false, sortable: false, align: 'left', hidden: true}];
siteVal.push({name: 'Descr', index: 'Descr', width: 320, sortable: false, editable: false, align: 'left'});
siteId.forEach(function(site){
curSite = site.substr(0,1)+"Val";
siteVal.push({name: curSite, index:curSite, width: 20, editable: false, sortable: false, align: 'left', hidden: true});
})
siteVal.push({name: 'Qty', index: 'Qty', width: 100, editable: true, sortable: false, align: 'right', hidden: true});
var colData = ['', 'Description'];
colData = colData.concat(siteId);
colData = colData.concat('Quantity');
console.log(colData);
jQuery("#list3").jqGrid({
url: 'OrdersInput.php?do=getdelvprice&state=' + $("#State").val() + '&city=' + $("#City").val() + '&FType=' + $("#FType").val() + '&siteid=' + $("#Plant").val(),
datatype: 'json',
mtype: 'GET',
colNames: colData,
colModel: siteVal,
loadonce: true,
height: 525,
width: 605,
rowNum: 1000,
key: false,
cellEdit: true,
cellsubmit: 'clientArray',
gridComplete: function() {
$("#MsgDel2").html("");
}
});
In using console.log to see the array right after I build it, this is what I get.
{"name":"InvtId","index":"InvtId","width":20,"editable":false,"sortable":false,"align":"left","hidden":true},
{"name":"Descr","index":"Descr","width":320,"sortable":false,"editable":false,"align":"left"},
{"name":"TVal","index":"TVal","width":20,"editable":false,"sortable":false,"align":"left","hidden":true},
{"name":"MVal","index":"MVal","width":20,"editable":false,"sortable":false,"align":"left","hidden":true},
{"name":"PVal","index":"PVal","width":20,"editable":false,"sortable":false,"align":"left","hidden":true},
{"name":"DVal","index":"DVal","width":20,"editable":false,"sortable":false,"align":"left","hidden":true},
{"name":"WVal","index":"WVal","width":20,"editable":false,"sortable":false,"align":"left","hidden":true},
{"name":"BVal","index":"BVal","width":20,"editable":false,"sortable":false,"align":"left","hidden":true},
{"name":"Qty","index":"Qty","width":100,"editable":true,"sortable":false,"align":"right","hidden":true}
This looks exactly as I think it should look in that it completely mimics the existing code where the colModel is defined statically. The thing is this must be dynamic to account for future growth...

I feel like a real idiot..... I was copying text from another line of code and didn't realize that I had included the last attribute... hidden:true
So, of course it wasn't showing up as I was telling it not to show. Guess that is what I get for copying and pasting code.

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.

Jqgrid pager not working with "local" dataType

Does Jqgrid allow us to add pager which we are using dataType local and don't want the whole data to be loaded at once. I am trying to do the same without success. It only shows the first page and show Page 1 Of 1 on the pager when there are many more records to be displayed.

Probably you fill the grid contain in the wrong way. Look at the example to see how you can use data parameter of jqGrid.

I have this same issue. I have a "local" jqgrid setup and it's showing my data but the pager values aren't completely accurate. Until I figured out that I needed to muck with the 'localReader' property. On the jqgrid wiki I saw that the jsonReader can have functions that define how to get the page, records, etc. It also states that the localReader can do whatever the jsonReader does so I gave it shot. Here's what I am doing.
var grid = $('#table').jqGrid({
datatype: 'local',
altRows: true,
colModel: [
{name: '0', label: "Name"},
{name: '1', label: "Color"},
],
pager: "#pager",
rowNum: 15,
sortname: '0',
viewrecords: true,
gridview: true,
height: '100%',
autowidth: '100%'
});
var reader = {
root: function(obj) { return results.rows; },
page: function(obj) { return results.page; },
total: function(obj) { return results.total; },
records: function(obj) { return results.records; },
grid.setGridParam({data: results.rows, localReader: reader}).trigger('reloadGrid');
My "results" is an object like this:
{page: "1", total: "70", records: "1045", rows:[.....]}
This seems to work as desired.

jQuery button click refresh of jqGrid only firing once

I have the following jQuery code which I'm using to populate a jqGrid. It works perfectly posting to my ASP.NET MVC page on the first click of the button. My
problem is, any other clicks past the first it seems to run through the jquery code when clicking the button but it never makes it to the POST page. Any ideas why?
<script type="text/javascript">
$(document).ready(function() {
$('#btnSubmit').click(function() {
/* Refreshes the grid */
$("#list").jqGrid({
/* The controller action to get the grid data from */
url: '/CRA/AddPart',
data: { partNumber: "123"},
datatype: 'json',
mtype: 'GET',
/* Define the headers on the grid */
colNames: ['col1', 'col2', 'col3', 'col4'],
/* Define what fields the row columns come from */
colModel: [
{ name: 'col1', index: 'invid', width: 290 },
{ name: 'col2', index: 'invdate', width: 290 },
{ name: 'col3', index: 'amount', width: 290, align: 'right' },
{ name: 'col4', index: 'tax', width: 290, align: 'right'}],
height: 'auto',
rowNum: 10,
rowList: [10, 20, 30],
sortname: 'id',
sortorder: "desc",
viewrecords: true,
imgpath: '../../Scripts/jgrid/themes/steel/images',
caption: 'Core Return Authorization Contents:',
cellEdit: true
});
});
});
</script>

The reason the grid isn't reloading is that you are calling the wrong method. The jqGrid method does approximately this:
Examine the table to see if it is already a grid; if so, exit.
Turn the table into a grid.
Populate the first page of data.
So the second time you call the method, it does nothing, as per step 1.
Instead, you should be calling $("#list").trigger("reloadGrid") on the second and all subsequent clicks.
Now, because of your mtype in the grid options, the grid is going to do a GET, not a POST. So if the POST is coming from the button itself (in other words, it is an input of type submit), you should return true to indicate that the submit should continue as usual.

Here is the solution :
<script type="text/javascript">
var firstClick = true;
$(document).ready(function() {
$('#btnSubmit').click(function() {
if (!firstClick) {
$("#list").trigger("reloadGrid");
}
firstClick = false;
/* Refreshes the grid */
$("#list").jqGrid({
/* The controller action to get the grid data from */
url: '/CRA/AddPart',
data: { partNumber: "123"},
datatype: 'json',
mtype: 'GET',
/* Define the headers on the grid */
colNames: ['col1', 'col2', 'col3', 'col4'],
/* Define what fields the row columns come from */
colModel: [
{ name: 'col1', index: 'invid', width: 290 },
{ name: 'col2', index: 'invdate', width: 290 },
{ name: 'col3', index: 'amount', width: 290, align: 'right' },
{ name: 'col4', index: 'tax', width: 290, align: 'right'}],
height: 'auto',
rowNum: 10,
rowList: [10, 20, 30],
sortname: 'id',
sortorder: "desc",
viewrecords: true,
imgpath: '../../Scripts/jgrid/themes/steel/images',
caption: 'Core Return Authorization Contents:',
cellEdit: true
});
});
});
</script>

Because I need to POST new values to the the Action for me it does not work "reloadGrid".
I just remove all the content and create the empty table again.
In the if I check if the grid is there to hide the "empty chart" div (it shows just a message). In the else I just clean the div that surrounds the table and then I add inside the table again. When the plugin finds the empty table then it loads the grid completely again.
LoadTableData is the function that has the common functionality to create and load the grid.
Probably this solution is not elegant, but when the time is rushing...
$("#btnDownloadsPerFile").click(function () {
if ($('#chartContainerDownloadsPerFile .ui-jqgrid').length == 0) {
$('#chartContainerDownloadsPerFile .emptyChart').hide();
}
else {
$('#chartContainerDownloadsPerFile').empty();
$('#chartContainerDownloadsPerFile').append('<table id="downloadsPerFileGrid"></table>');
}
LoadTableData("downloadsPerFileGrid", $('#ddlportalOptionsDownloadsPerFile').val(), "downloadsPerFile", $('#ddlTimeOptionsDownloadsPerFile').val(), $('#ddlTimeValuesDownloadsPerFile').val(), $('#ddlCountries').val());
});