[maximus2014Participant]

Hi Stoev
In my application, ‘loadComplete‘ parameter is somehow called twice. Could you please tell me how this error occurs. I am loading data to jqxgrid using a third party query builder as I have mentioned in my previous posts. When I do grid filtering this issue is not found.
Thanks in advance.

[maximus2014Participant]

Hi Stoev,

Today I just tested the changes that were made regarding the commenting ‘pagesizeoptions‘ in jqxgrid initialization. I found a weird issue. When I load the grid using query builder output, the grid gets called ‘twice’. Thanks in advance.

[maximus2014Participant]

Hi Stoev,

I’ve solved the issue. I am using a custom pagerrenderer. I added an array listing the paging options and commented the ‘pagesizeoptions‘ in the jqxgrid initialization code. That did the trick. Thanks a lot for your support.

[maximus2014Participant]

Hi Stoev,

I searched the issue in the web and found that the parameter ‘pagesizeoptions‘ in the jqxgrid initialization was the culprit. I removed this option and found that the error was missing. But in my application, the client needs 3 ‘pagesizeoptions’ values 500, 1000 and 1500 from which he could choose. So the ‘pagesizeoptions’ can’t be removed. Also, when the pagesizeoptions is removed, when query builder filtering is done, the grid loads with ‘rowdetails‘ value visible for each row, which is normally hidden. Thanks in advance.

[maximus2014Participant]

Hi Stoev,

The application that I am doing has some third party softwares which have a number of files(most of them are customised) to be included in the script tag. So it would be hard to add my code in js fiddle. Thank you for your advice.

[maximus2014Participant]

Hi Stoev, My code with some more detail is as given below :

var url = “/log2timeline_data/?start_date=”+start_date+”&end_date=”+end_date+
“&datafield=”+field+”&datavals=”+fieldvals+”&qb=”+query+”&qbargs=”+queryArgs;
}
var source =
{
datatype: “json”,
datafields: [
{name:’field1′},{name: ‘field2’ },{ name: ‘field3’ },{ name: ‘field4’ },
],
updaterow: function (rowid, rowdata, commit) {
$.post(“/updatereport/”, {‘row_id’:rowdata.id, ‘report_notes’:rowdata.report_notes})
.done(function(data){
console.log(‘success’);
$(“#popupDiv”).find(‘[id=”id”]’).val(”);
$(“#popupDiv”).find(‘[id=”reportnotes”]’).val(”);
$(“#jqxgrid”).jqxGrid({ source: source });
});
},
filter: function() {
loaded_via = “GF”
// update the grid and send a request to the server.
$(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘filter’);
},
sort: function() {
// update the grid and send a request to the server.
$(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘sort’);
},
root: ‘Rows’,
cache: false,
beforeprocessing: function(data) {
if (data != ”) {
source.totalrecords = data[0].TotalRows;
}
},
url: url,
processdata: function(data) {
data.featureClass = “P”;
data.style = “full”;
},
};
var initrowdetails = function (index, parentElement, gridElement, datarecord) {
var tabsdiv = null;
var information = null;
var notes = null;
tabsdiv = $($(parentElement).children()[0]);
if (tabsdiv != null) {
information = tabsdiv.find(‘.information’);
reportnotes = tabsdiv.find(‘.reportnotes’);
description = tabsdiv.find(‘.description’);
var title = tabsdiv.find(‘.title’);
title.text(datarecord.datetime);
var container = $(‘<div style=”margin: 2px;”></div>’)
container.appendTo($(information));
var leftcolumn = $(‘<div style=”float: left; width: 35%;”></div>’);
var middlecolumn = $(‘<div style=”float: left; width: 35%;”></div>’);
var rightcolumn = $(‘<div style=”float: left; width: 30%;”></div>’);
container.append(leftcolumn);
container.append(middlecolumn);
container.append(rightcolumn);

var datetime = “<div style=’margin: 5px;overflow:hidden;’><b>Date:</b> ” + datarecord.datetime + “</div>”;
var timezone = “<div style=’margin: 5px;overflow:hidden;’><b>Timezone:</b> ” + datarecord.timezone + “</div>”;
var source = “<div style=’margin: 5px;overflow:hidden;’><b>Source:</b> ” + datarecord.source + “</div>”;
var macb = “<div style=’margin: 5px;overflow:hidden;’><b>Macb:</b> ” + datarecord.macb + “</div>”;
var sourcetype = “<div style=’margin: 5px;overflow:hidden;’><b>Source type:</b> ” + datarecord.sourcetype + “</div>”;
var type = “<div style=’margin: 5px;overflow:hidden;’><b>Type:</b> ” + datarecord.type + “</div>”;
var user = “<div style=’margin: 5px;overflow:hidden;’><b>User:</b> ” + datarecord.user + “</div>”;
var host = “<div style=’margin: 5px;overflow:hidden;’><b>Host:</b> ” + datarecord.host + “</div>”;
var filename = “<div style=’margin: 5px;overflow:hidden;’><b>File:</b> ” + datarecord.filename + “</div>”;
var inode = “<div style=’margin: 5px;overflow:hidden;’><b>Inode:</b> ” + datarecord.inode + “</div>”;
$(leftcolumn).append(datetime);
$(leftcolumn).append(timezone);
$(leftcolumn).append(source);
$(leftcolumn).append(macb);
$(leftcolumn).append(sourcetype);
$(leftcolumn).append(type);
$(leftcolumn).append(user);
$(leftcolumn).append(host);
$(leftcolumn).append(filename);
$(leftcolumn).append(inode);

var notes = “<div style=’margin: 5px;overflow:hidden;’><b>Notes:</b> ” + datarecord.notes + “</div>”;
var format = “<div style=’margin: 5px;overflow:hidden;’><b>Format:</b> ” + datarecord.format + “</div>”;
var extra = “<div style=’margin: 5px;overflow:hidden;’><b>Extra:</b> ” + datarecord.extra + “</div>”;
var inreport = “<div style=’margin: 5px;overflow:hidden;’><b>In Report:</b> ” + datarecord.inreport + “</div>”;
var tag = “<div style=’margin: 5px;overflow:hidden;’><b>Tag:</b> ” + datarecord.tag + “</div>”;
var color = “<div style=’margin: 5px;overflow:hidden;’><b>Color:</b> ” + datarecord.color + “</div>”;
var offset = “<div style=’margin: 5px;overflow:hidden;’><b>Offset:</b> ” + datarecord.offset + “</div>”;
var store_number = “<div style=’margin: 5px;overflow:hidden;’><b>Store number:</b> ” + datarecord.store_number + “</div>”;
var store_index = “<div style=’margin: 5px;overflow:hidden;’><b>Store index:</b> ” + datarecord.store_index + “</div>”;
var vss_store_number = “<div style=’margin: 5px;overflow:hidden;’><b>VSS Store Number:</b> ” + datarecord.vss_store_number + “</div>”;
$(middlecolumn).append(notes);
$(middlecolumn).append(format);
$(middlecolumn).append(extra);
$(middlecolumn).append(inreport);
$(middlecolumn).append(tag);
$(middlecolumn).append(color);
$(middlecolumn).append(offset);
$(middlecolumn).append(store_number);
$(middlecolumn).append(store_index);
$(middlecolumn).append(vss_store_number);

var url = “<div style=’margin: 5px;overflow:hidden;’><b>Url:</b> ” + datarecord.url + “</div>”;
var record_number = “<div style=’margin: 5px;overflow:hidden;’><b>Record Number:</b> ” + datarecord.record_number + “</div>”;
var event_identifier = “<div style=’margin: 5px;overflow:hidden;’><b>Event Identifier:</b> ” + datarecord.event_identifier + “</div>”;
var event_type = “<div style=’margin: 5px;overflow:hidden;’><b>Event Type:</b> ” + datarecord.event_type + “</div>”;
var source_name = “<div style=’margin: 5px;overflow:hidden;’><b>Source Name:</b> ” + datarecord.source_name + “</div>”;
var user_sid = “<div style=’margin: 5px;overflow:hidden;’><b>User SId:</b> ” + datarecord.user_sid + “</div>”;
var computer_name = “<div style=’margin: 5px;overflow:hidden;’><b>Computer Name:</b> ” + datarecord.computer_name + “</div>”;
var evidence = “<div style=’margin: 5px;overflow:hidden;’><b>Evidence:</b> ” + datarecord.evidence + “</div>”;
$(rightcolumn).append(url);
$(rightcolumn).append(record_number);
$(rightcolumn).append(event_identifier);
$(rightcolumn).append(event_type);
$(rightcolumn).append(source_name);
$(rightcolumn).append(user_sid);
$(rightcolumn).append(computer_name);
$(rightcolumn).append(event_identifier);

var reportescontainer = $(‘<div style=”white-space: normal; margin: 5px;”><span>’ + datarecord.reportnotes + ‘</span></div>’);
var descriptioncontainer = $(‘<div style=”white-space: normal; margin: 5px;”><span>’ + datarecord.description + ‘</span></div>’);
$(reportnotes).append(reportescontainer);
$(description).append(descriptioncontainer);
$(tabsdiv).jqxTabs({ width: ‘95%’, height: 240});
}
};

var cellsrenderer = function (row, column, value, defaultHtml, columnSettings, rowData) {
var element = $(defaultHtml);
if (rowData.color != ”) {
element.css({ ‘background-color’: rowData.color, ‘width’: ‘100%’, ‘height’: ‘100%’, ‘margin’:’0px’, ‘padding’:’7px 5px 5px 5px’});
// return element[0].outerHTML;
}
else {
element.css({‘background-color’: rowData.color, ‘width’: ‘100%’, ‘height’: ‘100%’, ‘margin’:’0px’, ‘padding’:’7px 5px 5px 5px’});
}
if(column == ‘inreport’){
if (value != ”) {
element.html(‘‘);
}
}
else if(column == ‘source’){
element.html(‘‘+value);
}
return element[0].outerHTML;
};

//Custom pager

var pagerrenderer = function () {
var element = $(“<div style=’margin-top: 5px; width: 100%; height: 100%;’></div>”);
var datainfo = $(“#jqxgrid”).jqxGrid(‘getdatainformation’);
var paginginfo = datainfo.paginginformation;
// create navigation buttons.
var rightButton = $(“<div style=’padding: 1px; margin: 0px 3px; float: right;’><div style=’margin-left: 9px; width: 14px; height: 16px;’></div></div>”);
rightButton.find(‘div’).addClass(‘jqx-icon-arrow-right’);
rightButton.width(36);
rightButton.jqxButton();
// append the navigation buttons to the container DIV tag.
rightButton.appendTo(element);

var leftButton = $(“<div style=’padding: 1px; float: right;’><div style=’margin-left: 9px; width: 14px; height: 16px;’></div></div>”);
leftButton.find(‘div’).addClass(‘jqx-icon-arrow-left’);
leftButton.width(36);
leftButton.jqxButton();
leftButton.appendTo(element);
// create a page information label and append it to the container DIV tag.
var label = $(“<div style=’margin: 2px 3px; float: right;’></div>”);
var start_row_count = 1 + (paginginfo.pagenum * paginginfo.pagesize)
var end_row_count = (paginginfo.pagenum + 1) * paginginfo.pagesize
//label.text(Math.min(1,datainfo.rowscount) + “-” + Math.min(paginginfo.pagesize,datainfo.rowscount) + ‘ of ‘ + datainfo.rowscount);
label.text( start_row_count+ “-” + Math.min(datainfo.rowscount, end_row_count) + ‘ of ‘ + datainfo.rowscount);
label.appendTo(element);
self.label = label;
// records per page option
var recordsPerPageDropDown = $(“<div style=’padding: 0px; margin: 0px 3px; float: right;’></div>”);

var sizes = new Array(500, 1000, 1500);
var size_index = sizes.indexOf($(‘#jqxgrid’).jqxGrid(‘pagesize’));
recordsPerPageDropDown.jqxDropDownList({ width: 55, height: 17, dropDownHeight: 80, source: sizes,selectedIndex: size_index });
recordsPerPageDropDown.on(‘select’, function (event) {
var args = event.args;
if (args) {
var item = args.item;
var label = item.label;
$(‘#jqxgrid’).jqxGrid({ pagesize: parseInt(label) });
recordsPerPageDropDown.jqxDropDownList({ selectedIndex: 0});
}
});
recordsPerPageDropDown.appendTo(element);
var recordsPerPageLabel = $(“<div style=’padding: 0px; margin: 0px 3px; float: right;’>Show Rows:</div>”);
recordsPerPageLabel.appendTo(element);

// navigate to the next page when the right navigation button is clicked.
rightButton.click(function (event) {
$(“#jqxgrid”).jqxGrid(‘gotonextpage’);
var datainfo = $(“#jqxgrid”).jqxGrid(‘getdatainformation’);
var paginginfo = datainfo.paginginformation;
self.label.text(1 + paginginfo.pagenum * paginginfo.pagesize + “-” + Math.min(datainfo.rowscount, (paginginfo.pagenum + 1) * paginginfo.pagesize) + ‘ of ‘ + datainfo.rowscount);

});
// navigate to the previous page when the left navigation button is clicked.
leftButton.click(function () {
$(“#jqxgrid”).jqxGrid(‘gotoprevpage’);
var datainfo = $(“#jqxgrid”).jqxGrid(‘getdatainformation’);
var paginginfo = datainfo.paginginformation;
self.label.text(1 + paginginfo.pagenum * paginginfo.pagesize + “-” + Math.min(datainfo.rowscount, (paginginfo.pagenum + 1) * paginginfo.pagesize) + ‘ of ‘ + datainfo.rowscount);

});
//Refresh Button
var refreshButton = $(“<div style=’float: left;width:30px;’></div>”);
refreshButton.append(‘‘)
//refreshButton.jqxButton();
refreshButton.appendTo(element);
refreshButton.click(function() {
stdate = ”;
endate = ”;
field = ”;
fieldvals = ”;
qb = ”;
args = ”;
$(“#jqxgrid”).jqxGrid(‘clear’);
renderChart(stdate, endate,field, fieldvals, qb, args);
$(“#stats_wrapper table tbody”).find(“tr:gt(0)”).remove();
location.reload();
});
//Search Button
var searchButton = $(“<div style=’float: left;width:30px;’></div>”);
searchButton.append(‘‘);
searchButton.appendTo(element);

searchButton.click(function(){
var offset = $(“#jqxgrid”).offset();
$(“#finddiv”).jqxWindow(‘open’);
$(“#finddiv”).jqxWindow(‘move’, offset.left + 30, offset.top + 30);
filterList.splice(0, 0, ‘(Select)’);
$(“#searchcolumns”).jqxDropDownList({ autoDropDownHeight: true, selectedIndex: 0,
width: 100, height: 15,
source:filterList,
});
$(“#searchconditions”).jqxDropDownList({ autoDropDownHeight: true, selectedIndex: 0,
width: 100, height: 15,
source:stringFilters,
});
$(“#searchvalues”).jqxDropDownList({ autoDropDownHeight: true, selectedIndex: 0,
width: 100, height: 15,
source:[‘(All)’],
});
$(“#searchcolumns”).on(‘select’, function (event) {
if(event.args.item.index != 0) {
updateFilterBox(event.args.item.value);
}
else {
var initialArray = new Array();
initialArray.splice(0,0,'(Select)’)
$(“#searchconditions”).jqxDropDownList({selectedIndex: 0});
$(“#searchvalues”).jqxDropDownList({ source:initialArray });
initialArray.length = 0;
}
});
filterList.splice(0,1);
});
// return the new pager element.
return element;
}

$(“#jqxgrid”).on(‘pagechanged’, function () {
var datainfo = $(“#jqxgrid”).jqxGrid(‘getdatainformation’);
var paginginfo = datainfo.paginginformation;
self.label.text(1 + paginginfo.pagenum * paginginfo.pagesize + “-” + Math.min(datainfo.rowscount, (paginginfo.pagenum + 1) * paginginfo.pagesize) + ‘ of ‘ + datainfo.rowscount);
});
if ($(‘#hdn_activerows’).val() != ‘0’){
var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function (data) {
var dbtotal = formatStatsValue(data[0].dbtotal);
var dbevidence = formatStatsValue(data[0].dbevidence);
var dbsources = formatStatsValue(data[0].dbsources);
var selectedRows = formatStatsValue(data[0].TotalRows);
$(“#total”).html(dbtotal);
$(“#total_evidence”).html(dbevidence);
$(“#total_sources”).html(dbsources);
$(“#min_date”).html(data[0].start_date);
$(“#max_date”).html(data[0].end_date);
$(“#rowscount”).html(data[0].TotalRows);
},
loadError: function (xhr, status, error) { console.log(‘error’); }
});
}
$(jqxgrid).on(“bindingcomplete”, function (event) {
$(“#jqxgrid”).jqxGrid(‘focus’);
});

$(“#jqxgrid”).jqxGrid(
{
source: dataAdapter,
filterable: true,
sortable: true,
pageable: true,
pagesizeoptions:[‘500’, ‘1000’, ‘1500’],
pagesize:1000,
columnsresize:true,
columnsreorder:true,
rowdetails: true,
rowdetailstemplate: { rowdetails: “<div style=’margin: 10px;’><ul style=’margin-left: 30px;’><li class=’title’>

Description

Report Notes

<div class=’information’></div><div class=’description’></div><div class=’reportnotes’></div></div>”, rowdetailsheight: 260 },
virtualmode:true, //should be true for server-side pagination
rendergridrows: function (obj) {
return obj.data;
},
initrowdetails: initrowdetails,
selectionmode: ‘multiplerowsextended’,
groupable:true,
width:’99.7%’,
height:600,
pagerrenderer: pagerrenderer,
columns: [
{ text: ‘Field1’, datafield: ‘field1’, width: ‘9%’, filtertype:’date’,
cellformat:’yyyy-MM-dd’,cellsrenderer:cellsrenderer},
{ text: ‘Field2’, datafield: ‘field2’, width: ‘7%’, cellsrenderer:cellsrenderer, hidden:true},
{ text: ‘Field3’, datafield: ‘field3’, width: ‘4%’, cellsrenderer:cellsrenderer},
{ text: ‘Field4’, datafield: ‘field4’, width: ‘4%’, cellsrenderer:cellsrenderer},
],

// Column header right-click
ready: function () {
$(“.jqx-grid-column-header”).mousedown(function (event) {
var button = event.which;
if (button == 3) {
$(“#Menu”).jqxMenu(‘open’, parseInt(event.pageX) + 5, parseInt(event.pageY) + 5);
}
});
},
});

[maximus2014Participant]

Hi Stoev,

I installed the version 3.4.0 and tested. The error still exists. Thanks in advance.

[maximus2014Participant]

Thank you Stoev, I’ll test using the latest version

[maximus2014Participant]

Hi Stoev,

When I run the query, all I am doing is to call the function in which jqxgrid is initialized and pass the query in the ‘url’ parameter of the grid.

Thanks in advance.

[maximus2014Participant]

Hi Stoev,

Which function should i call in the grid ‘ready’ function. Could you please send me a sample code. I just tested by adding $(“#jqxgrid”).jqxGrid(‘focus’); in ‘bindingcomplete’ event but the error still exists. Thanks in advance.

[maximus2014Participant]

Thanks Stoev.

[maximus2014Participant]

Thank you Stoev, I am using jqxgrid version 3.1.0. Here is my cellsrenderer code :

var cellsrenderer = function (row, column, value, defaultHtml, columnSettings, rowData) {
var element = $(defaultHtml);
console.log(element)
if (rowData.color != ”) {
element.css({ ‘background-color’: rowData.color, ‘width’: ‘100%’, ‘height’: ‘100%’, ‘margin’:’0px’, ‘padding’:’7px 5px 5px 5px’});
return element[0].outerHTML;
}
else {
element.css({‘width’: ‘100%’, ‘height’: ‘100%’, ‘margin’:’0px’, ‘padding’:’7px 5px 5px 5px’});
}
return element[0].outerHTML;
};
I am receiving the error ‘TypeError: rowData is undefined’
Thanks in advance.

[maximus2014Participant]

Hi Stoev, I am using ‘cellsrenderer’ method inorder to highlight rows based on the database value.I tried the “autoresizecolumns” method in the ‘binding complete event. This resulted in error in the cellsrenderer method and grid didn’t display. In my application cellsrenderer is very important. Setcolumnproperty is inappropriate for me as I can’t set width to a specific value. Please help.
Thanks in advance.

[maximus2014Participant]

Thank Stoev for the valuable information.

I would also like to know whether we can adjust width of the column based on the length of the data in the column. Now I’ve been asked to set the width of a particular column so that entire data in each cell of the column is visible. Thanks in advance.

[maximus2014Participant]

Hi everyone,

Is it possible to display just ‘columns’ instead of selected values in selection log of jqxgrid combobox?

[Author]

Posts