Guriddo » Topic: Add,Delete, Refresh etc missing when I hide a column

Add,Delete, Refresh etc missing when I hide a column

Guriddo
navgrid missing buttons, responsive
Add,Delete, Refresh etc missing when I hide a column

Tagged: navgrid missing buttons, responsive

This topic has 10 replies, 2 voices, and was last updated 10 years, 8 months ago by Chris.

Creator

Topic

August 20, 2015 at 9:39 pm #124265

Chris

Participant

This is an odd one as this logic was working fine on the previous trirand build, but seems to cause a problem in the latest V5 from github. I have played around with the code to narrow down what makes the difference.

So the query and call to the Guriddo PHP file is as follows:

Very simple and just provide the TagID – the select works fine an brings back the correct results every time.

The code in the new_tag_notes_grid.php is as follows:

&lt;!--?php if (!isset($_SESSION[&#039;grid_query&#039;])) { session_start(); } $_SESSION[&#039;user_type&#039;]==3 ? $editable=false : $editable = true; include __DIR__ . &#039;/../../include/jq-config.php&#039;; include __DIR__ . &#039;/../../include/jq-config-calendar.php&#039;; $conn = new PDO(DB_DSN,DB_USER,DB_PASSWORD); $conn-&gt;query(&quot;SET NAMES utf8&quot;);&lt;br ?--&gt; // Create the jqGrid instance
$conn-&gt;setAttribute( PDO::ATTR_EMULATE_PREPARES, false );
$conn-&gt;setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$grid = new jqGridRender($conn);
$grid-&gt;exportfile = &#039;ZipNFC_tag_notes_&#039;.$_SESSION[&#039;tagRef&#039;].&#039;.xls&#039;;
// Set the SQL Data source
$grid-&gt;serialKey = true;
$grid-&gt;setPrimaryKeyId(&#039;ID&#039;);
$grid-&gt;SelectCommand = $_SESSION[&#039;grid_query&#039;];
$grid-&gt;dataType = &#039;json&#039;;
// Let the grid create the model
$grid-&gt;table = &#039;tag_notes&#039;; // define the tabel used for deleting
$grid-&gt;setColModel();

$grid-&gt;setGridOptions(array(
&quot;rowNum&quot;=&gt;20,
&quot;search&quot;=&gt;false,
&quot;sortname&quot;=&gt;&quot;note_date&quot;,
&quot;sortorder&quot;=&gt;&quot;desc&quot;,
&quot;hoverrows&quot;=&gt;true,
&quot;shrinkToFit&quot;=&gt;true,
&quot;width&quot;=&gt;&#039;100%&#039;
));
$grid-&gt;setDatepicker(&#039;note_date&#039;, array(&quot;buttonIcon&quot;=&gt;true,&quot;dateFormat&quot;=&gt;&#039;dd-mm-yy&#039;), true, false);
$grid-&gt;datearray = array(&quot;note_date&quot;);
$grid-&gt;setUserDate(&quot;d-m-Y&quot;);
$grid-&gt;setDbDate(&quot;Y-m-d&quot;);
$grid-&gt;toolbarfilter = true;
$grid-&gt;navigator = true;
$grid-&gt;setNavOptions(&#039;navigator&#039;, array(&quot;excel&quot;=&gt;true,&quot;pdf&quot;=&gt;false, &quot;add&quot;=&gt;$editable,&quot;edit&quot;=&gt;$editable,&quot;del&quot;=&gt;$editable,&quot;view&quot;=&gt;false,&quot;cloneToTop&quot;=&gt;true));
$grid-&gt;setUrl(&quot;./services/jqgrid/new_tag_notes_grid.php&quot;);
$grid-&gt;setColProperty(&quot;ID&quot;, array(&quot;hidden&quot;=&gt;true));
$grid-&gt;setColProperty(&quot;TagID&quot;, array(&quot;hidden&quot;=&gt;true));

$grid-&gt;setColProperty(&quot;TagID&quot;, array(
&quot;editrules&quot;=&gt;array(&quot;edithidden&quot;=&gt;false),
&quot;editoptions&quot;=&gt;array(&quot;defaultValue&quot;=&gt;$_SESSION[&#039;tagRef&#039;]))
);

$grid-&gt;setColProperty(&quot;note_date&quot;, array(&quot;label&quot;=&gt;&#039;Date&#039;,&quot;width&quot;=&gt;&#039;50&#039;,&quot;formatter&quot;=&gt;&#039;date&#039;, &quot;formatoptions&quot;=&gt;array(&#039;srcformat&#039;=&gt;&#039;Y-m-d&#039;,&#039;newformat&#039;=&gt;&#039;d-m-y&#039;)));
$grid-&gt;setColProperty(&quot;notes&quot;, array(&quot;label&quot;=&gt;&#039;Notes&#039;,&quot;edittype&quot;=&gt;&#039;textarea&#039;,&quot;editoptions&quot;=&gt;array(&quot;rows&quot;=&gt;10,&quot;cols&quot;=&gt;40)));

$grid-&gt;setNavOptions(&#039;edit&#039;,array(&quot;width&quot;=&gt;400,&quot;height&quot;=&gt;250,&quot;dataheight&quot;=&gt;&#039;180&#039;));
$grid-&gt;setNavOptions(&#039;add&#039;,array(&quot;width&quot;=&gt;400,&quot;height&quot;=&gt;250,&quot;dataheight&quot;=&gt;&#039;180&#039;));
$grid-&gt;renderGrid(&#039;#action_grid&#039;,&#039;#action_pager&#039;,true, null, null, true,true);
$conn = null;
?&gt;

// Create the jqGrid instance

$conn->setAttribute( PDO::ATTR_EMULATE_PREPARES, false );

$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

$grid = new jqGridRender($conn);

$grid->exportfile = 'ZipNFC_tag_notes_'.$_SESSION['tagRef'].'.xls';

// Set the SQL Data source

$grid->serialKey = true;

$grid->setPrimaryKeyId('ID');

$grid->SelectCommand = $_SESSION['grid_query'];

$grid->dataType = 'json';

// Let the grid create the model

$grid->table = 'tag_notes'; // define the tabel used for deleting

$grid->setColModel();

$grid->setGridOptions(array(

"rowNum"=>20,

"search"=>false,

"sortname"=>"note_date",

"sortorder"=>"desc",

"hoverrows"=>true,

"shrinkToFit"=>true,

"width"=>'100%'

));

$grid->setDatepicker('note_date', array("buttonIcon"=>true,"dateFormat"=>'dd-mm-yy'), true, false);

$grid->datearray = array("note_date");

$grid->setUserDate("d-m-Y");

$grid->setDbDate("Y-m-d");

$grid->toolbarfilter = true;

$grid->navigator = true;

$grid->setNavOptions('navigator', array("excel"=>true,"pdf"=>false, "add"=>$editable,"edit"=>$editable,"del"=>$editable,"view"=>false,"cloneToTop"=>true));

$grid->setUrl("./services/jqgrid/new_tag_notes_grid.php");

$grid->setColProperty("ID", array("hidden"=>true));

$grid->setColProperty("TagID", array("hidden"=>true));

$grid->setColProperty("TagID", array(

"editrules"=>array("edithidden"=>false),

"editoptions"=>array("defaultValue"=>$_SESSION['tagRef']))

);

$grid->setColProperty("note_date", array("label"=>'Date',"width"=>'50',"formatter"=>'date', "formatoptions"=>array('srcformat'=>'Y-m-d','newformat'=>'d-m-y')));

$grid->setColProperty("notes", array("label"=>'Notes',"edittype"=>'textarea',"editoptions"=>array("rows"=>10,"cols"=>40)));

$grid->setNavOptions('edit',array("width"=>400,"height"=>250,"dataheight"=>'180'));

$grid->setNavOptions('add',array("width"=>400,"height"=>250,"dataheight"=>'180'));

$grid->renderGrid('#action_grid','#action_pager',true, null, null, true,true);

$conn = null;

The issue is – if include the $grid->setColProperty(“TagID”, array(“hidden”=>true)); it hides the column as required, but you lose all the icons for add, refesh, delete etc… if you do not hide it they appear.

What I am trying to achieve is to not show the ID and TagID fields and when in edit or new, to have the TagID in the form but not visible so gets saved back as a field. This used to work perfectly on the last build we were using.

Are we doing something wrong or hit on a glitch.

Many thanks – Chris.

This topic was modified 10 years, 8 months ago by Chris.

Creator

Topic

Viewing 10 replies - 1 through 10 (of 10 total)

Author

Replies

August 20, 2015 at 9:50 pm #124267

Chris

Participant

Here are some visuals:

Grid when TagId is hidden – no icons!

Grid showing no icons as TagID is hidden

Grid when TagID is not hidden – icons appear!

Grid showing icons as TagID is NOT hidden

This reply was modified 10 years, 8 months ago by Chris.

August 21, 2015 at 10:13 am #124277

tony

Keymaster

Hello Chris,

I think this is weird error.

In all cases I can not reproduce the problem, since I do not have the same enviroment.

Steps to look what is happen.

Run the script without hidden – after this use Chrom Dev tools or FireFox FireBug and copy the content of the script genereted from jqGrid.
Do the same with the hidden = true.
Compare the files

If possible can you please prepare a test case and send it to me – I mean full test case.

Thank you.

Kind Regards,

August 21, 2015 at 11:40 am #124281

Chris

Participant

Working on a test set of files, but to start with here is the script created when the TagID column is hidden and you do not see the icons:

jQuery(document).ready(function($) {jQuery(&#039;#action_grid&#039;).jqGrid({&quot;hoverrows&quot;:true,&quot;viewrecords&quot;:true,&quot;jsonReader&quot;:{&quot;repeatitems&quot;:false,&quot;subgrid&quot;:{&quot;repeatitems&quot;:false}},&quot;xmlReader&quot;:{&quot;repeatitems&quot;:false,&quot;subgrid&quot;:{&quot;repeatitems&quot;:false}},&quot;gridview&quot;:true,&quot;rowNum&quot;:20,&quot;search&quot;:false,&quot;sortname&quot;:&quot;note_date&quot;,&quot;sortorder&quot;:&quot;desc&quot;,&quot;shrinkToFit&quot;:true,&quot;width&quot;:&quot;100%&quot;,&quot;url&quot;:&quot;.\/services\/jqgrid\/new_tag_notes_grid.php&quot;,&quot;editurl&quot;:&quot;.\/services\/jqgrid\/new_tag_notes_grid.php&quot;,&quot;cellurl&quot;:&quot;.\/services\/jqgrid\/new_tag_notes_grid.php&quot;,&quot;datatype&quot;:&quot;json&quot;,&quot;colModel&quot;:[{&quot;name&quot;:&quot;note_date&quot;,&quot;index&quot;:&quot;note_date&quot;,&quot;sorttype&quot;:&quot;date&quot;,&quot;editoptions&quot;:{&quot;dataInit&quot;:function(el){setTimeout(function(){if(jQuery.ui) { if(jQuery.ui.datepicker) { jQuery(el).after(&#039;&lt;button&gt;Calendar&lt;/button&gt;&#039;).next().button({icons:{primary: &#039;ui-icon-calendar&#039;}, text:false}).css({&#039;font-size&#039;:&#039;75%&#039;}).click(function(e){jQuery(el).datepicker(&#039;show&#039;);return false;});jQuery(el).datepicker({&quot;disabled&quot;:false,&quot;dateFormat&quot;:&quot;dd-mm-yy&quot;});jQuery(&#039;.ui-datepicker&#039;).css({&#039;font-size&#039;:&#039;75%&#039;});} }},100);}},&quot;label&quot;:&quot;Date&quot;,&quot;width&quot;:&quot;50&quot;,&quot;formatter&quot;:&quot;date&quot;,&quot;formatoptions&quot;:{&quot;srcformat&quot;:&quot;Y-m-d&quot;,&quot;newformat&quot;:&quot;d-m-y&quot;},&quot;editable&quot;:true},{&quot;name&quot;:&quot;notes&quot;,&quot;index&quot;:&quot;notes&quot;,&quot;sorttype&quot;:&quot;string&quot;,&quot;label&quot;:&quot;Notes&quot;,&quot;edittype&quot;:&quot;textarea&quot;,&quot;editoptions&quot;:{&quot;rows&quot;:10,&quot;cols&quot;:40},&quot;editable&quot;:true},{&quot;name&quot;:&quot;ID&quot;,&quot;index&quot;:&quot;ID&quot;,&quot;sorttype&quot;:&quot;int&quot;,&quot;key&quot;:true,&quot;hidden&quot;:true,&quot;editable&quot;:true},{&quot;name&quot;:&quot;TagID&quot;,&quot;index&quot;:&quot;TagID&quot;,&quot;sorttype&quot;:&quot;int&quot;,&quot;hidden&quot;:true,&quot;editrules&quot;:{&quot;edithidden&quot;:false},&quot;editoptions&quot;:{&quot;defaultValue&quot;:&quot;5&quot;},&quot;editable&quot;:true}],&quot;postData&quot;:{&quot;oper&quot;:&quot;grid&quot;},&quot;prmNames&quot;:{&quot;page&quot;:&quot;page&quot;,&quot;rows&quot;:&quot;rows&quot;,&quot;sort&quot;:&quot;sidx&quot;,&quot;order&quot;:&quot;sord&quot;,&quot;search&quot;:&quot;_search&quot;,&quot;nd&quot;:&quot;nd&quot;,&quot;id&quot;:&quot;ID&quot;,&quot;filter&quot;:&quot;filters&quot;,&quot;searchField&quot;:&quot;searchField&quot;,&quot;searchOper&quot;:&quot;searchOper&quot;,&quot;searchString&quot;:&quot;searchString&quot;,&quot;oper&quot;:&quot;oper&quot;,&quot;query&quot;:&quot;grid&quot;,&quot;addoper&quot;:&quot;add&quot;,&quot;editoper&quot;:&quot;edit&quot;,&quot;deloper&quot;:&quot;del&quot;,&quot;excel&quot;:&quot;excel&quot;,&quot;subgrid&quot;:&quot;subgrid&quot;,&quot;totalrows&quot;:&quot;totalrows&quot;,&quot;autocomplete&quot;:&quot;autocmpl&quot;},&quot;loadError&quot;:function(xhr,status, err){ try {jQuery.jgrid.info_dialog(jQuery.jgrid.errors.errcap,&#039;
&lt;div class=&quot;ui-state-error&quot;&gt;&#039;+ xhr.responseText +&#039;&lt;/div&gt;
&#039;, jQuery.jgrid.edit.bClose,{buttonalign:&#039;right&#039;});} catch(e) { alert(xhr.responseText);} },&quot;pager&quot;:&quot;#action_pager&quot;});jQuery(&#039;#action_grid&#039;).jqGrid(&#039;navGrid&#039;,&#039;#action_pager&#039;,{&quot;edit&quot;:true,&quot;add&quot;:true,&quot;del&quot;:true,&quot;search&quot;:true,&quot;refresh&quot;:true,&quot;view&quot;:false,&quot;excel&quot;:true,&quot;pdf&quot;:false,&quot;csv&quot;:false,&quot;columns&quot;:false,&quot;cloneToTop&quot;:true},{&quot;drag&quot;:true,&quot;resize&quot;:true,&quot;closeOnEscape&quot;:true,&quot;dataheight&quot;:&quot;180&quot;,&quot;errorTextFormat&quot;:function(r){ return r.responseText;},&quot;width&quot;:400,&quot;height&quot;:250},{&quot;drag&quot;:true,&quot;resize&quot;:true,&quot;closeOnEscape&quot;:true,&quot;dataheight&quot;:&quot;180&quot;,&quot;errorTextFormat&quot;:function(r){ return r.responseText;},&quot;width&quot;:400,&quot;height&quot;:250},{&quot;errorTextFormat&quot;:function(r){ return r.responseText;}},{&quot;drag&quot;:true,&quot;closeAfterSearch&quot;:true,&quot;multipleSearch&quot;:true},{&quot;drag&quot;:true,&quot;resize&quot;:true,&quot;closeOnEscape&quot;:true,&quot;dataheight&quot;:150});jQuery(&#039;#action_grid&#039;).jqGrid(&#039;navButtonAdd&#039;,&#039;#action_pager&#039;,{id:&#039;action_pager_excel&#039;, caption:&#039;&#039;,title:&#039;Export To Excel&#039;,onClickButton : function(e)
{
try {
jQuery(&quot;#action_grid&quot;).jqGrid(&#039;excelExport&#039;,{tag:&#039;excel&#039;, url:&#039;./services/jqgrid/new_tag_notes_grid.php&#039;});
} catch (e) {
window.location= &#039;./services/jqgrid/new_tag_notes_grid.php?oper=excel&#039;;
}
},buttonicon:&#039;ui-icon-newwin&#039;});jQuery(&#039;#action_grid&#039;).jqGrid(&#039;filterToolbar&#039;,{&quot;stringResult&quot;:true});
});

jQuery(document).ready(function($) {jQuery('#action_grid').jqGrid({"hoverrows":true,"viewrecords":true,"jsonReader":{"repeatitems":false,"subgrid":{"repeatitems":false}},"xmlReader":{"repeatitems":false,"subgrid":{"repeatitems":false}},"gridview":true,"rowNum":20,"search":false,"sortname":"note_date","sortorder":"desc","shrinkToFit":true,"width":"100%","url":".\/services\/jqgrid\/new_tag_notes_grid.php","editurl":".\/services\/jqgrid\/new_tag_notes_grid.php","cellurl":".\/services\/jqgrid\/new_tag_notes_grid.php","datatype":"json","colModel":[{"name":"note_date","index":"note_date","sorttype":"date","editoptions":{"dataInit":function(el){setTimeout(function(){if(jQuery.ui) { if(jQuery.ui.datepicker) { jQuery(el).after('<button>Calendar</button>').next().button({icons:{primary: 'ui-icon-calendar'}, text:false}).css({'font-size':'75%'}).click(function(e){jQuery(el).datepicker('show');return false;});jQuery(el).datepicker({"disabled":false,"dateFormat":"dd-mm-yy"});jQuery('.ui-datepicker').css({'font-size':'75%'});} }},100);}},"label":"Date","width":"50","formatter":"date","formatoptions":{"srcformat":"Y-m-d","newformat":"d-m-y"},"editable":true},{"name":"notes","index":"notes","sorttype":"string","label":"Notes","edittype":"textarea","editoptions":{"rows":10,"cols":40},"editable":true},{"name":"ID","index":"ID","sorttype":"int","key":true,"hidden":true,"editable":true},{"name":"TagID","index":"TagID","sorttype":"int","hidden":true,"editrules":{"edithidden":false},"editoptions":{"defaultValue":"5"},"editable":true}],"postData":{"oper":"grid"},"prmNames":{"page":"page","rows":"rows","sort":"sidx","order":"sord","search":"_search","nd":"nd","id":"ID","filter":"filters","searchField":"searchField","searchOper":"searchOper","searchString":"searchString","oper":"oper","query":"grid","addoper":"add","editoper":"edit","deloper":"del","excel":"excel","subgrid":"subgrid","totalrows":"totalrows","autocomplete":"autocmpl"},"loadError":function(xhr,status, err){ try {jQuery.jgrid.info_dialog(jQuery.jgrid.errors.errcap,'

<div class="ui-state-error">'+ xhr.responseText +'</div>

', jQuery.jgrid.edit.bClose,{buttonalign:'right'});} catch(e) { alert(xhr.responseText);} },"pager":"#action_pager"});jQuery('#action_grid').jqGrid('navGrid','#action_pager',{"edit":true,"add":true,"del":true,"search":true,"refresh":true,"view":false,"excel":true,"pdf":false,"csv":false,"columns":false,"cloneToTop":true},{"drag":true,"resize":true,"closeOnEscape":true,"dataheight":"180","errorTextFormat":function(r){ return r.responseText;},"width":400,"height":250},{"drag":true,"resize":true,"closeOnEscape":true,"dataheight":"180","errorTextFormat":function(r){ return r.responseText;},"width":400,"height":250},{"errorTextFormat":function(r){ return r.responseText;}},{"drag":true,"closeAfterSearch":true,"multipleSearch":true},{"drag":true,"resize":true,"closeOnEscape":true,"dataheight":150});jQuery('#action_grid').jqGrid('navButtonAdd','#action_pager',{id:'action_pager_excel', caption:'',title:'Export To Excel',onClickButton : function(e)

{

try {

jQuery("#action_grid").jqGrid('excelExport',{tag:'excel', url:'./services/jqgrid/new_tag_notes_grid.php'});

} catch (e) {

window.location= './services/jqgrid/new_tag_notes_grid.php?oper=excel';

}

},buttonicon:'ui-icon-newwin'});jQuery('#action_grid').jqGrid('filterToolbar',{"stringResult":true});

});

AND here is the script generated when the TagID is not hidden and you see the icons:

jQuery(document).ready(function($) {jQuery(&#039;#action_grid&#039;).jqGrid({&quot;hoverrows&quot;:true,&quot;viewrecords&quot;:true,&quot;jsonReader&quot;:{&quot;repeatitems&quot;:false,&quot;subgrid&quot;:{&quot;repeatitems&quot;:false}},&quot;xmlReader&quot;:{&quot;repeatitems&quot;:false,&quot;subgrid&quot;:{&quot;repeatitems&quot;:false}},&quot;gridview&quot;:true,&quot;rowNum&quot;:20,&quot;search&quot;:false,&quot;sortname&quot;:&quot;note_date&quot;,&quot;sortorder&quot;:&quot;desc&quot;,&quot;shrinkToFit&quot;:true,&quot;width&quot;:&quot;100%&quot;,&quot;url&quot;:&quot;.\/services\/jqgrid\/new_tag_notes_grid.php&quot;,&quot;editurl&quot;:&quot;.\/services\/jqgrid\/new_tag_notes_grid.php&quot;,&quot;cellurl&quot;:&quot;.\/services\/jqgrid\/new_tag_notes_grid.php&quot;,&quot;datatype&quot;:&quot;json&quot;,&quot;colModel&quot;:[{&quot;name&quot;:&quot;note_date&quot;,&quot;index&quot;:&quot;note_date&quot;,&quot;sorttype&quot;:&quot;date&quot;,&quot;editoptions&quot;:{&quot;dataInit&quot;:function(el){setTimeout(function(){if(jQuery.ui) { if(jQuery.ui.datepicker) { jQuery(el).after(&#039;&lt;button&gt;Calendar&lt;/button&gt;&#039;).next().button({icons:{primary: &#039;ui-icon-calendar&#039;}, text:false}).css({&#039;font-size&#039;:&#039;75%&#039;}).click(function(e){jQuery(el).datepicker(&#039;show&#039;);return false;});jQuery(el).datepicker({&quot;disabled&quot;:false,&quot;dateFormat&quot;:&quot;dd-mm-yy&quot;});jQuery(&#039;.ui-datepicker&#039;).css({&#039;font-size&#039;:&#039;75%&#039;});} }},100);}},&quot;label&quot;:&quot;Date&quot;,&quot;width&quot;:&quot;50&quot;,&quot;formatter&quot;:&quot;date&quot;,&quot;formatoptions&quot;:{&quot;srcformat&quot;:&quot;Y-m-d&quot;,&quot;newformat&quot;:&quot;d-m-y&quot;},&quot;editable&quot;:true},{&quot;name&quot;:&quot;notes&quot;,&quot;index&quot;:&quot;notes&quot;,&quot;sorttype&quot;:&quot;string&quot;,&quot;label&quot;:&quot;Notes&quot;,&quot;edittype&quot;:&quot;textarea&quot;,&quot;editoptions&quot;:{&quot;rows&quot;:10,&quot;cols&quot;:40},&quot;editable&quot;:true},{&quot;name&quot;:&quot;ID&quot;,&quot;index&quot;:&quot;ID&quot;,&quot;sorttype&quot;:&quot;int&quot;,&quot;key&quot;:true,&quot;hidden&quot;:true,&quot;editable&quot;:true},{&quot;name&quot;:&quot;TagID&quot;,&quot;index&quot;:&quot;TagID&quot;,&quot;sorttype&quot;:&quot;int&quot;,&quot;editrules&quot;:{&quot;edithidden&quot;:false},&quot;editoptions&quot;:{&quot;defaultValue&quot;:&quot;5&quot;},&quot;editable&quot;:true}],&quot;postData&quot;:{&quot;oper&quot;:&quot;grid&quot;},&quot;prmNames&quot;:{&quot;page&quot;:&quot;page&quot;,&quot;rows&quot;:&quot;rows&quot;,&quot;sort&quot;:&quot;sidx&quot;,&quot;order&quot;:&quot;sord&quot;,&quot;search&quot;:&quot;_search&quot;,&quot;nd&quot;:&quot;nd&quot;,&quot;id&quot;:&quot;ID&quot;,&quot;filter&quot;:&quot;filters&quot;,&quot;searchField&quot;:&quot;searchField&quot;,&quot;searchOper&quot;:&quot;searchOper&quot;,&quot;searchString&quot;:&quot;searchString&quot;,&quot;oper&quot;:&quot;oper&quot;,&quot;query&quot;:&quot;grid&quot;,&quot;addoper&quot;:&quot;add&quot;,&quot;editoper&quot;:&quot;edit&quot;,&quot;deloper&quot;:&quot;del&quot;,&quot;excel&quot;:&quot;excel&quot;,&quot;subgrid&quot;:&quot;subgrid&quot;,&quot;totalrows&quot;:&quot;totalrows&quot;,&quot;autocomplete&quot;:&quot;autocmpl&quot;},&quot;loadError&quot;:function(xhr,status, err){ try {jQuery.jgrid.info_dialog(jQuery.jgrid.errors.errcap,&#039;
&lt;div class=&quot;ui-state-error&quot;&gt;&#039;+ xhr.responseText +&#039;&lt;/div&gt;
&#039;, jQuery.jgrid.edit.bClose,{buttonalign:&#039;right&#039;});} catch(e) { alert(xhr.responseText);} },&quot;pager&quot;:&quot;#action_pager&quot;});jQuery(&#039;#action_grid&#039;).jqGrid(&#039;navGrid&#039;,&#039;#action_pager&#039;,{&quot;edit&quot;:true,&quot;add&quot;:true,&quot;del&quot;:true,&quot;search&quot;:true,&quot;refresh&quot;:true,&quot;view&quot;:false,&quot;excel&quot;:true,&quot;pdf&quot;:false,&quot;csv&quot;:false,&quot;columns&quot;:false,&quot;cloneToTop&quot;:true},{&quot;drag&quot;:true,&quot;resize&quot;:true,&quot;closeOnEscape&quot;:true,&quot;dataheight&quot;:&quot;180&quot;,&quot;errorTextFormat&quot;:function(r){ return r.responseText;},&quot;width&quot;:400,&quot;height&quot;:250},{&quot;drag&quot;:true,&quot;resize&quot;:true,&quot;closeOnEscape&quot;:true,&quot;dataheight&quot;:&quot;180&quot;,&quot;errorTextFormat&quot;:function(r){ return r.responseText;},&quot;width&quot;:400,&quot;height&quot;:250},{&quot;errorTextFormat&quot;:function(r){ return r.responseText;}},{&quot;drag&quot;:true,&quot;closeAfterSearch&quot;:true,&quot;multipleSearch&quot;:true},{&quot;drag&quot;:true,&quot;resize&quot;:true,&quot;closeOnEscape&quot;:true,&quot;dataheight&quot;:150});jQuery(&#039;#action_grid&#039;).jqGrid(&#039;navButtonAdd&#039;,&#039;#action_pager&#039;,{id:&#039;action_pager_excel&#039;, caption:&#039;&#039;,title:&#039;Export To Excel&#039;,onClickButton : function(e)
{
try {
jQuery(&quot;#action_grid&quot;).jqGrid(&#039;excelExport&#039;,{tag:&#039;excel&#039;, url:&#039;./services/jqgrid/new_tag_notes_grid.php&#039;});
} catch (e) {
window.location= &#039;./services/jqgrid/new_tag_notes_grid.php?oper=excel&#039;;
}
},buttonicon:&#039;ui-icon-newwin&#039;});jQuery(&#039;#action_grid&#039;).jqGrid(&#039;filterToolbar&#039;,{&quot;stringResult&quot;:true});
});

jQuery(document).ready(function($) {jQuery('#action_grid').jqGrid({"hoverrows":true,"viewrecords":true,"jsonReader":{"repeatitems":false,"subgrid":{"repeatitems":false}},"xmlReader":{"repeatitems":false,"subgrid":{"repeatitems":false}},"gridview":true,"rowNum":20,"search":false,"sortname":"note_date","sortorder":"desc","shrinkToFit":true,"width":"100%","url":".\/services\/jqgrid\/new_tag_notes_grid.php","editurl":".\/services\/jqgrid\/new_tag_notes_grid.php","cellurl":".\/services\/jqgrid\/new_tag_notes_grid.php","datatype":"json","colModel":[{"name":"note_date","index":"note_date","sorttype":"date","editoptions":{"dataInit":function(el){setTimeout(function(){if(jQuery.ui) { if(jQuery.ui.datepicker) { jQuery(el).after('<button>Calendar</button>').next().button({icons:{primary: 'ui-icon-calendar'}, text:false}).css({'font-size':'75%'}).click(function(e){jQuery(el).datepicker('show');return false;});jQuery(el).datepicker({"disabled":false,"dateFormat":"dd-mm-yy"});jQuery('.ui-datepicker').css({'font-size':'75%'});} }},100);}},"label":"Date","width":"50","formatter":"date","formatoptions":{"srcformat":"Y-m-d","newformat":"d-m-y"},"editable":true},{"name":"notes","index":"notes","sorttype":"string","label":"Notes","edittype":"textarea","editoptions":{"rows":10,"cols":40},"editable":true},{"name":"ID","index":"ID","sorttype":"int","key":true,"hidden":true,"editable":true},{"name":"TagID","index":"TagID","sorttype":"int","editrules":{"edithidden":false},"editoptions":{"defaultValue":"5"},"editable":true}],"postData":{"oper":"grid"},"prmNames":{"page":"page","rows":"rows","sort":"sidx","order":"sord","search":"_search","nd":"nd","id":"ID","filter":"filters","searchField":"searchField","searchOper":"searchOper","searchString":"searchString","oper":"oper","query":"grid","addoper":"add","editoper":"edit","deloper":"del","excel":"excel","subgrid":"subgrid","totalrows":"totalrows","autocomplete":"autocmpl"},"loadError":function(xhr,status, err){ try {jQuery.jgrid.info_dialog(jQuery.jgrid.errors.errcap,'

<div class="ui-state-error">'+ xhr.responseText +'</div>

{

try {

jQuery("#action_grid").jqGrid('excelExport',{tag:'excel', url:'./services/jqgrid/new_tag_notes_grid.php'});

} catch (e) {

window.location= './services/jqgrid/new_tag_notes_grid.php?oper=excel';

}

},buttonicon:'ui-icon-newwin'});jQuery('#action_grid').jqGrid('filterToolbar',{"stringResult":true});

});

August 21, 2015 at 12:58 pm #124282

Chris

Participant

OK – I have created a test file and can replicate it. The issue seems to be related to the width set in gridoptions. If I use a width of 100% (my normal setting) then it will not show the icons if I hide the TagID field. If I set it to say 600 it works! If I set it to 200 it does not work.

Here is the PHP file and services it calls. I have left the width at 300 so you can see it not displaying…

&lt;HTML&gt;
&lt;head&gt;

&lt;!-- Contact Form CSS files --&gt;
&lt;link type=&#039;text/css&#039; href=&#039;stylesheet/basic.css&#039; rel=&#039;stylesheet&#039; media=&#039;screen&#039; /&gt;
&lt;link type=&#039;text/css&#039; href=&#039;stylesheet/jquery-ui/jquery-ui.css&#039; rel=&#039;stylesheet&#039; media=&#039;screen&#039; /&gt;

&lt;script src=&quot;javascript/jquery-1.11.0.min.js&quot; language=&quot;javascript&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;javascript/jquery-ui/1.10.4/jquery-ui.min.js&quot;&gt;&lt;/script&gt;

&lt;script src=&quot;gridChartFramework/js/trirand/jquery.jqGrid.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;gridChartFramework/js/trirand/i18n/grid.locale-en.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;$.jgrid.no_legacy_api = true;&lt;/script&gt;

&lt;!-- jquery.jqgrid CSS --&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot; href=&quot;gridChartFramework/css/trirand/ui.jqgrid.css&quot; /&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot; href=&quot;gridChartFramework/css//ui.multiselect.css&quot; /&gt; 
&lt;/head&gt;
&lt;body&gt;
&lt;?php $_SESSION[&#039;gridName&#039;] = pathinfo($_SERVER[&#039;PHP_SELF&#039;], PATHINFO_FILENAME);?&gt;
&lt;?php
$_SESSION[&#039;tagRef&#039;] = 4;
$_SESSION[&#039;grid_query&#039;]=&quot;select note_date,notes,ID,TagID FROM tag_notes WHERE TagID = 4&quot;;
                          include_once &#039;./services/jqgrid/new_tag_notes_grid.php&#039;;
?&gt;

&lt;/body&gt;
&lt;/HTML&gt;

<HTML>

<head>

</head>

<body>

<?php $_SESSION['gridName'] = pathinfo($_SERVER['PHP_SELF'], PATHINFO_FILENAME);?>

<?php

$_SESSION['tagRef'] = 4;

$_SESSION['grid_query']="select note_date,notes,ID,TagID FROM tag_notes WHERE TagID = 4";

include_once './services/jqgrid/new_tag_notes_grid.php';

</body>

</HTML>

&lt;?php 
if (!isset($_SESSION[&#039;grid_query&#039;])) {
	session_start();
}
$editable = true;
include __DIR__ . &#039;/../../include/jq-config.php&#039;;
include __DIR__ . &#039;/../../include/jq-config-calendar.php&#039;;
$conn = new PDO(DB_DSN,DB_USER,DB_PASSWORD);
$conn-&gt;query(&quot;SET NAMES utf8&quot;);
// Create the jqGrid instance
$conn-&gt;setAttribute( PDO::ATTR_EMULATE_PREPARES, false );
$conn-&gt;setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$grid = new jqGridRender($conn);
$grid-&gt;exportfile = &#039;ZipNFC_tag_notes_&#039;.$_SESSION[&#039;tagRef&#039;].&#039;.xls&#039;;
// Set the SQL Data source
$grid-&gt;serialKey = true;
$grid-&gt;debug = true;
$grid-&gt;setPrimaryKeyId(&#039;ID&#039;);
$grid-&gt;SelectCommand = $_SESSION[&#039;grid_query&#039;]; 
$grid-&gt;dataType = &#039;json&#039;;
// Let the grid create the model
$grid-&gt;table = &#039;tag_notes&#039;; // define the tabel used for deleting
$grid-&gt;setColModel();

$grid-&gt;setGridOptions(array(
        &quot;rowNum&quot;=&gt;20,
		&quot;sortname&quot;=&gt;&quot;note_date&quot;,
		&quot;sortorder&quot;=&gt;&quot;desc&quot;,
		&quot;hoverrows&quot;=&gt;true,
        &quot;shrinktofit&quot;=&gt;true,
        &quot;width&quot;=&gt;&quot;300&quot;    
));
$grid-&gt;setDatepicker(&#039;note_date&#039;, array(&quot;buttonIcon&quot;=&gt;true,&quot;dateFormat&quot;=&gt;&#039;dd-mm-yy&#039;), true, false);
$grid-&gt;datearray = array(&quot;note_date&quot;);
$grid-&gt;setUserDate(&quot;d-m-Y&quot;);
$grid-&gt;setDbDate(&quot;Y-m-d&quot;);
$grid-&gt;toolbarfilter = true;
$grid-&gt;navigator = true;
$grid-&gt;setNavOptions(&#039;navigator&#039;, array(&quot;excel&quot;=&gt;true,&quot;pdf&quot;=&gt;false, &quot;add&quot;=&gt;$editable,&quot;edit&quot;=&gt;$editable,&quot;del&quot;=&gt;$editable,&quot;view&quot;=&gt;false,&quot;cloneToTop&quot;=&gt;true));
$grid-&gt;setUrl(&quot;./services/jqgrid/new_tag_notes_grid.php&quot;);
$grid-&gt;setColProperty(&quot;ID&quot;, array(&quot;hidden&quot;=&gt;true));
$grid-&gt;setColProperty(&quot;TagID&quot;, array(&quot;hidden&quot;=&gt;true));

$grid-&gt;setColProperty(&quot;TagID&quot;, array(
    &quot;editrules&quot;=&gt;array(&quot;edithidden&quot;=&gt;false),
    &quot;editoptions&quot;=&gt;array(&quot;defaultValue&quot;=&gt;$_SESSION[&#039;tagRef&#039;]))
);

$grid-&gt;setColProperty(&quot;note_date&quot;, array(&quot;label&quot;=&gt;&#039;Date&#039;,&quot;width&quot;=&gt;&#039;50&#039;,&quot;formatter&quot;=&gt;&#039;date&#039;, &quot;formatoptions&quot;=&gt;array(&#039;srcformat&#039;=&gt;&#039;Y-m-d&#039;,&#039;newformat&#039;=&gt;&#039;d-m-y&#039;)));
$grid-&gt;setColProperty(&quot;notes&quot;, array(&quot;label&quot;=&gt;&#039;Notes&#039;,&quot;edittype&quot;=&gt;&#039;textarea&#039;,&quot;editoptions&quot;=&gt;array(&quot;rows&quot;=&gt;10,&quot;cols&quot;=&gt;40)));

$grid-&gt;setNavOptions(&#039;edit&#039;,array(&quot;width&quot;=&gt;400,&quot;height&quot;=&gt;250,&quot;dataheight&quot;=&gt;&#039;180&#039;));
$grid-&gt;setNavOptions(&#039;add&#039;,array(&quot;width&quot;=&gt;400,&quot;height&quot;=&gt;250,&quot;dataheight&quot;=&gt;&#039;180&#039;));
$grid-&gt;renderGrid(&#039;#action_grid&#039;,&#039;#action_pager&#039;,true, null, null, true,true);
$conn = null;
?&gt;

<?php

if (!isset($_SESSION['grid_query'])) {

session_start();

}

$editable = true;

include __DIR__ . '/../../include/jq-config.php';

include __DIR__ . '/../../include/jq-config-calendar.php';

$conn = new PDO(DB_DSN,DB_USER,DB_PASSWORD);

$conn->query("SET NAMES utf8");

// Create the jqGrid instance

$conn->setAttribute( PDO::ATTR_EMULATE_PREPARES, false );

$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

$grid = new jqGridRender($conn);

$grid->exportfile = 'ZipNFC_tag_notes_'.$_SESSION['tagRef'].'.xls';

// Set the SQL Data source

$grid->serialKey = true;

$grid->debug = true;

$grid->setPrimaryKeyId('ID');

$grid->SelectCommand = $_SESSION['grid_query'];

$grid->dataType = 'json';

// Let the grid create the model

$grid->table = 'tag_notes'; // define the tabel used for deleting

$grid->setColModel();

$grid->setGridOptions(array(

"rowNum"=>20,

"sortname"=>"note_date",

"sortorder"=>"desc",

"hoverrows"=>true,

"shrinktofit"=>true,

"width"=>"300"

));

$grid->setDatepicker('note_date', array("buttonIcon"=>true,"dateFormat"=>'dd-mm-yy'), true, false);

$grid->datearray = array("note_date");

$grid->setUserDate("d-m-Y");

$grid->setDbDate("Y-m-d");

$grid->toolbarfilter = true;

$grid->navigator = true;

$grid->setNavOptions('navigator', array("excel"=>true,"pdf"=>false, "add"=>$editable,"edit"=>$editable,"del"=>$editable,"view"=>false,"cloneToTop"=>true));

$grid->setUrl("./services/jqgrid/new_tag_notes_grid.php");

$grid->setColProperty("ID", array("hidden"=>true));

$grid->setColProperty("TagID", array("hidden"=>true));

$grid->setColProperty("TagID", array(

"editrules"=>array("edithidden"=>false),

"editoptions"=>array("defaultValue"=>$_SESSION['tagRef']))

);

$grid->setColProperty("note_date", array("label"=>'Date',"width"=>'50',"formatter"=>'date', "formatoptions"=>array('srcformat'=>'Y-m-d','newformat'=>'d-m-y')));

$grid->setColProperty("notes", array("label"=>'Notes',"edittype"=>'textarea',"editoptions"=>array("rows"=>10,"cols"=>40)));

$grid->setNavOptions('edit',array("width"=>400,"height"=>250,"dataheight"=>'180'));

$grid->setNavOptions('add',array("width"=>400,"height"=>250,"dataheight"=>'180'));

$grid->renderGrid('#action_grid','#action_pager',true, null, null, true,true);

$conn = null;

August 21, 2015 at 1:41 pm #124283

Chris

Participant

Hi Tony, by the way I have now changed all from 100% to 800 and it works fine, so there is no great urgency on this one, but I guess it would be nice to know why it is acting strangely based on width.

We also resize the grid once in anyway as it is dependant on the browser width and height, so it is odd as the size of the grid ends up the same based on this whether I set the PHP to 100% or 800, but it decides not to include the icons in the left pager.

As I said if you set the width so something small like 200 or 300 it decides not to include the icons also.

Hope this all helps, but if you need anything else from me let me know.

August 21, 2015 at 5:31 pm #124284

tony

Keymaster

Hello Chris,

I think maybe I know why is this. Could you please let me know if you set 100% of the width how is the width of the grid in this case – it is little than 800?

This is related maybe with the new property when the width in the left navigator does not fit it will use a button.

Can you please try to set responsive => true in grid options and see what will be.

P.S Do you have set the latest CSS file and language file.

I see some settings which should be corrected

Kind Regards,

This reply was modified 10 years, 8 months ago by tony.

August 21, 2015 at 8:30 pm #124286

Chris

Participant

Hello – so when I use the responsive=>true with 100% I do get the button available. Unfortunately when I click on the button I see the menu of options and the then it reloads the form , so not getting a chance to click on the menu options. Not sure why as yet.

The strange thing is that whether I use 100% and responsive or specify the 800 the grid always gets resized the same size and with 800 being used I see the normal icons and the with 100% and responsive I see the button (even thought it is not working on my example) so I guess the calculation or logic to determine if there is not enough room my be a bit off. The grid size after it gets resized on a normal laptop screen is 400px width.

Not sure of my display problems on the button have anything to do with the CSS I am using, but if you can point me in the right direction as I am using the CSS from the trirand directory structure?

/css/trirand/ui.jqgrid.css”
/css//ui.multiselect.css”

Where is the latest CSS held and language?

Thanks for your help Tony.

August 21, 2015 at 8:53 pm #124287

Chris

Participant

I have added a video here showing how this is behaving. Might well be something to do with the set-up I have but not sure.

VIDEO of behavour

You will need to use a PW of TONYJQGRID

Cheers, Chris.

August 22, 2015 at 12:25 pm #124292

tony

Keymaster

Hello Chris,

Thanks for the information and demo provided.

There was a bug in navgrid when saving the default behaviour.

I have fixed this problem.

You can use now your default setting skipping the responsible responsive option.

As I can see there is another bug here which I will try to fix next week.

You can download the updated version from GitHub.

Please let me know if the problem is fixed.

Kind Regards,

August 22, 2015 at 3:01 pm #124293

Chris

Participant

Hi Tony – tested and all works perfectly so it works as it did before. Nice. I also used the .min.js version and all the other functions works perfectly too like the filters and excel/pdf buttons are all working.

Add,Delete, Refresh etc missing when I hide a column

Search Forum

Recent Replies

Forum Statistics

UserOnline