Guriddo » Topic: Master Detail grid and inline editing

Master Detail grid and inline editing

Guriddo
editing, master detail
Master Detail grid and inline editing

Tagged: editing, master detail

This topic has 13 replies, 3 voices, and was last updated 9 years, 10 months ago by guriddo.support.

Creator

Topic
May 24, 2016 at 1:49 pm #125192

paladin0
Participant

Hey guys

Im new to jqgrid and im trying to get an understanding of how it all holds together.

Basically i need to have 2 grids. In grid one i select a customer and then in grid 2 it will display all orders for that customer. However in grid 2 i want to be able to edit in line as well as add new lines.

First i was thinking master->detail grid but for some reason you cant edit lines in the detail grid? is that by design? or did i miss something
Creator

Topic

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

Author

Replies

May 24, 2016 at 3:53 pm #125193

guriddo.support

Participant

Hello,

The master-detail example you refer is just a demo. We can not put all the features in one example.

This is not by design and actually we have exactly the code you want, but with our PHP jqGrid component – here

The PHP component generate the same jqGrid’s.

If you have difficulties, please let us know where you have such one and which editing module you use.

Kind Regards,

Will

Guriddo Support Team

May 25, 2016 at 2:17 am #125198

paladin0

Participant

ok so just so that im clear. the back end for all the grid is just javascript? so that everything you are doing in that php example is possible in straight javascript? like the master->detail example?

May 25, 2016 at 8:57 am #125201

tony

Keymaster

Hello,

No. Most of operations like retrieving data, sorting, paging, searching are performed at PHP end. The build of grid is based and some descriptions of the php script and the script generates automatically the java script code.

For clarification in master grid we use onselectRow, onPaging, onSortCol events,

The javascript for onSelectRow is:


onSelectRow : function(rowid, selected)
{
    if(rowid != null) {
        jQuery(&quot;#detail&quot;).jqGrid(&#039;setGridParam&#039;,{postData:{EmployeeID:rowid}});
        jQuery(&quot;#detail&quot;).jqGrid(&#039;setColProp&#039;,&#039;EmployeeID&#039;,{editoptions:{defaultValue:rowid}});
        jQuery(&quot;#detail&quot;).trigger(&quot;reloadGrid&quot;);
        // Enable CRUD buttons in navigator when a row is selected
        jQuery(&quot;#add_detail&quot;).removeClass(&quot;ui-state-disabled&quot;);
        jQuery(&quot;#edit_detail&quot;).removeClass(&quot;ui-state-disabled&quot;);
        jQuery(&quot;#del_detail&quot;).removeClass(&quot;ui-state-disabled&quot;);
    }
},

onPaging : function(rowid, selected)
{
   // clear the grid data and footer data
    jQuery(&quot;#detail&quot;).jqGrid(&#039;clearGridData&#039;,true);
    // Disable CRUD buttons in navigator when a row is not selected
    jQuery(&quot;#add_detail&quot;).addClass(&quot;ui-state-disabled&quot;);
    jQuery(&quot;#edit_detail&quot;).addClass(&quot;ui-state-disabled&quot;);
    jQuery(&quot;#del_detail&quot;).addClass(&quot;ui-state-disabled&quot;);
},
onSortCol : function(rowid, selected)
{
   // clear the grid data and footer data
    jQuery(&quot;#detail&quot;).jqGrid(&#039;clearGridData&#039;,true);
    // Disable CRUD buttons in navigator when a row is not selected
    jQuery(&quot;#add_detail&quot;).addClass(&quot;ui-state-disabled&quot;);
    jQuery(&quot;#edit_detail&quot;).addClass(&quot;ui-state-disabled&quot;);
    jQuery(&quot;#del_detail&quot;).addClass(&quot;ui-state-disabled&quot;);
},
....

onSelectRow : function(rowid, selected)

{

if(rowid != null) {

jQuery("#detail").jqGrid('setGridParam',{postData:{EmployeeID:rowid}});

jQuery("#detail").jqGrid('setColProp','EmployeeID',{editoptions:{defaultValue:rowid}});

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

// Enable CRUD buttons in navigator when a row is selected

jQuery("#add_detail").removeClass("ui-state-disabled");

jQuery("#edit_detail").removeClass("ui-state-disabled");

jQuery("#del_detail").removeClass("ui-state-disabled");

}

onPaging : function(rowid, selected)

{

// clear the grid data and footer data

jQuery("#detail").jqGrid('clearGridData',true);

// Disable CRUD buttons in navigator when a row is not selected

jQuery("#add_detail").addClass("ui-state-disabled");

jQuery("#edit_detail").addClass("ui-state-disabled");

jQuery("#del_detail").addClass("ui-state-disabled");

onSortCol : function(rowid, selected)

{

// clear the grid data and footer data

jQuery("#detail").jqGrid('clearGridData',true);

// Disable CRUD buttons in navigator when a row is not selected

jQuery("#add_detail").addClass("ui-state-disabled");

jQuery("#edit_detail").addClass("ui-state-disabled");

jQuery("#del_detail").addClass("ui-state-disabled");

....

In the detail grid we use beforShowForm for adding and recreateForm : true for add and edit.

These options should be set in navigator add, edit events

The code for beforeShowForm is:


beforeShowForm : function(formid)
{
   var srow = jQuery(&quot;#grid&quot;).jqGrid(&#039;getGridParam&#039;,&#039;selrow&#039;);
   if(srow) {
       var gridrow = jQuery(&quot;#grid&quot;).jqGrid(&#039;getRowData&#039;,srow);
       $(&quot;#EmployeeID&quot;,formid).val(gridrow.EmployeeID);
   }
}

beforeShowForm : function(formid)

{

var srow = jQuery("#grid").jqGrid('getGridParam','selrow');

if(srow) {

var gridrow = jQuery("#grid").jqGrid('getRowData',srow);

$("#EmployeeID",formid).val(gridrow.EmployeeID);

}

Kind Regards,

May 25, 2016 at 9:42 am #125203

paladin0

Participant

great thanks for that. It solved my problem.

I have two more questions.

Can i change the row height for each grid on the screen? I currently have <style>.ui-jqgrid tr.jqgrow td{height:40px;}</style> but this changes the row height for all grids on the screen. I want one at 40px and the other to be auto
is it possible to have one of the fields as a lookup? so that it can look into another table with a popup search? ie i have customers-> orders on the same screen but if i add a new order i want to be able to search for the product in a seperate table and return the ID/name

May 25, 2016 at 10:27 am #125205

tony

Keymaster

Hello,

1.
If you know the id of your grid you can

&lt;style&gt;
.ui-jqgrid #mygrid  tr.jqgrow td {height:40px;}
&lt;/style&gt;

<style>

.ui-jqgrid #mygrid tr.jqgrow td {height:40px;}

</style>

2. We have a Knowledgebase. Look here

Kind Regards,

May 25, 2016 at 1:29 pm #125206

paladin0

Participant

Tony thanks so much that helped me.

I have one final question.

when using inline editing you enter a value and then press enter. this then posts the data.

I can see in consol that the data is coming in. However i need to add a security token to the end of the post.

how would i do this. I have searched and tried a number of different methods but cant find one that works.

so currently it looks like

<span class=”header-value source-code”>client=200012&Order=1&oper=edit&id=1

i need

client=200012&Order=1&oper=edit&id=1&key=kjkzxlkjklj213kl2
</span>

May 26, 2016 at 10:30 am #125211

tony

Keymaster

Hello,

Use serializeRowData to send additional parameters when post the data to the server in inline edit.

See here

Kind Regards,

June 1, 2016 at 1:48 pm #125227

paladin0

Participant

thanks for that. I have the serialize part working.

But i cant get the extra param in.

I have tried.
editParams: { extraparam: {csrf_token: function() {return $("meta[name=csrf_token]").attr("content");}}},

extraparam: {csrf_token: function() {return $("meta[name=csrf_token]").attr("content");}},

the below works. But i need the token inside the object

serializeRowData: function(postdata)
{
return { x01: JSON.stringify(postdata ) + $(&quot;meta[name=csrf_token]&quot;).attr(&quot;content&quot;)};
},

serializeRowData: function(postdata)

{

return { x01: JSON.stringify(postdata ) + $("meta[name=csrf_token]").attr("content")};

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

June 2, 2016 at 9:18 am #125231

tony

Keymaster

Hello,

JSON.stringify does not work on object with property having function look here

Kind Regards,

June 10, 2016 at 2:04 am #125263

paladin0

Participant

Tony

thanks so much for your help.

Everything has worked really well so far. I have 2 more questions. I have tried a few options but no results.

I need to get additional data into the delete post. in the grid i have used

serializeRowData: function(postdata)
{
postdata[&quot;csrf_token&quot;] = $(&quot;meta[name=csrf_token]&quot;).attr(&quot;content&quot;);
return postdata;
},

serializeRowData: function(postdata)

{

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

return postdata;

2. I am using the popup search grid. However i want the search grid to display the name and return the id for the selected row. is this possible?

thanks so much for your help so far

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

June 10, 2016 at 9:33 am #125265

tony

Keymaster

Hello,

Thank you for the feedback.

It is a good idea to post the new questions in different post.

I’m not sure that I understand the question. Which function do you use to delete a data? If you use delGridRow Method you can use serializeDelData to post addditional parameters
Not sure that I’m clear with this – you can build a select which will display the name, but the value is the id – actually I do not understand this.

Kind Regards,

June 10, 2016 at 12:17 pm #125266

paladin0

Participant

Thanks for that. Here is my code for the options. Im using inline editing and then the add and delete in the nav bar.

$(&#039;#jqGridDetails&#039;).navGrid(&#039;#jqGridDetailsPager&#039;,
                // the buttons to appear on the toolbar of the grid
                { edit: false, add: false, del: true, search: false, refresh: false, view: false, position: &quot;left&quot;, cloneToTop: false });
		
			    $(&#039;#jqGridDetails&#039;).jqGrid(&#039;inlineNav&#039;, &#039;#jqGridDetailsPager&#039;, {addParams: {position: &quot;last&quot;}, edit: false});
			    
				var lastSelection;

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

$('#jqGridDetails').navGrid('#jqGridDetailsPager',

// the buttons to appear on the toolbar of the grid

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

$('#jqGridDetails').jqGrid('inlineNav', '#jqGridDetailsPager', {addParams: {position: "last"}, edit: false});

var lastSelection;

function editRow(id)

{

if (id && id !== lastSelection)

{

var grid = $("#jqGridDetails");

grid.jqGrid('restoreRow',lastSelection);

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

lastSelection = id;

};

But i cant seem to get it to add the serializeDelData that i have added to the grid.

maybe i am doing it wrong

June 13, 2016 at 9:00 am #125269

guriddo.support

Participant

Hello,

In navGrid when you set del:true you can set additional delete parameters. This is the 4 parameter object:

$(&#039;#jqGridDetails&#039;).navGrid(&#039;#jqGridDetailsPager&#039;,
                { edit: false, add: false, del: true, search: false, refresh: false, view: false, position: &quot;left&quot;, cloneToTop: false },
{}, 
{},  
{ serializeDelData : function( postdata ) {...}},
...
);
...

$('#jqGridDetails').navGrid('#jqGridDetailsPager',

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

{},

{ serializeDelData : function( postdata ) {...}},

...

);

...

Kind Regards,
Will

Guriddo Support Team

Author

Replies

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

You must be logged in to reply to this topic.

Stay connected with us in your favorite flavor!

Master Detail grid and inline editing

Search Forum

Recent Replies

Forum Statistics

UserOnline