jqgrid inlinenav - custom row id and delete - jqgrid

Each row has an id in our db different to the jqgrid row id. How can I send this lineid when saving a row?
Also, is there a way to delete a row?
This is my code so far:
var mydata = [
{
lineItemId: "785",
productSku:"n123",
productName:"hello there",
pieces:"123",
value:"23.00",
line:"123"
}
,
{
lineItemId: "803",
productSku:"n1234",
productName:"hello there",
pieces:"123",
value:"23.00",
line:"123"
}
];
var colNames = ['SKU','Product Name', 'Pieces','Total Value','Line Number'];
var colModel = [
{name:'productSku', index:'productSku', width:10, sorttype: 'text', editable:true},
{name:'productName', index:'productName', width:60, editable:true},
{name:'pieces', index:'pieces', width:10, sorttype: 'int', editable:true, formatter: 'integer'},
{name:'value', index:'value', width:10, sorttype: 'int', editable:true, formatter: 'number'},
{name:'line', index:'line', width:10, sorttype: 'int', editable:true, formatter: 'integer', formatoptions:{thousandsSeparator: ""}}
];
initOrdersJqGrid("orderContent", mydata, '<xsl:value-of select="$datapath/OrderId"/>', colNames, colModel, "sku", "desc");
var orderLineOptions = {
keys: true,
aftersavefunc: function (rowid, response, options) {
// only update page if orderis is nil i.e. a new order
if($('#orderidlabel').text() == "") {
log('saving order line item from order with no id yet.');
var dummy = $('<div />').html(response.responseText);
var id = dummy.find('#orderId').val();
$('#orderidlabel').text(id);
$('#orderId').val(id);
$('button[value="Save Order"]').trigger('click');
}
}
}
function initOrdersJqGrid(id, data, orderid, colNames, colModel, defaultSortColumn, defaultSortOrder) {
$("#" + id + "Table")
.jqGrid({
datatype: "local",
data: data,
colNames: colNames,
colModel: colModel,
localReader: { id: "lineItemId"},
pager: '#' + id + 'Pager',
autowidth: true,
gridview: true,
autoencode: true,
height: "auto",
forceFit: true,
shrinkToFit: true, //Width of columns should be expressed in integers which add to 100
sortname: defaultSortColumn,
sortorder: defaultSortOrder,
url: "fs/servlet/CS",
editurl: "CS?action=com.agistix.webinterface.controllers.OrderIC,saveLineItems&orderId=" + orderid
})
.jqGrid('navGrid',"#" + id + "Pager",{edit:false,add:false,del:false,search: false, refresh: false})
.jqGrid('inlineNav',"#" + id + "Pager", { addParams: { addRowParams: orderLineOptions }, editParams: orderLineOptions});
}

If you use datatype: "local" then the items from the array of input data specified by data parameters should have additional property id which specify the value of id attribute of every row (<tr>) of the grid. If you prefer to have another name of the rowsid property you can use localReader to specify it. For example localReader: { id: "Id" } option inform jqGrid to get value of id attribute of rows (rowids) from the Id property. In the case the items of your data should bi like below
{
Id: 76453
productSku:"n123",
productName:"hello there",
pieces:"123",
value:"23.00",
line:"123"
}
The value of id property need be unique.
If you have already some column in the grid which contains id from some database table you don't need to add the same value with id property. Instead of that you can just key: true in the column. jqGrid allows to place key: true in only one item of colModel.
One more common problem with ids of rows it's important to understand. If you need to place more as one grid on a page or if you need to use Subgrid as Grid then you can still have one problem. The ids in database are unique in a table, but one can have the same ids in multiple tables. On the other side the ids of HTML elements (inclusive <tr> elements used for rows) must be unique over the whole page.
To solve the problem one can use idPrefix option of jqGrid. For example you have INT IDENTITY column in the database for the primary key of the table in the database. In the case you will have integers as native ids for rowids. The values can be for example 3, 5, 40 in the first grid. By usage idPrefix: "g1_" the ids assigned to the rows (to <tr> elements) will be "g1_3", "g1_5", "g1_40". So usage of idPrefix: "g1_" for the first grid and another value like idPrefix: "g2_" can solve the problem with potential id duplicates. It's important that jqGrid automatically strip the prefix idPrefix from rowid if it sends some data to the server (if you use editing in the grid for example). One can distinguish "id" and "rowid" names. The "rowids" will be always with prefix. You can use $.jgrid.stripPref function to cut the prefix.

Related

How to get row ID by row Data in jqgrid (Not by selected row)

I want to get the row id by content of cell in jqGrid (Not by selected row).
By PRODUCTID, I can get the row id.
e.g. for PRODUCTID is ABCD, I can get 2.
The column PRODUCTID is unique.
Please give me some advices.
Thanks a lot.
My code sample:
$("#project_jqGrid").jqGrid({
url: 'project/projectQuery.php',
mtype: "POST",
datatype: "json",
page: 1,
colModel: [
{ label : "PRODUCTLINE",
//sorttype: 'integer',
name: 'PRODUCTLINE',
//key: true,
width: 100,
editable:true,
editoptions:{readonly:'readonly'}
},
{ label : "GPOWNER",
//sorttype: 'integer',
name: 'GPOWNER',
//key: true,
width: 150,
editable:true,
editoptions:{readonly:'readonly'}
},
{ label : "PRODUCTID",
//sorttype: 'integer',
name: 'PRODUCTID',
key: true,
width: 100,
editable:true,
editoptions:{readonly:'readonly'}
},
],
loadComplete: function() {
$.ajax({
dataType: 'json',
url : "project/projectDifferQuery.php", // your php file
type : "GET", // type of the HTTP request
success : function(data){
// I can get PRODUCTID from mysql database
// I want to get rowid to change cells color by PRODUCTID
// ........
// Change Cells Color(I need to get '5' by position of PRODUCTID)
//$('#project_jqGrid').jqGrid('setCell',5,"GPOWNER","",{'background-color':'#FF4545'});
}
});
},
loadonce: true,
viewrecords: true,
width: 'auto',
height: 'auto',
rowNum: 20,
pager: "#project_jqGridPager"//,
});
> Versions: - jqGrid 5.1.1
If the ProductID is unique and the grid contains ProductID as the column name in colModel, then it's recommended to add key: true to the column definition. It forces jqGrid to use the value from ProductID as the rowid.
It's important to understand that the code of jqGrid require to set unique id attribute to every row (<tr> element) of jqGrid. See here. Thus the input data of jqGrid have to contain rowid information. There are many alternative formats for the input data of jqGrid. In the most common way, the input data should contain id property. If your input data uses ProductID as the unique id of the row, then you can add the option jsonReader: { id: "ProductID" } to inform jqGrid about that. In that case you will not need to include ProductID as the column in colModel.
It is little difficult to understand what you want to get - I think you mean rowIndex, so here are some methods which can help.
Methods
getGridRowById( string rowid)
Return the row with id = rowid as document object
getInd(string rowid, [boolean rowcontent])
Returns the index of the row in the grid table specified by grid id row - rowid. If rowcontent is set to true it returns the row document object
If you have the row as document object you can get the index and id. Suppose the rowdata is the document row, then
rowdata.rowIndex is the index
rowdata.id is the id

Changing the column position of rownumber property in JQgrid

I have enabled 'rownumber' property. So it is displaying row numbers by inserting a row in left most . So first column is displaying row numbers. ButI want to display row numbers in between i.e. in 3rd column.
Is there is any way to change column position?
Some columns of jqGrid have special meaning and will be created by jqGrid depend of the options which you use. It's "rn" (rownumbers: true), "cb" (multiselect: true) and subgrid (subGrid: true). See for example the line of code. Many parts of jqGrid code just test the options and then uses the indexes of columns based on the assumption that the columns are the first columns in jqGrid. So it's probably theoretically possible to write the code which could move the original "rn" column to another position, but the code will be very tricky and probably long. Look at the demo of the answer for example.
So I would recommend you just add your custom column to the grid which looks like "rn" column and fill it with the corresponding data. The column definition could be like below
{ name: "myRowNumbern", width:25, sortable: false, resizable: false, hidedlg: true,
search: false, align: "center", fixed: true,
classes: "ui-state-default jqgrid-rownum" }
UPDATED: I created the demo which demonstrates the approach. The most important parts of the corresponding code is below:
$("#list").jqGrid({
curRowNum: 1, // current row number parameter used in custom formatter
colModel: [
...
{ name: "myRowNumbern", width: 25, sortable: false, resizable: false,
hidedlg: true, search: false, align: "center", fixed: true,
classes: "ui-state-default jqgrid-rownum",
formatter: function () {
var p = $(this).jqGrid("getGridParam"),
rn = p.curRowNum +
(parseInt(p.page, 10) - 1)*parseInt(p.rowNum, 10);
p.curRowNum++;
return rn.toString();
} },
...
],
loadComplete: function () {
var p = $(this).jqGrid("getGridParam");
p.curRowNum = 1; // reset curRowNum
}
});

jqgrid:getting values from a table with combobox and use it as a range to other form

i had a script like this
<script type="text/javascript">
var gridimgpath = 'themes/basic/images';
//alert($("jqContextMenu"));
jQuery("#VWWMENU").jqGrid(
{
url:'loadstatic.php?q=2&t=CORE_VW_WMENUS',
datatype: "json",
mtype: "POST",
colNames:['Id', 'Module'],
colModel:
[
{
name:'id',
index:'id',
width:7,
editable:true,
edittype:'text',
editrules:{required:true},
editoptions:{maxlength:10, size:10},
formoptions:{rowpos:2, elmprefix:' '},
key:true
},
{
name:'modulename',
index:'modulename',
width:15,
editable:true,
edittype:'select',
editrules:{required:true},
editoptions:{maxlength:10, size:0, dataUrl:'combopub.php?t=MODULE'},
formoptions:{rowpos:1, elmprefix:' '}
}
...
</script>
the 'modulename' form is a combobox which taken its data from a table named 'module'. in this 'module' table there is a column named "fromid" and "toid". now how can i get these two values to be the range for the 'id' form? so when i input a value to form 'id' and then i submit it, it will show a message about id that i entered is out of range. i also don't know how to make the message that to appear when this error happened. so would you guys please help me on this?
i am still a total noob about this javascript or jquery kind of thing, so your help would be much appreciated.
i hope this would help to make it clearer of what i mean.
here is table module:table_module. from left to right (exclude column covered with the red line) idmodule, namemodule, idchildfrom, idchildto. and the module name that shown on the screen is actually a concate of idmodule and namemodule
now if you pick 2 from modulename combobox like this combobox_1 then you should get the range id from 201-400. and that means if you input a value of 300 into id and you press submit button, there would be an error message appear telling you that your input is more is out of range.
i hope this explanation can help you to understand more of what i actually wants to do
If I understand you correctly you can use relatively new feature (it exist starting with jqGrid 4.4.2) implemented based on my suggestion. It allows to use postData defined as function:
{
name: "modulename",
width: 15,
editable: true,
edittype: "select",
editrules: {required: true},
editoptions: {
maxlength: 10,
size: 0,
dataUrl: "combopub.php",
postData: function (rowid) {
return { id: rowid, t: "MODULE" };
}
},
formoptions: {rowpos: 1, elmprefix: " "}
}
See the answer and the pull request for more details.

JQGrid Group Text Custom Formatter with Button inside and passing RowData

I have a requirement to provide a button on a grouped row , when onclick of that button , I should capture rowData. I've tried to implement this with custom formatter , grid.SetCell option, but didn't work.
Here is Sample code:
grid.jqGrid({
datatype: 'local',
colNames: ['Id', 'Order Id', 'Name', 'OrderName'],
colModel : [
{ name: 'ID', index: 'ID', editable: true}, //// I grouped by this column
{ name: 'OrderID', index: 'OrderID', width: 30, align: 'center'},
{ name: 'Name', index: 'Name', width: 30, align: 'center'},
{ name: 'OrderName', index: 'OrderName', width: 30, align: 'center'}
],
groupingView: {
groupField: ['ID'],
groupCollapse: true,
groupColumnShow: [false],
groupText: ['<b>{0}</b></div><input type = "button" class = "button" value = "NEW" id = "btnNew" style = "width:100px; hieght:10px" onclick = "javascript:AddNew({OrderID})" /><<b>{1} Orders</b>']
function AddNew(orderId)
{
//// DO SOME THING
}
In above example my grid will be grouped by Id , on each grouped row I need to create a button which onclick event should consist of Order Id. (Order Id is same for all the rows under each group). I need to show Count here also.
I was not able to pass order Id in group Text above, then I use custom formatter on ID column like this .
var html ;
formatter: function(cellValue, options, rowObject)
{
if ((options.rowId.toString()).indexOf("listghead") === -1) {
html = cellvalue + "<input type = "button", value = "New" onclick = AddNew(' +rowObject[1] +')
}
return html;
}
rowObject value has been passed but grouping was broken. If I don't use the above if condition grouping works fine, but onclick event is breaking.
Help me .
Thanks in Advance.
You can get the row value through rowObject so:
html = rowObject.childNodes[1].childNodes[0].wholeText;
This code return a string with the content of rowObject to that columm
You can just pass the rowObject when it comes to group header , and it is not undefined or null when it comes to groupheader.
Just test it using alert(rowObject) when you detect it's group header.

Get Images in a column of Jqgrid based on id value in another column of the grid

I have a JQGrid with 4 columns as below
<script type="text/javascript">
$(function(){
jQuery("#toolbar").jqGrid({
url:'<%=request.getContextPath()%>/TestServlet?q=1&action=fetchData',
datatype: "xml",
mtype: 'POST',
height: '100%',
width: '100%',
colNames:['LocationImage','City','State','LocationID'],
colModel:[
{name:'LocationImage',index:'LocationImage',align: 'center', formatter: imageFormatter},
{name:'City',index:'City', width:200,fixed:true,sortable:true,align:'center',editable:true, editoptions:{readonly:false,size:500}},
{name:'State',index:'State', width:200,fixed:true,sortable:true,align:'center',editable:true, editoptions:{readonly:false,size:50}},
{name:'LocationID',index:'LocationID',width:60,align:'center',hidden:true,editable:false, editoptions:{readonly:true,size:30}
],
paging: true,
rowNum:16,
rowTotal:2000,
rownumbers: true,
rownumWidth: 25,
rowList:[16,32,48],
viewrecords: true,
loadonce: true,
gridview: true,
pager: $("#ptoolbar"),
sortname: 'Name',
sortorder: "asc",
caption: "Test Grid"
})
jQuery("#toolbar").jqGrid('navGrid','#ptoolbar',{del:false,add:false,edit:false});
jQuery("#toolbar").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});
});
function imageFormatter(el, cval, opts) {
var num = '2';
return ("<center><img src='../gd/images/" + num+".png' height='180px' width='180px' /></center>")
}
Here I have hardcoded num as '2' and so displaying 2.png in the first column i.e. LocationImage, what i need is that the value for num should be from the 4th column i.e. LocationID (note its a hidden column).
Please let me know how to do this.
Thanks,
Deepna
You should change your imageFormatter function to be like this:
function imageFormatter(cellvalue, options, rowObject){
var num = $("#" + options.rowId).find("td[aria-describedby='toolbar_LocationID']").text();
return "<center><img src='../gd/images/" + num + ".png' height='180px' width='180px' /></center>";
}
okay, I'm not rally sure about it, I can't test now. but here's what you can do
From the options parameter you can get the row id, check here and then you can get Location Id with that row Id using getCell or getGridParam. and you can use this value for setting the image.
If this doesn't work for custom formatter, you can use setCol method in gridComplete property of JqGrid.
Now this is going to work for only one id. If you want to set image for all rows, get row ids using getDataIDs method in a variable and t hen go with for loop and use setCol.
I Hope this helps
I was able to fix the issue in the below way
Changed the first column in the Grid to Location ID
Now in the formatter - when I say "cellvalue", it actually
returns the location id
This location id is then set into the variable num (i.e. num =
cellvalue)
Now the formatter code replaces the id value with an image based
on id.png
Thanks,
Deepna

Resources