Guriddo » Topic: Inline edit with only select boxes

Inline edit with only select boxes

Guriddo
Inline edit with only select boxes

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

Creator

Topic
September 21, 2016 at 1:06 pm #125545

paladin0
Participant

Hey guys

I am using a grid with only select and check boxes.

However i can add a new row and delete a row.

But when i edit the user has to press enter to fire save. this wont work as they might forget and leave the grid which will reset all their changes.

Is there a way to call the save function after they change any field in the row?
Creator

Topic

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

Author

Replies

September 22, 2016 at 7:01 am #125548

guriddo.support

Participant

Hello,

Which editing module is used? One small code example will be fine.

You can bind a change event to the field and post the data to the server when it is changed.
For this purpose you can use dataInit event – but without any additional information we can not help.

Kind Regards

Will

Guriddo Support Team

September 22, 2016 at 9:34 am #125550

paladin0

Participant

function loadapprovalsgrid(approvallist)
					{
            					$(&quot;#Approvals_grid&quot;).jqGrid({
            					url: site[&#039;uri&#039;][&#039;public&#039;] + &#039;/data/Config/Approvals/empid&#039;,
            					editurl: site[&#039;uri&#039;][&#039;public&#039;] + &#039;/data/Config/Approvals/&#039;,
            		            datatype: &quot;json&quot;,
            					colModel: [
            		                    { label: &#039;ID&#039;, name: &#039;id&#039;, key: true, width: 10, hidden: true },
            		                    { label: &#039;application&#039;, name: &#039;application&#039;, width: 40,editable: true, formatter: &#039;select&#039;, edittype:&#039;select&#039;,editoptions:{value:&quot;timesheets:timesheets;expenses:expenses&quot;}},
            		                    { label: &#039;group&#039;, name: &#039;group_id&#039;, width: 150 ,editable: true,formatter:&#039;select&#039;, edittype:&#039;select&#039;, editoptions: {value: approvallist }},// &quot;1:&#039;test1&#039;;2:&#039;test2&#039;&quot;
            		                    { label: &#039;employee_id&#039;, name: &#039;employee_id&#039;, width: 20, hidden: true  },
            		                    { label: &#039;edit&#039;, name: &#039;can_edit&#039;, width: 25, editable: true,formatter:&#039;checkbox&#039;, edittype:&#039;checkbox&#039;, editoptions:	{ value:&quot;Y:N&quot; }},
            		                    { label: &#039;approve&#039;, name: &#039;can_approve&#039;, width: 25, editable: true,formatter:&#039;checkbox&#039;, edittype:&#039;checkbox&#039;, editoptions: { value:&quot;Y:N&quot; }}            
            					],
            					width: &#039;500&#039;,
            					rowNum: 200,
            					keys: true,
            					onSelectRow: editRowApprovals,
            					pgtext : &quot;&quot;,
            					pgbuttons: false,
            					height: &#039;100&#039;,
            					viewrecords: true,
            					caption: &#039;Approvals&#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;#Approvals_gridPager&quot;
            				});
            				
            				                
                            $(&#039;#Approvals_grid&#039;).navGrid(&#039;#Approvals_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;#Approvals_grid&#039;).jqGrid(&#039;inlineNav&#039;, &#039;#Approvals_gridPager&#039;, {addParams: {position: &quot;last&quot;,addRowParams: {successfunc: updateApprovals} , edit: false}});
            			    			    
            				var lastSelectionApprovals;

            				function updateApprovals(response)
            				{
            			    	jQuery(&quot;#Approvals_grid&quot;).jqGrid(&#039;setGridParam&#039;,{url: site[&#039;uri&#039;][&#039;public&#039;] + &#039;/data/Config/Approvals/&#039;+employee_id});  
            			    	jQuery(&quot;#Approvals_grid&quot;).trigger(&quot;reloadGrid&quot;);	
            				}
            
            	            function editRowApprovals(id) 
            	            {          	            	  
            	                if (id &amp;&amp; id !== lastSelectionApprovals) 
            	                {
            	                    var grid = $(&quot;#Approvals_grid&quot;);
            	                    grid.jqGrid(&#039;restoreRow&#039;,lastSelectionApprovals);
            	                    grid.jqGrid(&#039;editRow&#039;,id, {keys: true} );
            	                    lastSelectionApprovals = id;
            	                };
            	            };
					}

function loadapprovalsgrid(approvallist)

{

$("#Approvals_grid").jqGrid({

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

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

datatype: "json",

colModel: [

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

{ label: 'application', name: 'application', width: 40,editable: true, formatter: 'select', edittype:'select',editoptions:{value:"timesheets:timesheets;expenses:expenses"}},

{ label: 'group', name: 'group_id', width: 150 ,editable: true,formatter:'select', edittype:'select', editoptions: {value: approvallist }},// "1:'test1';2:'test2'"

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

{ label: 'edit', name: 'can_edit', width: 25, editable: true,formatter:'checkbox', edittype:'checkbox', editoptions: { value:"Y:N" }},

{ label: 'approve', name: 'can_approve', width: 25, editable: true,formatter:'checkbox', edittype:'checkbox', editoptions: { value:"Y:N" }}

width: '500',

rowNum: 200,

keys: true,

onSelectRow: editRowApprovals,

pgtext : "",

pgbuttons: false,

height: '100',

viewrecords: true,

caption: 'Approvals',

serializeRowData: function(postdata)

{

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

postdata["employee_id"] = employee_id;

return postdata;

pager: "#Approvals_gridPager"

});

$('#Approvals_grid').navGrid('#Approvals_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;

}

);

$('#Approvals_grid').jqGrid('inlineNav', '#Approvals_gridPager', {addParams: {position: "last",addRowParams: {successfunc: updateApprovals} , edit: false}});

var lastSelectionApprovals;

function updateApprovals(response)

{

jQuery("#Approvals_grid").jqGrid('setGridParam',{url: site['uri']['public'] + '/data/Config/Approvals/'+employee_id});

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

}

function editRowApprovals(id)

{

if (id && id !== lastSelectionApprovals)

{

var grid = $("#Approvals_grid");

grid.jqGrid('restoreRow',lastSelectionApprovals);

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

lastSelectionApprovals = id;

};

}

September 22, 2016 at 9:35 am #125551

paladin0

Participant

above is the code for the grid i made.

So there is no way i can just call saverow and force the grid to save using the edit url? and a change event doesnt seem to work i did give that a try

September 26, 2016 at 11:56 am #125560

guriddo.support

Participant

Hello,

dataInit works for us. Here is a solution, which I think is not the best one, but it works. It is applied for one field, but you can do it for all the editable one:

function loadapprovalsgrid(approvallist)
					{
            					$(&quot;#Approvals_grid&quot;).jqGrid({
            					url: site[&#039;uri&#039;][&#039;public&#039;] + &#039;/data/Config/Approvals/empid&#039;,
            					editurl: site[&#039;uri&#039;][&#039;public&#039;] + &#039;/data/Config/Approvals/&#039;,
            		            datatype: &quot;json&quot;,
            					colModel: [
            		                    { label: &#039;ID&#039;, name: &#039;id&#039;, key: true, width: 10, hidden: true },
            		                    { label: &#039;application&#039;, name: &#039;application&#039;, width: 40,editable: true, formatter: &#039;select&#039;, edittype:&#039;select&#039;,editoptions:{value:&quot;timesheets:timesheets;expenses:expenses&quot;, dataInit : function(el){ 
   $(el).on(&#039;change&#039;, function(e){ 
     $(&#039;#grid&#039;).jqGrid(&#039;saveRow&#039;,lastSelectionApprovals);
     $(&#039;#grid&#039;).jqGrid(&#039;editRow&#039;,lastSelectionApprovals, {keys: true});
   });
}},
....
}

function loadapprovalsgrid(approvallist)

{

$("#Approvals_grid").jqGrid({

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

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

datatype: "json",

colModel: [

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

{ label: 'application', name: 'application', width: 40,editable: true, formatter: 'select', edittype:'select',editoptions:{value:"timesheets:timesheets;expenses:expenses", dataInit : function(el){

$(el).on('change', function(e){

$('#grid').jqGrid('saveRow',lastSelectionApprovals);

$('#grid').jqGrid('editRow',lastSelectionApprovals, {keys: true});

});

}},

....

}

Hope you have got the point.

Kind Regards,
Will

Guriddo Support Team

September 27, 2016 at 4:49 am #125565

paladin0

Participant

great. I wasnt sure if i could call save and edit row one after the other. But it works and gives me the result i wanted

September 27, 2016 at 9:36 am #125568

Inline edit with only select boxes

Search Forum

Recent Replies

Forum Statistics

UserOnline