Guriddo » Topic: Reloading each detail grid after save

Reloading each detail grid after save

Guriddo
Reloading each detail grid after save

This topic has 8 replies, 2 voices, and was last updated 9 years, 9 months ago by guriddo.support.

Creator

Topic
July 2, 2016 at 3:38 pm #125377

paladin0
Participant

Hey guys.

I have 1 master grid with 5 detail grids.

I am saving to the database correctly and the database is setting the id (auto inc) for each new row.

However the grid sets jpg1 (or something like that)

so after each row is saved i want to reload the grid so that it gets the id from the database. this way if a user then edits the row it will get the correct id and it will work.

so all i need to do is reload each grid IF a new line is saved. IM using inline editing to add new rows.

here is the code for my inline nav

$(‘#education_grid’).jqGrid(‘inlineNav’, ‘#education_gridPager’, {addParams: {position: “last”}, edit: false});

Also

I am also having a problem because i have 5 detail grids. IF i press enter (not the grid save button) it tries to post all 5 grids to the controller. Is there anyway to set it to only save for the one grid on pressing enter?
Creator

Topic

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

Author

Replies

July 4, 2016 at 9:17 am #125379

guriddo.support

Participant

Hello,

Please look at this forum post here

As for the second problem we can not reproduce it. Can you please demonstrate us the problem with simple code?

Thank you

Kind Regards,

Will

Guriddo Support Team

July 5, 2016 at 7:50 am #125389

paladin0

Participant

Below is the code. Each grid in the page is exactly the same. I just have 5 of them with different names/ functions. so what you see is replicated 5 times with different names.

I have tried the reload grid code from the link and it does not reload. the row will vanish. However when i reselect the row in the master grid it appears. so its 1/2 working.

This is also the same grid code that i am having problems with all 5 being submitted when i press enter (to save) on inline editing

&lt;script&gt; //Skills grid
					$(&quot;#skills_grid&quot;).jqGrid({
					url: site[&#039;uri&#039;][&#039;public&#039;] + &#039;/data/Skills/empid&#039;,
					editurl: site[&#039;uri&#039;][&#039;public&#039;] + &#039;/data/Skills/&#039;,
		            datatype: &quot;json&quot;,
					colModel: [
		                    { label: &#039;ID&#039;, name: &#039;id&#039;, key: true, width: 20 },
		                    { label: &#039;employee_id&#039;, name: &#039;employee_id&#039;, width: 20 },
		                    { label: &#039;skill&#039;, name: &#039;skill&#039;, width: 25, editable: true	},
		                    { label: &#039;level&#039;, name: &#039;level&#039;, width: 25, editable: true }                
					],
					width: &#039;600&#039;,
					rowNum: 200,
					onSelectRow: editRowSkills,
					pgtext : &quot;&quot;,
					pgbuttons: false,
					height: &#039;100&#039;,
					viewrecords: true,
					caption: &#039;Skills&#039;,
					serializeRowData: function(postdata)
					{ 
					    postdata[&quot;csrf_token&quot;] = $(&quot;meta[name=csrf_token]&quot;).attr(&quot;content&quot;);
					    postdata[&quot;employee_id&quot;] = employee_id;
       					return postdata; 
        			},
					pager: &quot;#skills_gridPager&quot;
				});
				
				                
                $(&#039;#skills_grid&#039;).navGrid(&#039;#skills_gridPager&#039;,
                { edit: false, add: false, del: true, search: false, refresh: false, view: false, position: &quot;left&quot;, cloneToTop: false },
				{}, 
				{},  
				{ serializeDelData : function( postdata ) 
					{
						postdata[&quot;csrf_token&quot;] = $(&quot;meta[name=csrf_token]&quot;).attr(&quot;content&quot;);
       					return postdata; 
					}
				}
				);        
		
			    $(&#039;#skills_grid&#039;).jqGrid(&#039;inlineNav&#039;, &#039;#skills_gridPager&#039;, {addParams: {position: &quot;last&quot;, addRowParams: {successfunc: function (val){if (val.responseText == &#039;OK&#039;) {$(this).jqGrid(&#039;setGridParam&#039;, {datatype: &#039;json&#039;}).trigger(&#039;reloadGrid&#039;);}}}}, edit: false});
			    
				var lastSelectionSkills;

	            function editRowSkills(id) 
	            {
	                if (id &amp;&amp; id !== lastSelectionSkills) 
	                {
	                    var grid = $(&quot;#skills_grid&quot;);
	                    grid.jqGrid(&#039;restoreRow&#039;,lastSelectionSkills);
	                    grid.jqGrid(&#039;editRow&#039;,id, {keys: true} );
	                    lastSelectionSkills = id;
	                };
	            };

$("#skills_grid").jqGrid({

url: site['uri']['public'] + '/data/Skills/empid',

editurl: site['uri']['public'] + '/data/Skills/',

datatype: "json",

colModel: [

{ label: 'ID', name: 'id', key: true, width: 20 },

{ label: 'employee_id', name: 'employee_id', width: 20 },

{ label: 'skill', name: 'skill', width: 25, editable: true },

{ label: 'level', name: 'level', width: 25, editable: true }

width: '600',

rowNum: 200,

onSelectRow: editRowSkills,

pgtext : "",

pgbuttons: false,

height: '100',

viewrecords: true,

caption: 'Skills',

serializeRowData: function(postdata)

{

postdata["csrf_token"] = $("meta[name=csrf_token]").attr("content");

postdata["employee_id"] = employee_id;

return postdata;

pager: "#skills_gridPager"

});

$('#skills_grid').navGrid('#skills_gridPager',

{ edit: false, add: false, del: true, search: false, refresh: false, view: false, position: "left", cloneToTop: false },

{},

{ serializeDelData : function( postdata )

{

postdata["csrf_token"] = $("meta[name=csrf_token]").attr("content");

return postdata;

}

);

$('#skills_grid').jqGrid('inlineNav', '#skills_gridPager', {addParams: {position: "last", addRowParams: {successfunc: function (val){if (val.responseText == 'OK') {$(this).jqGrid('setGridParam', {datatype: 'json'}).trigger('reloadGrid');}}}}, edit: false});

var lastSelectionSkills;

function editRowSkills(id)

{

if (id && id !== lastSelectionSkills)

{

var grid = $("#skills_grid");

grid.jqGrid('restoreRow',lastSelectionSkills);

grid.jqGrid('editRow',id, {keys: true} );

lastSelectionSkills = id;

};

This reply was modified 9 years, 9 months ago by paladin0.

July 5, 2016 at 11:04 am #125391

guriddo.support

Participant

Hello,

We missed the master definition. It is important too.

Also try to use only one detail grid excluding the other 4. Please let us know if in this case the submitting is ok.

Please post your master grid too.

Kind Regards,

Will

Guriddo Support Team

July 5, 2016 at 1:33 pm #125393

paladin0

Participant

$(document).ready(function () {
		            	$(&quot;#jqGrid&quot;).jqGrid(
		           		{
							url: site[&#039;uri&#039;][&#039;public&#039;] + &#039;/data/Employees/&#039;,
							editurl: site[&#039;uri&#039;][&#039;public&#039;] + &#039;/data/Employees/&#039;,
							datatype: &quot;json&quot;,
							colModel: [{ label: &#039;id&#039;, name: &#039;id&#039;, key: true, width: 75 ,hidden:true },
							{ label: &#039;First Name&#039;, name: &#039;firstName&#039;, width: 20 ,editable: true},
							{ label: &#039;Middle Name&#039;, name: &#039;middleName&#039;, width: 20 ,editable: true,hidden:true},
							{ label: &#039;Last Name&#039;, name: &#039;lastName&#039;, width: 20 ,editable: true}
							],
					gridview: true, 	
		                	width: &#039;200&#039;,
		                	height: &#039;500&#039;,
		                	pgtext : &quot;&quot;,
		                	pgbuttons: false,
					viewrecords: false,
					loadonce: false,
					onSelectRow: setRows,
					caption: &#039;&#039;,		
		                	pager: &quot;&quot;
		            	});
		            });
		            
				var lastSelection;

	            function setRows(id) 
	            {      
	                //Load Account Details Grid
	                if(id != null) 
					{
						jQuery(&quot;#details_grid&quot;).jqGrid(&#039;setGridParam&#039;,{url: site[&#039;uri&#039;][&#039;public&#039;] + &#039;/data/Details1/&#039;+id,datatype: &#039;json&#039;});
						jQuery(&quot;#details_grid&quot;).trigger(&quot;reloadGrid&quot;);

						jQuery(&quot;#education_grid&quot;).jqGrid(&#039;setGridParam&#039;,{url: site[&#039;uri&#039;][&#039;public&#039;] + &#039;/data/Details2/&#039;+id,datatype: &#039;json&#039;});
						jQuery(&quot;#education_grid&quot;).trigger(&quot;reloadGrid&quot;);

						jQuery(&quot;#licenses_grid&quot;).jqGrid(&#039;setGridParam&#039;,{url: site[&#039;uri&#039;][&#039;public&#039;] + &#039;/data/Details3/&#039;+id,datatype: &#039;json&#039;});
						jQuery(&quot;#licenses_grid&quot;).trigger(&quot;reloadGrid&quot;);
						
						jQuery(&quot;#skills_grid&quot;).jqGrid(&#039;setGridParam&#039;,{url: site[&#039;uri&#039;][&#039;public&#039;] + &#039;/data/Details4/&#039;+id,datatype: &#039;json&#039;});
						jQuery(&quot;#skills_grid&quot;).trigger(&quot;reloadGrid&quot;);

						employee_id = id;
					}   
	            };

$(document).ready(function () {

$("#jqGrid").jqGrid(

{

url: site['uri']['public'] + '/data/Employees/',

editurl: site['uri']['public'] + '/data/Employees/',

datatype: "json",

colModel: [{ label: 'id', name: 'id', key: true, width: 75 ,hidden:true },

{ label: 'First Name', name: 'firstName', width: 20 ,editable: true},

{ label: 'Middle Name', name: 'middleName', width: 20 ,editable: true,hidden:true},

{ label: 'Last Name', name: 'lastName', width: 20 ,editable: true}

gridview: true,

width: '200',

height: '500',

pgtext : "",

pgbuttons: false,

viewrecords: false,

loadonce: false,

onSelectRow: setRows,

caption: '',

pager: ""

});

var lastSelection;

function setRows(id)

{

//Load Account Details Grid

if(id != null)

{

jQuery("#details_grid").jqGrid('setGridParam',{url: site['uri']['public'] + '/data/Details1/'+id,datatype: 'json'});

jQuery("#details_grid").trigger("reloadGrid");

jQuery("#education_grid").jqGrid('setGridParam',{url: site['uri']['public'] + '/data/Details2/'+id,datatype: 'json'});

jQuery("#education_grid").trigger("reloadGrid");

jQuery("#licenses_grid").jqGrid('setGridParam',{url: site['uri']['public'] + '/data/Details3/'+id,datatype: 'json'});

jQuery("#licenses_grid").trigger("reloadGrid");

jQuery("#skills_grid").jqGrid('setGridParam',{url: site['uri']['public'] + '/data/Details4/'+id,datatype: 'json'});

jQuery("#skills_grid").trigger("reloadGrid");

employee_id = id;

}

};

July 5, 2016 at 1:35 pm #125394

paladin0

Participant

thats the master code.

I tried to use your link for refreshing just the one detail grid. It didnt work. Not sure why

July 5, 2016 at 2:18 pm #125397

paladin0

Participant

Have have made some small progress.
I have this in
employee_id is set outside of the function by the master grid.

successfunc: function (employee_id){alert(employee_id); jQuery("#skills_grid").jqGrid('setGridParam',{url: site['uri']['public'] + '/data/Skills/'+employee_id,datatype: 'json'}); jQuery("#skills_grid").trigger("reloadGrid");
However in the post data i am seeing employee_id replaced with

[object%20Object]?_search=false&nd=1467720982505&rows=200&page=1&sidx=&sord=asc

any ideas?

July 6, 2016 at 11:47 am #125400

guriddo.support

Participant

Hello,

Your code is quite simple and in our end it work as expected.

Here is the link to your code

We use not database files. So if you try to add a record and press a save button the new inserted row will disappea, which means that the data is reloaded successful.

Kind Regards,

Will

Guriddo Support Team

July 6, 2016 at 11:49 am #125401

Reloading each detail grid after save

Search Forum

Recent Replies

Forum Statistics

UserOnline