I am using ASP.MVC and jqgrid 3.7.2. The data loads OK into the grid and subgrid. Updating the master part of the table works great. I can update or remove a row from the subgrid since one of the fields in the subgrid is the primary key of the parent row. But when trying to add a row when the row is posted back to the server I am having trouble getting the parent row's Id. All the other subgrid values are posted as expected. I thought about trying to get the "selected" row of the parent, but the parent row is not selected, so I am not sure how to go about getting the parent rows Id (primary key) in master table thus will be a foreign key in the detail table. When there is any data is the subgrid, I can also get the parent's id since all my subgrid's rows have that as a hidden field. I noticed that during the post an Id field is part of the postback, but the value is null. Any ideas? I am using editing from the navigation bar.
i just figured a very lazy way of doing the same:
i used :
editurl:"datasource/notas_edit.php?pid="+row_id,
Then i get the value of it with $_GET in php ... lazy but works!
subGridRowExpanded: function (subgrid_id, row_id) {
var currentRow = $('#UtilitiesGrid').jqGrid('getRowData', row_id);
var utilityPrimaryKey = currentRow.UtilityId;
...
colNames: ['parentid','subid',...], //insert parentid column, hidden
colModel: [{name:"parentid", index:"parentid", hidden:true, editable:true,
editoptions: {
disabled:true, //dissabled in case colModel->hidden=false
value:utilityPrimaryKey , //Value for parentid in the add form
},
{name:"subid",index:"subid",key:true,hidden:true}
...
$("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{
add:true,
del:true,
refresh:true,
refreshstate:"current",
search:false,
},
{},//edit options
//add options
{recreateForm:true //since clearAfterAdd is trueby default, recreate the form so we re-establish value for parent id
});
I ended up saving the primary key when the row was expanded. Then I used that value in the add options for the navgrid
subGridRowExpanded: function (subgrid_id, row_id) {
var currentRow = $('#UtilitiesGrid').jqGrid('getRowData', row_id);
var utilityPrimaryKey = currentRow.UtilityId`;
...
$("#" + subGridTableId).jqGrid('navGrid', "#" + pagerId, { edit: true, add: true, del: true, search: false, view: false, refresh: true },
...
{ // Add Options
reloadAfterSubmit: true,
afterSubmit: CheckForError,
closeAfterAdd: true,
url: "/Options/AddUtilityPwsId/" + utilityPrimaryKey
},
Related
I am trying to update the cell value of a particular column in my grid. I am using local JSON for populating the grid datatype: "local".
The column definition of that column is as follows:-
{
name: 'details',
index: 'details',
label: 'Details',
editable: false,
align: 'center',
formatter: function(cellvalue, options, rowObject) {
if (rowObject['verified']) {
return 'sdfsfsd'; // actually hyperlink for the cellvalue
}
return '';
}
}
I am using the following line of code to update the cell value:-
// rowid is 1
grid.jqGrid('setCell', 1, 'details', 'DONE!');
Also tried like this:
// the last parameter true to force update
grid.jqGrid('setCell', 1, 'details', 'DONE!', null, null, true);
However, the cell value is cleared out (cell becomes empty, <td> content is empty). This happens only for this column, and not for other columns in the grid. What am I missing?
Thanks
Vivek Ragunathan
If you use custom formatter you should specify unformatter too. The function formatter will be used to set the value in the cell. At the beginning of cell editing jqGrid need to get the value from the cell. The function unformat do the job.
I have a jqGrid (using inline editing) with an autocomplete column. When the user selects a value from the autocomplete column, an event handler sets a value on another column, and also sets the value on the autocomplete column to something other than the label returned from the autocomplete source. The two column definitions (complete jsFiddle example here):
{
name: 'cartoonId',
index: 'cartoonId',
width: 90,
editable: false},
{
name: 'cartoon',
index: 'cartoon',
width: 200,
editable: true,
edittype: 'text',
editoptions: {
dataInit: function(elem) {
$(elem).autocomplete({
source: autocompleteSource,
select: function(event, ui){
var rowId = $("#inlineGrid").jqGrid('getGridParam', 'selrow');
if(ui.item){
$("#inlineGrid").jqGrid('setCell', rowId, 'cartoonId', ui.item.CartoonId);
$("#inlineGrid").jqGrid('setCell', rowId, 'cartoon', ui.item.Name);
}
return false;
}
});
}
}},
The problem is that whenever the user selects a value from the autocomplete, either by clicking it or using arrows and pressing the tab key, that cell is no longer editable, and the grid appears to lose focus entirely. If I comment out the line that sets the cartoon cell value, it behaves normally. Is there any way I can get around this behavior? I need the entire row to remain in edit mode, including the cartoon column, until the user completes the edit.
jqGrid 4.4.1
jQuery 1.7.2
jQuery UI 1.8.18
You should rename Name property of the items from the autocompleteSource to value because jQuery UI Autocomplete examines the label and value per default (see the documentation).
You can't use setCell of the 'cartoon' column which is currently in the editing mode. You should remove return false; from select callback too. So the code could looks about the following
dataInit: function (elem) {
$(elem).autocomplete({
source: autocompleteSource,
select: function (event, ui) {
var rowId = $("#inlineGrid").jqGrid('getGridParam', 'selrow');
if (ui.item) {
$("#inlineGrid").jqGrid('setCell', rowId, 'cartoonId',
ui.item.CartoonId);
}
}
});
}
See http://jsfiddle.net/27dLM/38/
I Have problem in use jqGrid,Before discussing the question of explain tables.
i have 4 tables CostType,CurrencyUnit , Request,RequestCost .
CostType Table structure
CostId CostName
------- ----------
1 permit
2 Warehouse receipt
3 Warehousing
and Request structure
RequestId RequestNo WaybillNo
------------------------------------------
1 100 120Ac30
2 101 400CA852
and CurrencyUnit table stracture:
UnitId UnitName
------------------
1 Dollar
2 Pound
3 Rial
and CostRequest table stracture
requestId CostId Amount CurrencyUnitId Remark
--------------------------------------------------------
1 2 200 3
1 1 400 1
i want in fill page load grid As follows:
Afterwards user can enter request No in top textbox and click button search As follows:
user can change or enter some Cost Amount for this request As follows:
and click in save button to save in database.
Notes: i'm starter in jqGrid i can fill first Grid other two-step i can not implemet.
please help me . thanks all
It's a little difficult to answer on your question without writing the code for you.
The input field for "RequestNo" (having id="requestNo" for example) and the "Search" button could be simple controls in <fieldset> over the grid. click handler of the "Search" button can just call $("#grid").trigger("reloadGrid", [{page:1}]). Inside of grid definition you can use postData like
var $grid = $("#grid"),
editingRowId,
myEditParam = {
keys: true,
oneditfunc: function (id) { editingRowId = id; },
afterrestorefunc: function (id) { editingRowId = undefined; },
aftersavefunc: function (id) { editingRowId = undefined; }
};
$grid.jqGrid({
...
postData: {
// add requestNo parameter to the request
requestNo: function () { return $("#requestNo").val(); }
},
beforeRequest: function () {
// stop request to the server for empty requestNo
return $("#requestNo").val() !== "" ? true : false;
},
onSelectRow: function (id) {
if (id !== editingRowId) {
if (typeof editingRowId !== "undefined") {
// save previously editing row
$(this).jqGrid("saveRow", editingRowId, myEditParam);
}
// start inline editing. The user should save the row by pressing ENTER
$(this).jqGrid("editRow", id, myEditParam);
}
}
...
});
You can add additionally "Save" button which would call $("#grid").jqGrid("saveRow", editingRowId); to save the last editing row if editingRowId is not undefined.
It is important to add editable: true to all columns which you want to see in editing mode. If you want to have all editing columns in the grid you can use cmTemplate: {editable: true} jqGrid option. It changes the defaults for column definitions defined in colModel.
To have dropdown in the "CurrencyUnit" column you should include additional properties in the column definition:
edittype: "select", editoptions: { value: "Dollar:Dollar; Pound:Pound; Rial:Rial" }
I need to pass or make available a jqgrid colModel column name to a function triggered by the jqgrid event "onclickSubmit:" defined in the edit options of navGrid - but i don't know how to do that.
here are the jqgrid and javascript code segments:
..., onclickSubmit: fixpostdata}, // navGrid edit options
.
.
.
var fixpostdata = function(params, postdata){
var rowid = $('#tab3-grid').getGridParam('selrow');
// when the onclickSubmit event fires and calls this function,
// a string containing a jqgrid colmodel column name needs to be
// made available in order to modify that cell's value contained
// in the postdata array prior to posting it to the server.
columnName = ???;
var value = $('#tab3-grid').jqGrid('getCell', rowid, columnName );
postdata[ columnName ] = value;
return;
}
Can anyone help?
also,
what's contained in the params argument?
If you need to send contain of some hidden column to the server together with other editable columns you need include editable: true in the hidden column and add one more property
editrules: { edithidden: false }
I'm new to jqGrid, so hopefully someone can point me in the right direction.
Basically, I am using jgGrid to display a list of dates and costs that I have read in from a file that I want the user to be able to amend or add new entries or delete existing entries. Upon the user clicking an onscreen button "Apply" to post back the form , I read out the jqGrid and post back to Server in the form of a JSON string.
My problem is that when I add new rows (via 'editGridRow'), jqGrid is using it's autogenerated jqg1, jg2, jg3, etc and the new rows are being populated at the top of grid instead of at their row id position i.e at the bottom of grid.
I am able to generate RowID's as necessary, however I do not seem to be able to supply them to 'editGridRow' when creating new entries, instead it appears I have to use the keyword "new".
As you are aware the reason I am using editGridRow instead of addRowData is that editGridRow creates a modal dialog for the user to enter the data.
Any help would be appreciated.
This is what I would like to use to supply a row ID:
$("#tableGrid").jqGrid('editGridRow', gridRowID, {reloadAfterSubmit:false});
This is what I have to use to get the code to work:
$("#tableGrid").jqGrid('editGridRow', "new", {reloadAfterSubmit:false});
Here is the code snippet I use for creating the gqGrid in my JSP:
var gridRowID = ${costHistoryEntries}.length
$("document").ready(function() {
$("#tableGrid").jqGrid({
data: ${costHistoryEntries},
datatype: "local",
height: 200,
colNames:['Date', 'Cost'],
colModel:[
{name:'chdate', index:'chdate', width:110, sorttype:"date", editable:true, editrules:{date:true, required:true, custom:true, custom_func:checkDate}, datefmt:'d/m/Y'},
{name:'cost', index:'cost', width:160, align:"right", sorttype:"float", editable:true, editrules:{number:true, required:true}, formatter:'float'},
],
autowidth: true,
loadonce: true,
sortname: 'chdate',
sortorder: "desc",
rowList:[10, 20, 30],
pager: jQuery('#tablePager'),
viewrecords: true,
editurl: '/myurl',
caption: "Cost History Entries" }
);
$("#tableGrid").jqGrid('navGrid', "#tablePager", {edit:true, add:true, del:true, search:true, refresh:true});
$("#addEntry").click(function() {
gridRowID++;
$("#tableGrid").jqGrid('editGridRow', "new", {reloadAfterSubmit:false});
});
});
I also created a button and linked it to "addEntry" as an alternative way to adding a new row using the jqGrid Navigator "add/edit/delete/find/reload" bar. As you can see previous to loading the grid with data I stored the number of entries in gridRowID. What I was hoping to be able to do in the "#addEntry" click function was use the updated gridRowID as a RowID parameter.
As a FYI:
In a previous version of the code I was using the following to load the data into the grid:
var griddata = ${costHistoryEntries};
for (var i=0; i <= griddata.length; i++) {
$("#tableGrid").jqGrid('addRowData', i+1, griddata[i], "last");
}
but found that I could do that same with
data: ${costHistoryEntries},
Both versions correctly create row ID's for the supplied sample data from the server:
[{"chdate":"20/05/2011","cost":"0.111"},{"chdate":"01/06/2011","cost":"0.222"},{"chdate":"07/07/2011","cost":"0.333"}]
My problem is adding new rows of data.
Further update, On the server side, as a test I intercepted the post to /myurl and updated the id from "_empty" to "7" but the new entry in jqGrid still has an autogenerated jqGrid Row ID "jqg1":
Key = chdate, Value = 26/09/2011
Key = oper, Value = add
Key = cost, Value = 14
Key = id, Value = _empty
Updated Key = chdate, Value = 26/09/2011
Updated Key = oper, Value = add
Updated Key = cost, Value = 14
Updated Key = id, Value = 7
I am not quite understand your requirement. You get the input for the jqGrid from the server, but use datatype: "local" instead of the datatype: "json" for example which instruct jqGrid to get ajax request to the server to get the data whenever as needed. Moreover you want to save the date on the server, but use editurl: '/dummyurl' instead of the real server url. The editurl would get the input data from the $("#tableGrid").jqGrid('editGridRow', "new", {reloadAfterSubmit:false}); and should post back the id of the new generated row. Is it not what you want?
So my suggestion would be to use some server based datatype (the bast is datatype: "json") and in the same way use real editurl which save the data on the server (in the database mostly) and place in the server response the id on the new generated data item.
UPDATED: If you use reloadAfterSubmit: false option of the editGridRow you have to use afterSubmit event handler together with reloadAfterSubmit which decode the server response and return the result in the format [true,'',new_id] For example if your server just return new rowid as the data you can use
$("#tableGrid").jqGrid('editGridRow', "new",
{
reloadAfterSubmit: false,
afterSubmit: function (response) {
return [true, '', response.responseText];
}
}
);