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
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
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; }; }; } |
Thanks for that will.
I have got the solution that i want mostly working. However i have run into an interesting problem.
I have my grid setup with cell edit. and when i select the row it expands a sub row that I then set the HTML for. when i do this it works as expected.
If i click into cells in the same row it works as expected.
If i click into cells in the row below it works as expected.
If i click into any row below the current editable cells row it works fine.
But if i click into a row above the current editable cells row it tries to post data to the server when nothing has changed.
and if i look at the ID being posted it is full of the HTML i am setting for the subrow.
|
1 2 3 4 5 6 7 8 9 10 11 |
onCellSelect: function(rowid,iRow,iCol,e) { \\this toggles the subgridrow so that i can set the html $("#jqGridDetails").jqGrid('toggleSubGridRow', rowid); $("#jqGridDetails").jqGrid('toggleSubGridRow', lastopenrow); \\i then blank out the html and set it to ensure nothing is there. var html = ''; $("#" + subrow).html(html); \\I then set the html i want in the sub row var html = '<input class="form-control" id="comment" name="comment" type="text" value="'+rowData.comment+'"/>'; $("#" + subrow).html(html); |
however when i click up in the grid to a row above it posts my html as the ID for the row.
I really am stumped.
I have tried commenting out all of my code for the html and inputs. I still get the error.
<div id="jqGridDetails_3" class="tablediv"></div>
thanks for that. the first part worked a treat.
as for the second bit about removing the edit box. It works. Problem is i still need the cell to post on clicking another cell. restore or save works but it will post on save but not on clicking into the next cell.
I just somehow need to remove the input box without changing anything else
thanks for that i used that demo to help me build the layout i wanted.
I also have these custom inputs feeding back into the hidden columns so that saving the data should be easy.
Only problem is that i cant figure out how to trigger the editurlpost.
Is there a way to make jqgrid think that i have used inline edit and trigger a post with all current data in the grid? I dont want to use a save button
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?
thats the master code.
I tried to use your link for refreshing just the one detail grid. It didnt work. Not sure why
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
$(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; } }; |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<script> //Skills grid $("#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; }; }; |
Thanks for that. Here is my code for the options. Im using inline editing and then the add and delete in the nav bar.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$('#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
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.
|
1 2 3 4 5 |
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
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
|
1 2 3 4 |
serializeRowData: function(postdata) { return { x01: JSON.stringify(postdata ) + $("meta[name=csrf_token]").attr("content")}; }, |
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>
great thanks for that. It solved my problem.
I have two more questions.
Copyright 2014 TriRand LtdAll Rights ReservedRSS
Back to Top