Guriddo » selfmade01's Replies

selfmade01

Guriddo

Forum Replies Created

Viewing 15 replies - 16 through 30 (of 32 total)

← 1 2 3 →

Author

Replies

February 4, 2015 at 12:14 am in reply to: grid as subgrid with option fields #117882

selfmade01

Participant

hello,

sorry but i don’t find also a sample with hidden-tag.

i would like give some id’s to my subgrid.php

like that

$grid-&gt;setColProperty(&#039;hardwareInfoId&#039;, array(&quot;editoptions&quot;=&gt;array(&quot;readonly&quot;=&gt;true)));
$grid-&gt;setColProperty(&quot;hardwareGroup&quot;, array(&quot;hidden&quot;=&gt;true));
$params = array(&quot;hardwareInfoId&quot;=&gt;&quot;hardwareInfoId&quot;, &quot;hardwareGroup&quot;=&gt;&quot;hardwareGroup&quot;,&quot;hardwareSettingsId&quot;=&gt;&quot;hardwareSettingsId&quot; );

$grid->setColProperty('hardwareInfoId', array("editoptions"=>array("readonly"=>true)));

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

$params = array("hardwareInfoId"=>"hardwareInfoId", "hardwareGroup"=>"hardwareGroup","hardwareSettingsId"=>"hardwareSettingsId" );

i can only push the hardwareInfoId.

The hardwareInfoId i can show in my base-table.

all other id’s i get with my SELECT but i would like not show on my table.

If i not show, i can not push to my subgrid.

I never find any sample to see how i can add hidden-id’s to subgrid.

$grid->setSubGridGrid("incl/hardwareDetails.php", array("hardwareInfoId","hardwareGroup", "hardwareSettingsId"));

Best regards

Achim

February 3, 2015 at 8:26 pm in reply to: grid as subgrid with option fields #117815

selfmade01

Participant

Hello,

i looking now a lot for sample with

$grid->setColModel();

i find only a sample to create my table-header like

$mylabels = array(
“roomNr”=>_(‘Room Nr.’),
“roomType”=>_(‘Room type’);

$grid->setColModel(null, null,$mylabels );

but i would like also create my colums

i find only a lot of sample for Javascript.

colModel:[{….}]; // on my other testpage work this fine

but now i would like create my base-table with only a few colum’s

my mysql-select is

Select * from mytable;

i get there a lot of colums, but i would like show only a few colums in my webside-table.

best regards

Achim

Question:

i work with php and mysql.

on my first testpage i let create the jqgrid-table with javascript

thats works very good.

now i let create the base-table with php and only my edit/add-forms are in javascript.

Is this mix ok (create the base-table with php and all others with javsacript) or is more easy to create all with javascript?

I know, my subgrid’s or datas i get from php with ajax!

best regards

achim

February 3, 2015 at 1:37 pm in reply to: grid as subgrid with option fields #117769

selfmade01

Participant

Thank you for that link.

I am looking very much but finding the right sample is not easy

best regards

Achim

February 3, 2015 at 10:11 am in reply to: grid as subgrid with option fields #117706

selfmade01

Participant

Hello Tony,

oh, I thought the problem with my formated code in this thread.

(i switch before already to text mode, but my formated code looks like crazy)

next time i will see.

Yes, i use now the latest jquery lib’s and jqGrid lib’s , no works fine.

One question please .

I build now this sample

http://www.trirand.com/blog/phpjqgrid/examples/hierarchy/subgrid_2_levels/default.php

i see i get in my subgrid.php

rowid and subgrid

i call the subgrid.php from my base-side with

$grid->setSubGridGrid

but how can i put there other id from my selected row in my base-side?

like that

$grid->setSubGridGrid(“subgrid.php?myrowdataID=$myspecialID”);

gives there a special function to put any data (any data from my selected row in my base-table) in setSubGridGrid ?

best regards

Achim

February 2, 2015 at 12:04 am in reply to: grid as subgrid with option fields #117287

selfmade01

Participant

now works, but i get before errors with

was not easy to find the reason why

<span style=”text-decoration: underline;”>Cannot read property ‘msie’ of undefined in jQgrid</span>

February 1, 2015 at 5:47 pm in reply to: grid as subgrid with option fields #117249

selfmade01

Participant

Sorry for the crazy formating

Hello,

i test with this example

http://www.guriddo.net/demo/jqgridphp/

to work with option-fields

but i think the css and js are not the right versions what i use in my script

i get nothing data and only jquery errors like
<div class=”logContent “>
<div class=”errorTitle focusRow subLogRow “><span class=”errorMessage “>TypeError: e.cssHooks is undefined</span></div>
<div class=”errorTitle focusRow subLogRow “>
<div class=”logCounter “>
<pre class=”lang:php decode:true “><!DOCTYPE html>
<html>
<head>
<title>jqGrid PHP Demo</title>
<link rel=”stylesheet” type=”text/css” media=”screen” href=”jqgrid/css/jquery-ui.css” />
<link rel=”stylesheet” type=”text/css” media=”screen” href=”jqgrid/css/ui.jqgrid.css” />
<link rel=”stylesheet” type=”text/css” media=”screen” href=”jqgrid/css/ui.multiselect.css” />
<style type=”text”>
html, body {
margin: 0; /* Remove body margin/padding */
padding: 0;
overflow: hidden; /* Remove scroll bars on browser window */
font-size: 75%;
}

</style>
<!–<script src=”js/jquery.2.1.1.min.js” type=”text/javascript”></script>–>
<!–<script src=”js/jquery-2.1.3.js” type=”text/javascript”></script>–>
<script src=”jqgrid/js/jquery-1.4.2.min.js” type=”text/javascript”></script>

<?php include (“gridtest.php”);?>

</div>

</body>
</html>
gridtest.php
<pre class=”lang:php decode:true “><?php

require_once ‘./db/jq-config.php’;
// include the jqGrid Class

//require_once ABSPATH.”incl/jqGrid.php”;
require_once “incl/jqGrid.php”;
// include the driver class

//require_once ABSPATH.”/incl/jqGridPdo.php”;
require_once “incl/jqGridPdo.php”;
// Connection to the server

$conn = new PDO(DB_DSN,DB_USER,DB_PASSWORD);
// Tell the db that we use utf-8
$conn->query(“SET NAMES utf8”);

// Create the jqGrid instance
$grid = new jqGridRender($conn);
// Write the SQL Query

$grid->SelectCommand = ‘SELECT
room.roomNr,
room.roomType,
nlContainerType.nlContainerTypeName,
gType.gType,
hardwareType.hardwareTypeName,
hardwareInfo.description,
hardwareInfo.hardwareInfoId
FROM hardwareInfo
LEFT JOIN room ON hardwareInfo.roomId = room.roomId
LEFT JOIN hardwareSettings ON hardwareInfo.hardwareInfoId = hardwareSettings.hardwareInfoId
LEFT JOIN hardwareType ON hardwareType.hardwareTypeId = hardwareInfo.hardwareTypeId
LEFT JOIN nlContainer ON hardwareSettings.nlContainerId = nlContainer.nlContainerId
LEFT JOIN nlContainerType ON nlContainer.nlContainerTypeId = nlContainerType.nlContainerTypeId
LEFT JOIN tableSection ON hardwareSettings.tableSectionId = tableSection.tableSectionId
LEFT JOIN gType ON gType.gTypeId = tableSection.gTypeId
‘;

//$grid->SelectCommand = ‘SELECT * FROM hardwareSettings’;
// Set the table to where you update the data
//$grid->table = ‘hardwareInfo’;
$grid->table = ‘hardwareInfo’;
$grid->setPrimaryKeyId(“hardwareInfoId”);
?>
<script>
//var ids = <?php $grid->setPrimaryKeyId(“hardwareInfoId”);?>;
//alert(ids );
</script>
<?php
//$grid->setPrimaryKeyId(“hardwareSettingsId”);
$grid->serialKey = false;

// Set output format to json
$grid->dataType = ‘json’;
// Let the grid create the model
$grid->setColModel();
// Set the url from where we obtain the data
//$grid->setUrl(‘incl/getSetHardware.php’);
$grid->setUrl(‘gridtest.php’);

$grid->setGridOptions(array(
“rowNum”=>10,
“rowList”=>array(10,20,30),
“sortname”=>”hardwareInfoId”
));
$grid->setColProperty(‘hardwareInfoId’, array(“editoptions”=>array(“readonly”=>true)));
$grid->setColProperty(‘nlContainerTypeName’, array(“edittype”=>”select”, “editoptions”=>array(“value”=>” :Select”)));
$grid->setColProperty(‘gType’, array(“edittype”=>”select”, “editoptions”=>array(“value”=>” :Select”)));

//$grid->setColProperty(‘City’, array(“edittype”=>”select”, “editoptions”=>array(“value”=>” :Select”)));
//$grid->setColProperty(‘Country’, array(“edittype”=>”select”, “editoptions”=>array(“value”=>” :Select”)));
// This event check if we are in add or edit mode and is lunched
// every time the form opens.
// The purpose of thris event is to get the value of the selected
// country and to get the values of the cityes for that country when the form is open.
// Another action here is to select the city from the grid

$beforeshowadd = <<< BEFORESHOW

function(formid)
{
//
jQuery.ajax({
url: ‘incl/gType.php’,
dataType: ‘json’,
async : false,
// send q:1 in case of add and modify the incl/gType.php
data: {q:1},
success : function(response)
{
var t=”<option value=”>Select</option>”;
jQuery.each(response, function(i,item) {
t += “<option value='”+item.id+”‘>”+item.value+”</option>”;
});
jQuery(“#gType”,formid).html(“”).append(t);
}
});
jQuery(“#nlContainerTypeName”,formid).html(“<option>Select</option>”);
}
BEFORESHOW;

$beforeshowedit = <<< BEFORESHOW2
function(formid)
{
var sr = jQuery(“#grid”).jqGrid(‘getGridParam’,’selrow’);
var selc = jQuery(“#grid”).jqGrid(‘getCell’,sr,’gType’);
jQuery.ajax({
url: ‘incl/gType.php’,
dataType: ‘json’,
async : false,
// do not send q in case of edit.
success : function(response)
{
var t=””;
jQuery.each(response, function(i,item) {
if( selc == item.id) {
t += “<option value='”+item.id+”‘ selected=’selected’>”+item.value+”</option>”;
} else {
t += “<option value='”+item.id+”‘>”+item.value+”</option>”;
}
});
jQuery(“#gType”,formid).html(“”).append(t);
}
});
// get the value of the gType
var cntryval = $(“#gType”,formid).val();
jQuery(“#nlContainerTypeName”,formid).html(“<option>Select</option>”);
if(cntryval) {
// if the value is found try to use ajax call to obtain the citys
// please look at file file incl/nlContainerTypeName.php
jQuery.ajax({
url: ‘incl/nlContainerTypeName.php’,
dataType: ‘json’,
data: {q:cntryval},
success : function(response)
{
var t=””, sv=””;
if(sr)
{
// get the selected nlContainerTypeName from grid
sv = jQuery(“#grid”).jqGrid(‘getCell’,sr,’nlContainerTypeName’);
jQuery.each(response, function(i,item) {
t += “<option value='”+item.id+”‘>”+item.value+”</option>”;
});
// empty the select and put the new selection
jQuery(“#nlContainerTypeName”,formid).html(“”).append(t);
if(sv)
{
// select the nlContainerTypeName value
jQuery(“#nlContainerTypeName”,formid).val(sv).removeAttr(“disabled”);
}
}
}
});
} else {
jQuery(“#nlContainerTypeName”,formid).attr(“disabled”,”disabled”);
}
}
BEFORESHOW2;

// With this event we bind a change event for the first select.
// If a new value is selected we make ajax call and try to get the citys for this gType
// Note that this event should be executed only once if the form is constructed.

$initform = <<< INITFORM
function(formid)
{
jQuery(“#gType”,formid).change(function(e) {
var cntryval = $(this).val();
if(cntryval) {
jQuery(“#nlContainerTypeName”,formid).html(“”);
jQuery.ajax({
url: ‘incl/nlContainerTypeName.php’,
dataType: ‘json’,
data: {q:cntryval},
success : function(response)
{
var t=””;
jQuery.each(response, function(i,item) {
t += “<option value='”+item.id+”‘>”+item.value+”</option>”;
});
jQuery(“#nlContainerTypeName”,formid).append(t).removeAttr(“disabled”);
}
});
}
});
}
INITFORM;

// Enable navigator
$grid->navigator = true;
// Enable only editing
$grid->setNavOptions(‘navigator’, array(“excel”=>false,”add”=>true,”edit”=>true,”del”=>false,”view”=>false, “search”=>false));
// Close the dialog after editing
$grid->setNavOptions(‘edit’,array(“closeAfterEdit”=>true,”editCaption”=>”Update Customer”,”bSubmit”=>”Update”, “viewPagerButtons”=>false));
// Bind the before show Form event in add and edit mode.
$grid->setNavEvent(‘edit’, ‘beforeShowForm’, $beforeshowedit);
$grid->setNavEvent(‘add’, ‘beforeShowForm’, $beforeshowadd);
// Bind the initialize Form event in add and edit mode.
$grid->setNavEvent(‘edit’, ‘onInitializeForm’, $initform);
$grid->setNavEvent(‘add’, ‘onInitializeForm’, $initform);
// Enjoy
$grid->renderGrid(‘#grid’,’#pager’,true, null, null, true,true);
$conn = null;
?>
gType.php
<pre class=”lang:php decode:true “><?php
require_once ‘db/jq-config.php’;
require_once ABSPATH.”incl/jqGridPdo.php”;
try {
$conn = new PDO(DB_DSN,DB_USER,DB_PASSWORD);
//$SQL = “SELECT DISTINCT Country id, Country value FROM customers ORDER BY Country”;
$SQL = “SELECT DISTINCT(gType) gTypeId, gType value FROM gType”;
$collation = jqGridDB::query($conn, “SET NAMES utf8”);
$country = jqGridDB::query($conn, $SQL);
$result = jqGridDB::fetch_object($gType, true, $conn);
echo json_encode($result);
} catch (Exception $e) {
echo $e->getMessage();
}
nlContainerTypeName are same same like gType.php

i get the data, but the gridtable is empty

and see nothing (only table-headers)

why?

I changed on the sample-page only the sames and the database and the select-statement

best regards

Achim

</div>
</div>
</div>

January 25, 2015 at 11:15 pm in reply to: $(sel).trigger( 'reloadGrid' ); don't reload mysql-data #115490

selfmade01

Participant

Hello Tony,

ok now works all very good

sort, next_grid-pager and all others works very good..

my misstake was, i dont wrote exactrly the sample-code

now i check all again and write all new and now works all

thanks for help

Best regards

Achim

January 25, 2015 at 10:20 pm in reply to: $(sel).trigger( 'reloadGrid' ); don't reload mysql-data #115484

selfmade01

Participant

sort is now also working,

but the >next_grid-pager isn’t working… mmmmhhh?

January 25, 2015 at 9:12 pm in reply to: $(sel).trigger( 'reloadGrid' ); don't reload mysql-data #115483

selfmade01

Participant

Hello,

it’s ok. the jqgrid works now.

Reload after add data are ok.

edit data works fine.

but now i can not more sort the table and the bottom

<span class=”nodeLabelBox repTarget “><span class=”nodeAttr editGroup “><span class=”nodeValue editable “>next_grid-pager and prev_grid-pager works no more.</span></span></span>

i don’t know what i changed.

i which section i can show to check that why this no work?

The link on both buttons next_grid-pager and prev_grid-pager are not aktiv!

bets regards

Achim

January 23, 2015 at 12:39 am in reply to: $(sel).trigger( 'reloadGrid' ); don't reload mysql-data #115427

selfmade01

Participant

Hello,

one question more please.

how i can safe the id?

Sample:

i have a row with roomId, roomType…

i would like safe temporaly the roomId, like <input type=”hidden” name=”rid” value=”roomId”>

i need the id for delete or edit a row .

If i click now to edit or delete, i get only the row-id.

best regards

Achim

January 22, 2015 at 10:46 pm in reply to: $(sel).trigger( 'reloadGrid' ); don't reload mysql-data #115425

selfmade01

Participant

… sorry for my lot crazy messages.. now works very very good

i work with that sample

http://phppot.com/jquery/using-jqgrid-control-with-php/

Best regards

achim

January 22, 2015 at 10:12 pm in reply to: $(sel).trigger( 'reloadGrid' ); don't reload mysql-data #115424

selfmade01

Participant

i test now this sample..

maybe this is ok

http://phppot.com/jquery/using-jqgrid-control-with-php/

January 22, 2015 at 9:25 pm in reply to: $(sel).trigger( 'reloadGrid' ); don't reload mysql-data #115423

selfmade01

Participant

Hello Tony,

not sure, i am a beginner …

I see the this sample

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:first_grid

But is this only this way to get the mysql-datas in the grid and work the grid only with this way?

i work with a css-admin-template… and your jqgrid was there included, but without mysql-connect

now i would like change this and I thought i put only the mysql-rows with json_encode to the grid_data… and thats is enough…

is this sample http://www.trirand.com/jqgridwiki/doku.php?id=wiki:first_grid

the one way to get mysql-datas in the grid?

i am alittle worry about that… i think i have to change my complete webside

that sample works with an XML-File …

if i outsource all mysql and php in a php-file… ok i think i can do that…

but maybe you have online a simple php-mysql-sample.

i hope my question are not to much.

Best regards

achim

January 21, 2015 at 9:08 pm in reply to: $(sel).trigger( 'reloadGrid' ); don't reload mysql-data #115416

selfmade01

Participant

sorry… the first rows in my last post have an copy error

i wrote..

the code

<span class=”crayon-e”>jQuery</span><span class=”crayon-sy”>(</span><span class=”crayon-v”>grid_selector</span><span class=”crayon-sy”>)</span><span class=”crayon-sy”>.</span><span class=”crayon-e”>trigger</span><span class=”crayon-sy”>(</span><span class=”crayon-s”>”click”</span><span class=”crayon-sy”>)</span><span class=”crayon-sy”>;</span>

dont’ work

this was stupid sorry

forget this please!
<pre class=”lang:js decode:true “><table class=”crayon-table”>
<tbody>
<tr class=”crayon-row”>
<td class=”crayon-nums ” data-settings=”show”>
<div class=”crayon-nums-content”>
<div class=”crayon-num” data-line=”crayon-54bff44b9f381742946395-1″>1</div>
</div></td>
<td class=”crayon-code”>
<div class=”crayon-pre”>
<div id=”crayon-54bff44b9f381742946395-1″ class=”crayon-line”><span class=”crayon-e”>jQuery</span><span class=”crayon-sy”>(</span><span class=”crayon-s”>”#refresh_grid-table”</span><span class=”crayon-sy”>)</span><span class=”crayon-sy”>.</span><span class=”crayon-e”>trigger</span><span class=”crayon-sy”>(</span><span class=”crayon-s”>”click”</span><span class=”crayon-sy”>)</span><span class=”crayon-sy”>;</span></div>
</div></td>
</tr>
</tbody>
</table>

January 21, 2015 at 9:06 pm in reply to: $(sel).trigger( 'reloadGrid' ); don't reload mysql-data #115415

selfmade01

Participant

Hello,

i add the code

<table class=”crayon-table”>
<tbody>
<tr class=”crayon-row”>
<td class=”crayon-nums ” data-settings=”show”>
<div class=”crayon-nums-content”>
<div class=”crayon-num” data-line=”crayon-54bff44b9f381742946395-1″>1</div>
</div></td>
<td class=”crayon-code”>
<div class=”crayon-pre”>
<div id=”crayon-54bff44b9f381742946395-1″ class=”crayon-line”><span class=”crayon-e”>jQuery</span><span class=”crayon-sy”>(</span><span class=”crayon-s”>”#refresh_grid-table”</span><span class=”crayon-sy”>)</span><span class=”crayon-sy”>.</span><span class=”crayon-e”>trigger</span><span class=”crayon-sy”>(</span><span class=”crayon-s”>”click”</span><span class=”crayon-sy”>)</span><span class=”crayon-sy”>;</span></div>
</div></td>
</tr>
</tbody>
</table>
bit don’t work

you can see my complete script

if i safe data, thats work… but not the reload.

Mybe is a problem by my mysql.. i think i have to use other way if i get data from mysql… but i am not sure.

if i click to reload button… t think the complete grid-data have to reconnect to mysql and get all new data from them

I have a side in bplaced.. but i can not work now there, the mysql-server there is down

best regards

Achim

myebe the code you can see… help to find my error

function grid_data(){
			<?php
			$result2 = $mysqli->query("SELECT roomId,  roomNr, roomType, squareMeter , cubicMeter, createDate, updateDate, free FROM $mysqltable");
			$num = $result->num_rows;
				 $teststring = "[";
				 $r	= 0;
				 while ($obj = $result2->fetch_object()) {
						$r++;
						if($r == $num ){
							$teststring .= json_encode($obj); 
						}else{
							$teststring .= json_encode($obj).","; 
						}
				}
			$teststring .="]";
			?>
			 var data = <?php echo $teststring; ?>;
			 return data;
			}
			//var grid_data = <?php echo $teststring; ?>;
			
			var subgrid_data = 
			[
			 {id:"1", name:"sub grid item 1", qty: 11},
			 {id:"2", name:"sub grid item 2", qty: 3},
			 {id:"3", name:"sub grid item 3", qty: 12},
			 {id:"4", name:"sub grid item 4", qty: 5},
			 {id:"5", name:"sub grid item 5", qty: 2},
			 {id:"6", name:"sub grid item 6", qty: 9},
			 {id:"7", name:"sub grid item 7", qty: 3},
			 {id:"8", name:"sub grid item 8", qty: 8}
			];
			
			

			jQuery(function($) {
				var grid_selector = "#grid-table";
				var pager_selector = "#grid-pager";
				
				//resize to fit page size
				$(window).on('resize.jqGrid', function () {
					$(grid_selector).jqGrid( 'setGridWidth', $(".page-content").width() );
			    })
				//resize on sidebar collapse/expand
				var parent_column = $(grid_selector).closest('[class*="col-"]');
				$(document).on('settings.ace.jqGrid' , function(ev, event_name, collapsed) {
					if( event_name === 'sidebar_collapsed' || event_name === 'main_container_fixed' ) {
						//setTimeout is for webkit only to give time for DOM changes and then redraw!!!
						setTimeout(function() {
							$(grid_selector).jqGrid( 'setGridWidth', parent_column.width() );
						}, 0);
					}
			    })
				
				//if your grid is inside another element, for example a tab pane, you should use its parent's width:
				/**
				$(window).on('resize.jqGrid', function () {
					var parent_width = $(grid_selector).closest('.tab-pane').width();
					$(grid_selector).jqGrid( 'setGridWidth', parent_width );
				})
				//and also set width when tab pane becomes visible
				$('#myTab a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
				  if($(e.target).attr('href') == '#mygrid') {
					var parent_width = $(grid_selector).closest('.tab-pane').width();
					$(grid_selector).jqGrid( 'setGridWidth', parent_width );
				  }
				})
				*/
				
				
			
			
			
				jQuery(grid_selector).jqGrid({
					//direction: "rtl",
			
					//subgrid options
					//subGrid : true,
					subGrid : false,
					//subGridModel: [{ name : ['No','Item Name','Qty'], width : [55,200,80] }],
					//datatype: "xml",
					subGridOptions : {
						plusicon : "ace-icon fa fa-plus center bigger-110 blue",
						minusicon  : "ace-icon fa fa-minus center bigger-110 blue",
						openicon : "ace-icon fa fa-chevron-right center orange"
					},
					//for this example we are using local data
					subGridRowExpanded: function (subgridDivId, rowId) {
						var subgridTableId = subgridDivId + "_t";
						$("#" + subgridDivId).html("<table id='" + subgridTableId + "'></table>");
						$("#" + subgridTableId).jqGrid({
							datatype: 'local',
							data: subgrid_data,
							colNames: ['No','Item Name','Qty'],
							colModel: [
								{ name: 'id', width: 50 },
								{ name: 'name', width: 150 },
								{ name: 'qty', width: 50 }
							]
						});
					},
					
			
			
					data: grid_data(),
					datatype: "local",
					height: 250,
					colNames:[' ', '<?=_("Room Id");?>','<?=_("Room Nr.");?>','<?=_("Room Type");?>', '<?=_("m²");?>', '<?=_("m³");?>','<?=_("Create Date");?>','<?=_("Update Date");?>','<?=_("free");?>'],
					colModel:[
						{name:'myac',index:'', width:80, fixed:true, sortable:false, resize:false,
							formatter:'actions', 
							formatoptions:{ 
								keys:true,
								//delbutton: false,//disable delete button
								
								delOptions:{recreateForm: true, beforeShowForm:beforeDeleteCallback},
								//editformbutton:true, editOptions:{recreateForm: true, beforeShowForm:beforeEditCallback}
							}
						},
						{name:'roomId',index:'roomId', width:60, sorttype:"int", editable: true},						
						{name:'roomNr',index:'roomNr', width:60, sorttype:"int", editable: true},
						{name:'roomType',index:'roomType', width:150,editable: true,editoptions:{size:"20",maxlength:"30"}},
						{name:'squareMeter',index:'squareMeter', width:60, sorttype:"int", editable: true},
						{name:'cubicMeter',index:'cubicMeter', width:60, sorttype:"int", editable: true},
						{name:'createDate',index:'createDate',width:90, editable:false, sorttype:"date",unformat: pickDate},
						{name:'updateDate',index:'updateDate',width:90, editable:false, sorttype:"date",unformat: pickDate},
						{name:'free',index:'free', width:70, editable: true,edittype:"checkbox",editoptions: {value:"Yes:No"},unformat: aceSwitch},
					], 
			
					viewrecords : true,
					rowNum:10,
					rowList:[10,20,30],
					pager : pager_selector,
					altRows: true,
					//toppager: true,
					
					multiselect: true,
					//multikey: "ctrlKey",
			        multiboxonly: true,
			
					loadComplete : function() {
						var table = this;
						setTimeout(function(){
							styleCheckbox(table);
							
							updateActionIcons(table);
							updatePagerIcons(table);
							enableTooltips(table);
						}, 0);
					},
			
					editurl: "pages/saferoom.php",//nothing is saved
					caption: " <?=_("Create Room type & show available Rooms" );?>" //"jqGrid with inline editing"
			
					//,autowidth: true,
			
			
					/**
					,
					grouping:true, 
					groupingView : { 
						 groupField : ['name'],
						 groupDataSorted : true,
						 plusicon : 'fa fa-chevron-down bigger-110',
						 minusicon : 'fa fa-chevron-up bigger-110'
					},
					caption: "Grouping"
					*/
			
				});
				$(window).triggerHandler('resize.jqGrid');//trigger window resize to make the grid get the correct size
				
				
			
				//enable search/filter toolbar
				//jQuery(grid_selector).jqGrid('filterToolbar',{defaultSearch:true,stringResult:true})
				//jQuery(grid_selector).filterToolbar({});
			
			
				//switch element when editing inline
				function aceSwitch( cellvalue, options, cell ) {
					setTimeout(function(){
						$(cell) .find('input[type=checkbox]')
							.addClass('ace ace-switch ace-switch-5')
							.after('<span class="lbl"></span>');
					}, 0);
				}
				//enable datepicker
				function pickDate( cellvalue, options, cell ) {
					setTimeout(function(){
						$(cell) .find('input[type=text]')
								.datepicker({format:'yyyy-mm-dd' , autoclose:true}); 
					}, 0);
				}
			
			
				//navButtons
				jQuery(grid_selector).jqGrid('navGrid',pager_selector,
					{ 	//navbar options
						edit: true,
						editicon : 'ace-icon fa fa-pencil blue',
						add: true,
						addicon : 'ace-icon fa fa-plus-circle purple',
						del: true,
						delicon : 'ace-icon fa fa-trash-o red',
						search: true,
						searchicon : 'ace-icon fa fa-search orange',
						refresh: true,
						refreshicon : 'ace-icon fa fa-refresh green',
						view: true,
						viewicon : 'ace-icon fa fa-search-plus grey',
					},
					{
						//edit record form
						//closeAfterEdit: true,
						//width: 700,
						recreateForm: true,
						editCaption: "<?=_('Edit Room');?>",
						bSubmit : "<?=_('Submit');?>",
						bCancel : "<?=_('Cancel');?>",
						reloadAfterSubmit : true,
						loadonce: true, 
						beforeShowForm : function(e) {
							var form = $(e[0]);
							form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
							style_edit_form(form);
						}
					},
					{
						//new record form
						//width: 700,
						closeAfterAdd: true,
						recreateForm: true,
						addCaption : "<?=_('Add new Room');?>",
						bSubmit : "<?=_('Submit');?>",
						bCancel : "<?=_('Cancel');?>",
						the_row_id : "new",
						reloadAfterSubmit : true,
						viewPagerButtons: false,
						beforeShowForm : function(e) {
							var form = $(e[0]);


							form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar')
							.wrapInner('<div class="widget-header" />')
							style_edit_form(form);
						},
						onClick : function(e) {
							alert(1);
						}
					},
					{
						//delete record form
						recreateForm: true,
						beforeShowForm : function(e) {
							var form = $(e[0]);
							if(form.data('styled')) return false;
							
							form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
							style_delete_form(form);
							
							form.data('styled', true);
						},
						onClick : function(e) {
							//alert(1);
						}
					},
					{
						//search form
						recreateForm: true,
						afterShowSearch: function(e){
							var form = $(e[0]);
							form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
							style_search_form(form);
						},
						afterRedraw: function(){
							style_search_filters($(this));
						}
						,
						multipleSearch: true,
						/**
						multipleGroup:true,
						showQuery: true
						*/
					},
					{
						//view record form
						recreateForm: true,
						beforeShowForm: function(e){
							var form = $(e[0]);
							form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
						}
					}
				)
				jQuery("#refresh_grid-table").trigger("click");
				
				function style_edit_form(form) {
					//enable datepicker on "sdate" field and switches for "stock" field
					form.find('input[name=sdate]').datepicker({format:'yyyy-mm-dd' , autoclose:true})
					
					form.find('input[name=stock]').addClass('ace ace-switch ace-switch-5').after('<span class="lbl"></span>');
							   //don't wrap inside a label element, the checkbox value won't be submitted (POST'ed)
							  //.addClass('ace ace-switch ace-switch-5').wrap('<label class="inline" />').after('<span class="lbl"></span>');
			
							
					//update buttons classes
					var buttons = form.next().find('.EditButton .fm-button');
					buttons.addClass('btn btn-sm').find('[class*="-icon"]').hide();//ui-icon, s-icon
					buttons.eq(0).addClass('btn-primary').prepend('<i class="ace-icon fa fa-check"></i>');
					buttons.eq(1).prepend('<i class="ace-icon fa fa-times"></i>')
					
					buttons = form.next().find('.navButton a');
					buttons.find('.ui-icon').hide();
					buttons.eq(0).append('<i class="ace-icon fa fa-chevron-left"></i>');
					buttons.eq(1).append('<i class="ace-icon fa fa-chevron-right"></i>');		
				}
			
				function style_delete_form(form) {
					var buttons = form.next().find('.EditButton .fm-button');
					buttons.addClass('btn btn-sm btn-white btn-round').find('[class*="-icon"]').hide();//ui-icon, s-icon
					buttons.eq(0).addClass('btn-danger').prepend('<i class="ace-icon fa fa-trash-o"></i>');
					buttons.eq(1).addClass('btn-default').prepend('<i class="ace-icon fa fa-times"></i>')
				}
				
				function style_search_filters(form) {
					form.find('.delete-rule').val('X');
					form.find('.add-rule').addClass('btn btn-xs btn-primary');
					form.find('.add-group').addClass('btn btn-xs btn-success');
					form.find('.delete-group').addClass('btn btn-xs btn-danger');
				}
				function style_search_form(form) {
					var dialog = form.closest('.ui-jqdialog');
					var buttons = dialog.find('.EditTable')
					buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-sm btn-info').find('.ui-icon').attr('class', 'ace-icon fa fa-retweet');
					buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class', 'ace-icon fa fa-comment-o');
					buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class', 'ace-icon fa fa-search');
				}
				
				function beforeDeleteCallback(e) {
					var form = $(e[0]);
					if(form.data('styled')) return false;
					
					form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
					style_delete_form(form);
					
					form.data('styled', true);
				}
				
				function beforeEditCallback(e) {
					var form = $(e[0]);
					form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
					style_edit_form(form);
				}
			
			
			
				//it causes some flicker when reloading or navigating grid
				//it may be possible to have some custom formatter to do this as the grid is being created to prevent this
				//or go back to default browser checkbox styles for the grid
				function styleCheckbox(table) {
				/**
					$(table).find('input:checkbox').addClass('ace')
					.wrap('<label />')
					.after('<span class="lbl align-top" />')
			
			
					$('.ui-jqgrid-labels th[id*="_cb"]:first-child')
					.find('input.cbox[type=checkbox]').addClass('ace')
					.wrap('<label />').after('<span class="lbl align-top" />');
				*/
				}
				
			
				//unlike navButtons icons, action icons in rows seem to be hard-coded
				//you can change them like this in here if you want
				function updateActionIcons(table) {
					/**
					var replacement = 
					{
						'ui-ace-icon fa fa-pencil' : 'ace-icon fa fa-pencil blue',
						'ui-ace-icon fa fa-trash-o' : 'ace-icon fa fa-trash-o red',
						'ui-icon-disk' : 'ace-icon fa fa-check green',
						'ui-icon-cancel' : 'ace-icon fa fa-times red'
					};
					$(table).find('.ui-pg-div span.ui-icon').each(function(){
						var icon = $(this);
						var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
						if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
					})
					*/
				}
				
				//replace icons with FontAwesome icons like above
				function updatePagerIcons(table) {
					var replacement = 
					{
						'ui-icon-seek-first' : 'ace-icon fa fa-angle-double-left bigger-140',
						'ui-icon-seek-prev' : 'ace-icon fa fa-angle-left bigger-140',
						'ui-icon-seek-next' : 'ace-icon fa fa-angle-right bigger-140',
						'ui-icon-seek-end' : 'ace-icon fa fa-angle-double-right bigger-140'
					};
					$('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function(){
						var icon = $(this);
						var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
						
						if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
					})
				}
			
				function enableTooltips(table) {
					$('.navtable .ui-pg-button').tooltip({container:'body'});
					$(table).find('.ui-pg-div').tooltip({container:'body'});
				}
			
				//var selr = jQuery(grid_selector).jqGrid('getGridParam','selrow');
			
				$(document).one('ajaxloadstart.page', function(e) {
					$(grid_selector).jqGrid('GridUnload');
					$('.ui-jqdialog').remove();
				});
			});

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

406

407

408

409

410

411

412

413

414

415

416

417

418

419

420

421

function grid_data(){

<?php

$result2 = $mysqli->query("SELECT roomId, roomNr, roomType, squareMeter , cubicMeter, createDate, updateDate, free FROM $mysqltable");

$num = $result->num_rows;

$teststring = "[";

$r = 0;

while ($obj = $result2->fetch_object()) {

$r++;

if($r == $num ){

$teststring .= json_encode($obj);

}else{

$teststring .= json_encode($obj).",";

}

$teststring .="]";

var data = <?php echo $teststring; ?>;

return data;

}

//var grid_data = <?php echo $teststring; ?>;

var subgrid_data =

[

{id:"1", name:"sub grid item 1", qty: 11},

{id:"2", name:"sub grid item 2", qty: 3},

{id:"3", name:"sub grid item 3", qty: 12},

{id:"4", name:"sub grid item 4", qty: 5},

{id:"5", name:"sub grid item 5", qty: 2},

{id:"6", name:"sub grid item 6", qty: 9},

{id:"7", name:"sub grid item 7", qty: 3},

{id:"8", name:"sub grid item 8", qty: 8}

];

jQuery(function($) {

var grid_selector = "#grid-table";

var pager_selector = "#grid-pager";

//resize to fit page size

$(window).on('resize.jqGrid', function () {

$(grid_selector).jqGrid( 'setGridWidth', $(".page-content").width() );

})

//resize on sidebar collapse/expand

var parent_column = $(grid_selector).closest('[class*="col-"]');

$(document).on('settings.ace.jqGrid' , function(ev, event_name, collapsed) {

if( event_name === 'sidebar_collapsed' || event_name === 'main_container_fixed' ) {

//setTimeout is for webkit only to give time for DOM changes and then redraw!!!

setTimeout(function() {

$(grid_selector).jqGrid( 'setGridWidth', parent_column.width() );

}, 0);

}

})

//if your grid is inside another element, for example a tab pane, you should use its parent's width:

/**

$(window).on('resize.jqGrid', function () {

var parent_width = $(grid_selector).closest('.tab-pane').width();

$(grid_selector).jqGrid( 'setGridWidth', parent_width );

})

//and also set width when tab pane becomes visible

$('#myTab a[data-toggle="tab"]').on('shown.bs.tab', function (e) {

if($(e.target).attr('href') == '#mygrid') {

var parent_width = $(grid_selector).closest('.tab-pane').width();

$(grid_selector).jqGrid( 'setGridWidth', parent_width );

}

})

jQuery(grid_selector).jqGrid({

//direction: "rtl",

//subgrid options

//subGrid : true,

subGrid : false,

//subGridModel: [{ name : ['No','Item Name','Qty'], width : [55,200,80] }],

//datatype: "xml",

subGridOptions : {

plusicon : "ace-icon fa fa-plus center bigger-110 blue",

minusicon : "ace-icon fa fa-minus center bigger-110 blue",

openicon : "ace-icon fa fa-chevron-right center orange"

//for this example we are using local data

subGridRowExpanded: function (subgridDivId, rowId) {

var subgridTableId = subgridDivId + "_t";

$("#" + subgridDivId).html("<table id='" + subgridTableId + "'></table>");

$("#" + subgridTableId).jqGrid({

datatype: 'local',

data: subgrid_data,

colNames: ['No','Item Name','Qty'],

colModel: [

{ name: 'id', width: 50 },

{ name: 'name', width: 150 },

{ name: 'qty', width: 50 }

]

});

data: grid_data(),

datatype: "local",

height: 250,

colNames:[' ', '<?=_("Room Id");?>','<?=_("Room Nr.");?>','<?=_("Room Type");?>', '<?=_("m²");?>', '<?=_("m³");?>','<?=_("Create Date");?>','<?=_("Update Date");?>','<?=_("free");?>'],

colModel:[

{name:'myac',index:'', width:80, fixed:true, sortable:false, resize:false,

formatter:'actions',

formatoptions:{

keys:true,

//delbutton: false,//disable delete button

delOptions:{recreateForm: true, beforeShowForm:beforeDeleteCallback},

//editformbutton:true, editOptions:{recreateForm: true, beforeShowForm:beforeEditCallback}

}

{name:'roomId',index:'roomId', width:60, sorttype:"int", editable: true},

{name:'roomNr',index:'roomNr', width:60, sorttype:"int", editable: true},

{name:'roomType',index:'roomType', width:150,editable: true,editoptions:{size:"20",maxlength:"30"}},

{name:'squareMeter',index:'squareMeter', width:60, sorttype:"int", editable: true},

{name:'cubicMeter',index:'cubicMeter', width:60, sorttype:"int", editable: true},

{name:'createDate',index:'createDate',width:90, editable:false, sorttype:"date",unformat: pickDate},

{name:'updateDate',index:'updateDate',width:90, editable:false, sorttype:"date",unformat: pickDate},

{name:'free',index:'free', width:70, editable: true,edittype:"checkbox",editoptions: {value:"Yes:No"},unformat: aceSwitch},

viewrecords : true,

rowNum:10,

rowList:[10,20,30],

pager : pager_selector,

altRows: true,

//toppager: true,

multiselect: true,

//multikey: "ctrlKey",

multiboxonly: true,

loadComplete : function() {

var table = this;

setTimeout(function(){

styleCheckbox(table);

updateActionIcons(table);

updatePagerIcons(table);

enableTooltips(table);

}, 0);

editurl: "pages/saferoom.php",//nothing is saved

caption: " <?=_("Create Room type & show available Rooms" );?>" //"jqGrid with inline editing"

//,autowidth: true,

/**

grouping:true,

groupingView : {

groupField : ['name'],

groupDataSorted : true,

plusicon : 'fa fa-chevron-down bigger-110',

minusicon : 'fa fa-chevron-up bigger-110'

caption: "Grouping"

});

$(window).triggerHandler('resize.jqGrid');//trigger window resize to make the grid get the correct size

//enable search/filter toolbar

//jQuery(grid_selector).jqGrid('filterToolbar',{defaultSearch:true,stringResult:true})

//jQuery(grid_selector).filterToolbar({});

//switch element when editing inline

function aceSwitch( cellvalue, options, cell ) {

setTimeout(function(){

$(cell) .find('input[type=checkbox]')

.addClass('ace ace-switch ace-switch-5')

.after('<span class="lbl"></span>');

}, 0);

}

//enable datepicker

function pickDate( cellvalue, options, cell ) {

setTimeout(function(){

$(cell) .find('input[type=text]')

.datepicker({format:'yyyy-mm-dd' , autoclose:true});

}, 0);

}

//navButtons

jQuery(grid_selector).jqGrid('navGrid',pager_selector,

{ //navbar options

edit: true,

editicon : 'ace-icon fa fa-pencil blue',

add: true,

addicon : 'ace-icon fa fa-plus-circle purple',

del: true,

delicon : 'ace-icon fa fa-trash-o red',

search: true,

searchicon : 'ace-icon fa fa-search orange',

refresh: true,

refreshicon : 'ace-icon fa fa-refresh green',

view: true,

viewicon : 'ace-icon fa fa-search-plus grey',

{

//edit record form

//closeAfterEdit: true,

//width: 700,

recreateForm: true,

editCaption: "<?=_('Edit Room');?>",

bSubmit : "<?=_('Submit');?>",

bCancel : "<?=_('Cancel');?>",

reloadAfterSubmit : true,

loadonce: true,

beforeShowForm : function(e) {

var form = $(e[0]);

form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')

style_edit_form(form);

}

{

//new record form

//width: 700,

closeAfterAdd: true,

recreateForm: true,

addCaption : "<?=_('Add new Room');?>",

bSubmit : "<?=_('Submit');?>",

bCancel : "<?=_('Cancel');?>",

the_row_id : "new",

reloadAfterSubmit : true,

viewPagerButtons: false,

beforeShowForm : function(e) {

var form = $(e[0]);

form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar')

.wrapInner('<div class="widget-header" />')

style_edit_form(form);

onClick : function(e) {

alert(1);

}

{

//delete record form

recreateForm: true,

beforeShowForm : function(e) {

var form = $(e[0]);

if(form.data('styled')) return false;

form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')

style_delete_form(form);

form.data('styled', true);

onClick : function(e) {

//alert(1);

}

{

//search form

recreateForm: true,

afterShowSearch: function(e){

var form = $(e[0]);

form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')

style_search_form(form);

afterRedraw: function(){

style_search_filters($(this));

}

multipleSearch: true,

/**

multipleGroup:true,

showQuery: true

{

//view record form

recreateForm: true,

beforeShowForm: function(e){

var form = $(e[0]);

form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')

}

)

jQuery("#refresh_grid-table").trigger("click");

function style_edit_form(form) {

//enable datepicker on "sdate" field and switches for "stock" field

form.find('input[name=sdate]').datepicker({format:'yyyy-mm-dd' , autoclose:true})

form.find('input[name=stock]').addClass('ace ace-switch ace-switch-5').after('<span class="lbl"></span>');

//don't wrap inside a label element, the checkbox value won't be submitted (POST'ed)

//.addClass('ace ace-switch ace-switch-5').wrap('<label class="inline" />').after('<span class="lbl"></span>');

//update buttons classes

var buttons = form.next().find('.EditButton .fm-button');

buttons.addClass('btn btn-sm').find('[class*="-icon"]').hide();//ui-icon, s-icon

buttons.eq(0).addClass('btn-primary').prepend('<i class="ace-icon fa fa-check"></i>');

buttons.eq(1).prepend('<i class="ace-icon fa fa-times"></i>')

buttons = form.next().find('.navButton a');

buttons.find('.ui-icon').hide();

buttons.eq(0).append('<i class="ace-icon fa fa-chevron-left"></i>');

buttons.eq(1).append('<i class="ace-icon fa fa-chevron-right"></i>');

}

function style_delete_form(form) {

var buttons = form.next().find('.EditButton .fm-button');

buttons.addClass('btn btn-sm btn-white btn-round').find('[class*="-icon"]').hide();//ui-icon, s-icon

buttons.eq(0).addClass('btn-danger').prepend('<i class="ace-icon fa fa-trash-o"></i>');

buttons.eq(1).addClass('btn-default').prepend('<i class="ace-icon fa fa-times"></i>')

}

function style_search_filters(form) {

form.find('.delete-rule').val('X');

form.find('.add-rule').addClass('btn btn-xs btn-primary');

form.find('.add-group').addClass('btn btn-xs btn-success');

form.find('.delete-group').addClass('btn btn-xs btn-danger');

}

function style_search_form(form) {

var dialog = form.closest('.ui-jqdialog');

var buttons = dialog.find('.EditTable')

buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-sm btn-info').find('.ui-icon').attr('class', 'ace-icon fa fa-retweet');

buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class', 'ace-icon fa fa-comment-o');

buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class', 'ace-icon fa fa-search');

}

function beforeDeleteCallback(e) {

var form = $(e[0]);

if(form.data('styled')) return false;

form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')

style_delete_form(form);

form.data('styled', true);

}

function beforeEditCallback(e) {

var form = $(e[0]);

form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')

style_edit_form(form);

}

//it causes some flicker when reloading or navigating grid

//it may be possible to have some custom formatter to do this as the grid is being created to prevent this

//or go back to default browser checkbox styles for the grid

function styleCheckbox(table) {

/**

$(table).find('input:checkbox').addClass('ace')

.wrap('<label />')

.after('<span class="lbl align-top" />')

$('.ui-jqgrid-labels th[id*="_cb"]:first-child')

.find('input.cbox[type=checkbox]').addClass('ace')

.wrap('<label />').after('<span class="lbl align-top" />');

}

//unlike navButtons icons, action icons in rows seem to be hard-coded

//you can change them like this in here if you want

function updateActionIcons(table) {

/**

var replacement =

{

'ui-ace-icon fa fa-pencil' : 'ace-icon fa fa-pencil blue',

'ui-ace-icon fa fa-trash-o' : 'ace-icon fa fa-trash-o red',

'ui-icon-disk' : 'ace-icon fa fa-check green',

'ui-icon-cancel' : 'ace-icon fa fa-times red'

};

$(table).find('.ui-pg-div span.ui-icon').each(function(){

var icon = $(this);

var $class = $.trim(icon.attr('class').replace('ui-icon', ''));

if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);

})

}

//replace icons with FontAwesome icons like above

function updatePagerIcons(table) {

var replacement =

{

'ui-icon-seek-first' : 'ace-icon fa fa-angle-double-left bigger-140',

'ui-icon-seek-prev' : 'ace-icon fa fa-angle-left bigger-140',

'ui-icon-seek-next' : 'ace-icon fa fa-angle-right bigger-140',

'ui-icon-seek-end' : 'ace-icon fa fa-angle-double-right bigger-140'

};

$('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function(){

var icon = $(this);

var $class = $.trim(icon.attr('class').replace('ui-icon', ''));

if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);

})

}

function enableTooltips(table) {

$('.navtable .ui-pg-button').tooltip({container:'body'});

$(table).find('.ui-pg-div').tooltip({container:'body'});

}

//var selr = jQuery(grid_selector).jqGrid('getGridParam','selrow');

$(document).one('ajaxloadstart.page', function(e) {

$(grid_selector).jqGrid('GridUnload');

$('.ui-jqdialog').remove();

});

This reply was modified 11 years, 2 months ago by tony. Reason: code formatting

Author

Replies

Viewing 15 replies - 16 through 30 (of 32 total)

← 1 2 3 →