Have run into a problem wiht jqGrid when I try to export a table to PDF, Excel or CSV.
Every time I run the code I get "Call to Undefined Method::jqGrid::exportToPdf" (or Excel or CSV, depending on which method I am using.
Here is a snip of the client side:
.jqGrid('navButtonAdd', '#ors_registrant_pager', {
id: 'exportToPdf',
caption: '',
title: 'Download PDF',
onClickButton: function(){
grid.jqGrid('excelExport',{tag:"pdf","url":"info.php"});
}
Here is the server side php script in info.php:
$conn = new PDO(DB_DSN,DB_USER,DB_PASSWORD);
$conn->query("SET NAMES utf8");
$grid = new jqGrid($conn);
$grid->SelectCommand = "SELECT lastName, firstName FROM user_table";
$grid->ExportCommand = "SELECT lastName FROM user_table";
$grid->dataType = "json";
$export = $_POST["oper"];
if($export == "pdf") {
$grid->exportToPdf();
} else {
$grid->queryGrid();
}
The grid loads correctly on the pageload, but as stated, when you click the PDF button on the bar I get that error. I've tried using all the parameters for the method to what is above with the same result. I've traced and the exportToPdf method does indeed exist in the jqGrid class.
I've searched and can't find any references to the problem. Any help would be much appreciated.
UPDATE
moved to Answer
Ok, as it happens so many times, as soon as I posted I found the answer. The documentation is not correct in the Trirand site for PHP help. In the help it states to use the jqGrid class for PDF exports, but apparently you have to use the jqGridRender class instead.
To do the PDF export I had to change the $grid declaration as follows:
$grid = null;
$export = $_GET["oper"];
if($export == "pdf"){
$grid = new jqGridRender($conn);
} else {
$grid = new jqGrid($conn);
}
Doing so allows the grid to be exported.
I was going to delete the thread but I am leaving in case others run into the same problem in hopes this will help them out.
Related
I read all the posts regarding freezing column. But still I am unable solve my problem.
When I called setFrozenColumns my column has frozen but along with another column header is added to the grid. So the column headers one more than the columns. How to resolve this. Here is my over view of code.
makeJqueryGridInstance(grid, gridSettings);
window.prepareSortableColumns(grid);
makefrozenColumns(grid);
function makeFrozenColumn( grid )
{
var colmodel = grid.jqGrid('getGridParam', 'colModel');
if (colmodel[0].name === 'cb')
{
grid.jqGrid('setColProp', colmodel[0].name, { frozen: true });
grid.jqGrid('setFrozenColumns');
fixPositionsOfFrozenDivs.call(grid[0]);
}
}
function prepareSortableColumns(grid)
{
var gridSettings = grid.data('settings');
var gridId = gridSettings.gridId;
var columnHeaders = $("#" + "gview_" + gridId.replace("#", "")).find(".ui-jqgrid-htable > thead > tr > th");
var colModel = grid[0].p.colModel;
$.each(columnHeaders, function (index, columnHeader)
{
if (colModel[index].sortable == false)
{
$(columnHeader).find("div").removeClass("ui-jqgrid-sortable");
}
});
}
For the first time, it is working fine and the column has frozen.
But second time when the call made to prepareSortableColumns(grid), the columnHeader having one more than colModel (I debugged through devTools). So I am getting error for that particular columnHeader sortable is undefined.
Can anybody help me with this. Thanks in advance.
The code of prepareSortableColumns seems be wrong. Its not oriented on dives added in case of usage of frozen columns (see the answer for more details and use Developer Tools to examine the structure of the grids). You can try to use grid[0].grid.headers array instead of selecting columnHeaders in the way like you do this.
Additionally it's in general wrong to remove ui-jqgrid-sortable class. The meaning of the class will be frequently misunderstood because of the name. Non-sortable columns have to have the class too. What you need to do instead is to set CSS style cursor: default on the headers. See the old answer for the corresponding code example.
I have the following code written in Dojo. It works fine and as expected in all browsers except Firefox (25,26) The error from the console is: typeError: this.getParent() is null which is really not helpfull a lot.
The onclick event does't fire giving the above mentioned error.
Where could the problem be:
var pMenu = new dijit.Menu({
targetNodeIds: [ContainerNode]
});
var t = new dijit.MenuItem({
label: "test",
iconClass: "context_paste",
});
dojo.connect(t, 'onclick', function(){alert("test")});
I created a fiddle and filled in the missing code and was not able to reproduce the error on Firefox 25. Some of the changes that I made were:
Removed the trailing comma at the end of the iconClass line
Place the menu item in the menu with placeAt(pMenu)
Ran the code on load. I'm not sure you were doing this from the code provided.
http://jsfiddle.net/RichAyotte/okvp0hpu/
dojo.require('dijit.Menu');
dojo.require('dijit.MenuItem');
dojo.addOnLoad(function() {
var ContainerNode = document.getElementById('container');
var pMenu = new dijit.Menu({
targetNodeIds: [ContainerNode]
});
var t = new dijit.MenuItem({
label: "test",
iconClass: "context_paste"
}).placeAt(pMenu);
dojo.connect(t, 'onClick', function(){alert("test")});
});
I have a select drop down dynamically populated by an AJAX call. It is working correctly in all browsers besides IE 8 and below. The browser isn't rendering the elements within the tag. The following is the set up of the list:
for (var Id in Options.items) {
var option = document.createElement('option');
option.value = Id;
option.textContent = Options.items[Id];
if (Options.defaultId === Id) {
option.setAttribute('selected', 'selected');
}
select.appendChild(option);
}
return select.outerHTML;
Is any of this code incompatible with older versions of IE? Search results have mentioned "setAttribute" can cause problems, so I did try switching that line to 'option.Selected="Selected"', to no effect. I have a feeling my issue lies with how I append the options to the list with appendChild or return the outer HTML, but not sure where to start. Do those tend to create issues with IE? Any help is greatly appreciated, thank you.
you are using .textContent and it is not supported IE8 and below. Change it to innerHTML and it should work.
See .textContent
for (var Id in Options.items) {
var option = document.createElement('option');
option.value = Id;
option.innerHTML = Options.items[Id]; //<--here
if (Options.defaultId === Id) {
option.setAttribute('selected', 'selected');
}
select.appendChild(option);
}
Demo
From your explanation I understand your problem is that the browser does not highlights (selects) the proper option... if that´s correct, instead of:
option.setAttribute('selected', 'selected');
use:
select.value = Id;
as far as I know that works in all browsers.
I am updating some legacy code to support CKEditor up from FCKEditor, in classic asp. I am not a classic asp designer by trade so I am flying by the seat of my pants here. We previously used Javascriptspellcheck to to the spell checking. The problem I am having relates to this old code:
function doSpellCheck() {
var oSpell = new JavaScriptSpellCheck();
oSpell.callBack = function() {
oEditor.SetHTML($('POST_MESSAGE').value);
}
oEditor.UpdateLinkedField();
oSpell.spellCheckWindow('POST_MESSAGE');
}
oEditor is an instance of FCKEditor defined in a fckeditor_oncomplete() function. The new code I am trying to use is as follows:
function doSpellCheck() {
oSpellEditor = CKEDITOR.instances['POST_MESSAGE'].getData();
var oSpell = new JavaScriptSpellCheck();
oSpell.callBack = function() {
CKEDITOR.instances['POST_MESSAGE'].Setdata(oSpellEditor);
}
oSpell.spellCheckWindow('POST_MESSAGE');
}
The problem I seem to be facing is that JavaScriptSpellCheck(); needs the textarea id of the ckeditor instance. I attempted to follow the directions in This Post and nemisj's answer but I am having trouble with the code. I am not really understanding the DOM or how to manipulate it in this case. I know that this is not asp, to create the ckeditor instance I am using a custom asp sub to create it, but this is the area that I am having trouble with.
*EDIT: Found the answer. Where I am creating new CKEditor I needed to add text area attributes like so:
Set pageEditorTop = New CKEditor
' Change default textarea attributes
set textareaAttributes = CreateObject("Scripting.Dictionary")
textareaAttributes.Add "id", "POST_MESSAGE"
Set pageEditorTop.textareaAttributes = textareaAttributes
That code that you are trying to use doesn't make sense.
This is a straight port of the original code to CKEditor:
function doSpellCheck() {
var oEditor = CKEDITOR.instances['POST_MESSAGE'];
var oSpell = new JavaScriptSpellCheck();
oSpell.callBack = function() {
oEditor.setData($('POST_MESSAGE').value);
}
oEditor.updateElement();
oSpell.spellCheckWindow('POST_MESSAGE');
}
Edit formatter action button is placed to jqgrid column:
colModel: [{"fixed":true,"label":" change ","name":"_actions","width":($.browser.webkit == true? 37+15: 32+15)
,"align":"center","sortable":false,"formatter":"actions",
"formatoptions":{"keys":true,"delbutton":false,"onSuccess":function (jqXHR) {actionresponse = jqXHR;return true;}
,"afterSave":function (rowID) {
cancelEditing($('#grid'));afterRowSave(rowID,actionresponse);actionresponse=null; }
,"onEdit":function (rowID) {
if (typeof (lastSelectedRow) !== 'undefined' && rowID !== lastSelectedRow)
cancelEditing($('#grid'));
lastSelectedRow = rowID;
}
}}
New row is added to jqgrid in loadcomplete event
var newRowData = {};
var newRowId = '_empty' + $.jgrid.randId();
$('#grid').jqGrid('addRowData', newRowId, newRowData);
and its id is updated if save action button is clicked:
function aftersavefunc(rowID, response) {
restoreActionsIcons();
$('#grid').jqGrid('resetSelection');
var json = $.parseJSON(response.responseText);
$("#" + rowID).attr("id", json.Id);
lastSelectedRow = json.Id;
$("#grid").jqGrid('setSelection', lastSelectedRow);
}
After clicking save action button edit action button clicks are ignored. It is not possible to re-enter to edit mode after first editing.
How to fix this so that row can edited by edit button click again after saving ?
Update
I added $(this).focus() as suggested in Oleg answer and also wrapped id change into setTimeout as Oleg recommends in other great answer:
function aftersavefunc(rowID, response) {
restoreActionsIcons();
$(this).focus();
$('#grid').jqGrid('resetSelection');
var json = $.parseJSON(response.responseText);
setTimeout(function () {
$("#" + rowID).attr("id", json.Id);
lastSelectedRow = json.Id;
$("#grid").jqGrid('setSelection', lastSelectedRow);
}, 50);
}
Problem persists. The problem may related to row id change since:
It occurs only in last row (where id is changed after save). It does not occur for saved rows where responseText returns same id and row id is actually not changed.
It does not occur if cancel action button is pressed.
Maybe row id needs additional reset id addition to resetSelection or needs updated in somewhere other place also.
Update2
I added code form updated answer to errorfunc and used only english characters and numbers id ids. This allows to click multiple times but introduces additional issue:
extraparam is no more passed. If rowactions() calls are commented out, extraparam is passed with with rowactions calls extraparam is not passed.
I changed jqGrid source code and added alert to rowactions method:
alert( cm.formatoptions);
if (!$.fmatter.isUndefined(cm.formatoptions)) {
op = $.extend(op, cm.formatoptions);
}
In first clicks alert outputs 'Object'. In succeeding clicks to Save button it outputs undefined. So for unknown reason formatoptions is cleared.
Remarks to comment:
Absolute url in testcase is not used. Datasource is set to localarray.
I verified that testcase works in IE and FF without external url access.
For extraparam issue I can create new testcase.
Without image directory buttons are shown in cursor is moved over them.
Missing image directory still allows to reproduce the issue.
FormData function is defined in js file.
Since new issue occurs after adding rowactions() calls and does not occur if those calls are removed, this seems to be related to the code proposed in answer.
I suppose that the problem exist because one hide a button which has currently focus. Look at the code from the answer. If one remove the line $(this).focus(); // set focus somewhere one has the same problem as you describes. So I suggest that you just try to set somewhere, for example in restoreActionsIcons the focus to any the table element of the grid after hiding the button having currently the focus. I can't test this, but I hope it will help.
UPDATED: I examined your problem one more time and I hope I can suggest you a solution.
You problem can be divided on two sub-problems. The main your problem is the the changing of the id of the row. So it is not common problem which everybody has.
The problem is that "actions" formatter create onclick functions directly in the HTML code (see for example here):
ocl = "onclick=$.fn.fmatter.rowactions('"+rowid+"','"+opts.gid+"','edit',"+opts.pos+");..."
So the functions will contains the original rowid. To fix the problem you can modify the code fragment of your aftersavefunc inside of setTimeout from
$("#" + rowID).attr("id", json.Id);
lastSelectedRow = json.Id;
$("#grid").jqGrid('setSelection', lastSelectedRow);
to something like the following:
var $tr = $("#" + rowID),
$divEdit = $tr.find("div.ui-inline-edit"),
$divDel = $tr.find("div.ui-inline-del"),
$divSave = $tr.find("div.ui-inline-save"),
$divCancel = $tr.find("div.ui-inline-cancel");
$tr.attr("id", json.Id);
if ($divEdit.length > 0) {
$divEdit[0].onclick = function () {
$.fn.fmatter.rowactions(newId,'grid','edit',0);
};
}
if ($divDel.length > 0) {
$divDel[0].onclick = function () {
$.fn.fmatter.rowactions(newId,'grid','del',0);
};
}
if ($divSave.length > 0) {
$divSave[0].onclick = function () {
$.fn.fmatter.rowactions(newId,'grid','save',0);
};
}
if ($divCancel.length > 0) {
$divCancel[0].onclick = function () {
$.fn.fmatter.rowactions(newId,'grid','cancel',0);
};
}
lastSelectedRow = json.Id;
$("#grid").jqGrid('setSelection', lastSelectedRow);
The second problem is that you use special characters inside of ids. I found a bug in the $.fn.fmatter.rowactions which need be fixed to support special characters in ids. The problem is that in the line 407 of jquery.fmatter.js the original rowid parameter rid will be changed:
rid = $.jgrid.jqID( rid )
and later everywhere will be used modified id. For example in the id is my.id the encoded version will be my\\.id. It's correct for the most places of the $.fn.fmatter.rowactions code (see here), but it' s incorrect as the rowid parameter of the editRow, saveRow, restoreRow, delGridRow, setSelection and editGridRow (see the lines 433-453). So the code must be fixed to use the original not escaped (not encoded) rid value with which the $.fn.fmatter.rowactions was called.
I think I will post tomorrow the corresponding bug report with the suggestions in the trirand forum.
UPDATED 2: The code $.fn.fmatter.rowactions(newId,'grid','edit',0); which I wrote above is just an example. I took it from the test demo which you send me. You should of course modify the code for your purpose. How you can see for example from the line the second parameter of the $.fn.fmatter.rowactions in the id of the grid which you use: 'grid', 'list' of something like myGrid[0].id. The last parameter should be the index of the column having formatter:'actions' in the colModel. You can use getColumnIndexByName function from the answer on your old question to get the index by column name.