Guriddo » Topic: $(sel).trigger( 'reloadGrid' ); don't reload mysql-data

$(sel).trigger( 'reloadGrid' ); don't reload mysql-data

Guriddo
reloadGrid, reloading
$(sel).trigger( 'reloadGrid' ); don't reload mysql-data

Tagged: reloadGrid, reloading

This topic has 15 replies, 3 voices, and was last updated 11 years, 4 months ago by guriddo.support.

Creator

Topic
January 21, 2015 at 11:02 am #115410

selfmade01
Participant

Hello,

i wan’t to reload my grid after submit (if i have change or add rows)

I tested with

reloadAfterSubmit : true, (but i read is by default true)

and i tested with

// refresh_grid-table = refresh-Button on the grid-nav

$(“#refresh_grid-table”).click(function(){
jQuery(grid_selector).jqGrid(‘clearGridData’);
jQuery(grid_selector).jqGrid(‘setGridParam’, {data: grid_data});
jQuery(grid_selector).trigger(‘reloadGrid’);
});

Both no work.

I can see the table reloaded but only on the client side.

The ..r(‘reloadGrid’); don’t reload my mysql-data.

Maybe , i get the mysql-data by a wrong way…but i don’t have found other simple ways to push the mysql-rows to the grid

Best regards and thanks for help

Achim

This is my grid-data
<pre class=”lang:js decode:true”><script type=”text/javascript”>

<?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 grid_data = <?php echo $teststring; ?>;

var subgrid_data =
Creator

Topic

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

Author

Replies

January 21, 2015 at 11:23 am #115411

selfmade01

Participant

One Question / Idea

if i add the

data: grid_data(),

function grid_data(){

// get my mysql-rows

return datastring;

}

if this the right way?

Best regards

Achim

January 21, 2015 at 2:17 pm #115412

tony

Keymaster

Hello,

The code

$(“#refresh_grid-table”).click(function(){
jQuery(grid_selector).jqGrid(‘clearGridData’);
jQuery(grid_selector).jqGrid(‘setGridParam’, {data: grid_data});
jQuery(grid_selector).trigger(‘reloadGrid’);
});

$(“#refresh_grid-table”).click(function(){

jQuery(grid_selector).jqGrid(‘clearGridData’);

jQuery(grid_selector).jqGrid(‘setGridParam’, {data: grid_data});

jQuery(grid_selector).trigger(‘reloadGrid’);

});

is not correct.
The code that will work is

jQuery(grid_selector).trigger("click");

1	jQuery(grid_selector).trigger("click");

This is so, since the click is alredy binded to this button.

If possible can you please poast a simple test case.
Also if you set

loadonce: true,

the the data becomes local after it is loaded and the reloading will work only on local data.

Kind Regards,

January 21, 2015 at 2:17 pm #115413

tony

Keymaster

Hello,

The code

$(“#refresh_grid-table”).click(function(){
jQuery(grid_selector).jqGrid(‘clearGridData’);
jQuery(grid_selector).jqGrid(‘setGridParam’, {data: grid_data});
jQuery(grid_selector).trigger(‘reloadGrid’);
});

$(“#refresh_grid-table”).click(function(){

jQuery(grid_selector).jqGrid(‘clearGridData’);

jQuery(grid_selector).jqGrid(‘setGridParam’, {data: grid_data});

jQuery(grid_selector).trigger(‘reloadGrid’);

});

is not correct.
The code that will work is

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

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

This is so, since the click is alredy binded to this button.

If possible can you please poast a simple test case.
Also if you set

loadonce: true,

the the data becomes local after it is loaded and the reloading will work only on local data.

Kind Regards,

This reply was modified 11 years, 4 months ago by tony. Reason: Typo in code

January 21, 2015 at 9:06 pm #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, 4 months ago by tony. Reason: code formatting

January 21, 2015 at 9:08 pm #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 22, 2015 at 3:06 pm #115418

tony

Keymaster

Hello,

Your php code should be in separate file and not in the same where the grid is builded. I think you understand what you do wrong.

Kind Regards,

January 22, 2015 at 9:25 pm #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 22, 2015 at 10:12 pm #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 10:46 pm #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 23, 2015 at 12:39 am #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 23, 2015 at 5:56 pm #115428

tony

Keymaster

Hello,

If you look for a PHP implementation I can suggest you to look at our

PHP component here

You can find a the demo here

Kind Regards,

January 25, 2015 at 9:12 pm #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 25, 2015 at 10:20 pm #115484

selfmade01

Participant

sort is now also working,

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

January 25, 2015 at 11:15 pm #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

February 2, 2015 at 10:42 am #117499

$(sel).trigger( 'reloadGrid' ); don't reload mysql-data

Search Forum

Recent Replies

Forum Statistics

UserOnline