When css attributes are set during initialization it works fine, colours and backgrounds in cells also change when initiated from a function. But when I sort the columns all colours set from function disappear and go back to the normal grid.
<script>
var Mydata =[
{
"id":"560058",
"nm" : "L 41971",
"temp" : "21.2",
"ignition" : "off",
"pos_x" : "55.2024832",
"pos_y" : "24.9640256",
"drv" : "",
"pos_s" : "0",
"param24" : "0",
"param240" : "0",
"pwr_ext" : "12.825"
},
{
"id":"560059",
"nm" : "L 41972",
"temp" : "21.2",
"ignition" : "off",
"pos_x" : "55.2024832",
"pos_y" : "24.9640256",
"drv" : "",
"pos_s" : "0",
"param24" : "0",
"param240" : "0",
"pwr_ext" : "12.825"
}
];
var grid = $("#live_view");
grid.jqGrid({
height: '100%',
width: '700',
datatype: "local",
loadonce: true,
data : Mydata,
gridview: true,
colNames: ['Name', 'Temperature', 'Ignition', 'lat', 'lon', 'Driver', 'Speed', 'param24', 'movement', 'pwr_ext'],
colModel:[
{name:'nm',index:'nm'},
{name:'temp',index:'temp'},
{name:'ignition',index:'ignition'},
{name:'pos_x',index:'pos_x'},
{name:'pos_y',index:'pos_y'},
{name:'drv',index:'drv'},
{name:'pos_s',index:'pos_s'},
{name:'param24',index:'param24'},
{name:'param240',index:'param240'},
{name:'pwr_ext',index:'pwr_ext'},
],
rowNum:100,
rowList:[100,200,300],
pager: '#pager2',
sortname: 'param240',
viewrecords: true,
sortorder: "desc",
caption:"Vertex Live View",
loadComplete: function() {
grid.jqGrid('setCell',"560058","nm","",color:'red'});
},
});
$("#live_view").jqGrid('navGrid','#pager2',{edit:false,add:false,del:false});
$("#cc").click(function (){
$("#live_view").jqGrid('setCell',"560058","nm","",{color:'blue'});
})
</script>
Change Colour
When you sort, it recreates the html. For all jqgrid knows, the column you modified might not even be visible on the current page after sorting. Bottomline, you will need to reapply the colours.
You could peruse the jqGrid api, to see if they allow setting the colour of the cell from the model data. I don't think so though.
Related
jqGrid treegrid all rows have same font size. How to decrease font size of rows which does not have any children ?
I tried to use Oleg great answer in How to make jqgrid treegrid first row text bold to use rowattr for this.
I havent found a way how to dedect in rowattr that row does not have children.
I current specific case all leafs are in third level. So in this case it is possible to decrease font size for whole third level. How to find treegrid nesting level in rowattr ?
Treegrid is defined as
var treegrid = $("#tree-grid");
treegrid.jqGrid({
url: '/Store/GridData',
datatype: "json",
mtype: "POST",
height: "auto",
loadui: "disable",
treeGridModel: "adjacency",
colModel: [
{ name: "id", width: 1, hidden: true, key: true },
{ name: "menu", classes: "treegrid-column", label: "Product tree" },
{ name: "url", width: 1, hidden: true }
],
gridview: true,
rowattr: function (rd) {
// todo: decrease font size for leaf rows.
if (rd.parent === "-1" ) {
return {"class": "no-parent"};
}
},
autowidth: true,
treeGrid: true,
ExpandColumn: "menu",
rowNum: 2000,
ExpandColClick: true,
onSelectRow: function (rowid) {
var treedata = treegrid.jqGrid('getRowData', rowid);
window.location = treedata.url;
}
}
);
I have never used treegrid, from the sample provided by Oleg it seems to be that in grid data there is an item isLeaf. I think you have to check for rd.isLeaf See the demo here the data used there is (first row)
{id: "1", name: "Cash", num: "100", debit: "400.00", credit: "250.00", balance: "150.00", enbl: "1", level: "0", parent: "null", isLeaf: false, expanded: true, loaded: true, icon: "ui-icon-carat-1-e,ui-icon-carat-1-s"},
I have been struggling with this all day. My requirement is very simple: I'm using single field searching. I want to save the state of the grid (using postData and a cookie) when I leave the page and restore it when I come back. I'm able to save the postData to a cookie, but can't figure out how to restore the grid state again.
$(document).ready(documentReady);
function documentReady()
{
$("#grid_clients").jqGrid({
datatype: "local",
height: 200,
width: 832,
shrinkToFit: true,
caption:"Clients",
colNames :["","Id","Name","Description","Active<br />Studies"],
colModel :[
{name:"edit", index:"edit", width:20, align:"center", sortable:false, search: false},
{name:"id", index:"id", width:40, align:"right", sorttype:'int'},
{name:"name", index:"name", width:200},
{name:"description", index:"description", width:200},
{name:"studycount", index:"studycount", width:50, align:"right", sorttype:'int'}
],
pager:"pager_clients",
scroll: 1,
viewrecords:true,
sortable:true,
sortname: "name",
autowidth: true,
pgbuttons: false,
loadonce: true,
gridview: true
});
$("#grid_clients").jqGrid("navGrid", "#pager_clients",{add:false, edit:false, del:false});
$('#grid_clients').jqGrid('setGridParam', {datatype: 'xml'});
var gridUrl = 'getgridxmlclients.php';
$('#grid_clients').jqGrid('setGridParam', {url: gridUrl});
// If the cookie exists, set the postData and search parameters.
if ($.cookies.get('gridPostData'))
{
alert(dump($.cookies.get('gridPostData')));
$('#grid_clients').jqGrid('setGridParam', {search: true, 'postData': $.cookies.get('gridPostData')});
}
$('#grid_clients').trigger('reloadGrid', [{page:1}]);
}
The alert for the cookie when coming back to the page looks like this:
'_search' => "true"
'nd' => "1313100751399"
'rows' => "20"
'page' => "1"
'sidx' => "id"
'sord' => "asc"
'searchField' => "studycount"
'searchString' => "1"
'searchOper' => "eq"
'filters' => ""
The interesting thing is that the parameters seem to have taken, because if I just click on a header to sort the grid, the filter takes affect then. I'm missing the method of forcing the filtering when reloading.
Thanks, --David
This is my 3rd question about JSON data for jqGrid's subgrid, till now I did not get a single comment. Please somebody help.
my 1st questionand the
2nd one
I am having trouble getting to know the json format to be used by a subgrid in jqGrid. In my 2nd question i asked about the format that I should be using for a particular scenario
for the given image
Is this the proper JSON String?
var myJSONObject = {
"list": [
{
"elementName": "TERM",
"attribute": [
{
"name": "information",
"firstValue": "Required fixes for AIX",
"secondValue": "Required fixes for AIX"
},
{
"name": "name",
"firstValue": "PHCO_34",
"secondValue": "PHCO_34"
},
{
"name": "version",
"firstValue": "1.0",
"secondValue": "2.0"
}
],
"isEqual": false,
"isPrasentinXml1": true,
"isPrasentinXml2": false
},
{
"elementName": "Asian-Core.ASX-JPN-MAN",
"attribute": [
{
"name": "information",
"firstValue": "Man",
"secondValue": "Man"
},
{
"name": "name",
"firstValue": "Asian-Core.ASX-JPN-MAN",
"secondValue": "Asian-Core.ASX-JPN-MAN"
},
{
"name": "version",
"firstValue": "B.11.23",
"secondValue": "B.11.23"
}
],
"isEqual": false,
"isPrasentinXml1": true,
"isPrasentinXml2": true
}
]
};
If yes, my 1st question this is where i reached so far
$('#compareContent').empty();
$('<div id="compareParentDiv" width="100%">')
.html('<table id="list2" cellspacing="0" cellpadding="0"></table>'+
'<div id="gridpager2"></div></div>')
.appendTo('#compareContent');
var grid = jQuery("#list2");
grid.jqGrid({
datastr : myJSONObject,
datatype: 'jsonstring',
colNames:['Name','Result1', 'Result2'],
colModel:[
{name:'elementName',index:'elementName', width:90},
{name:'isPrasentinXml1',index:'isPrasentinXml1', width:100},
{name:'isPrasentinXml2',index:'isPrasentinXml2', width:100},
],
pager : '#gridpager2',
rowNum:10,
scrollOffset:0,
height: 'auto',
autowidth:true,
viewrecords: true,
gridview: true,
jsonReader: { repeatitems : false, root:"list" },
subGrid: true,
/*subGridModel: [{
//subgrid columns names
name: ['Name', 'Version', 'Information'],
//subgrid columns widths
width: [200, 100, 100],
//subrig columns aligns
align: ['left', 'left', 'left']
}]*/
// define the icons in subgrid
subGridOptions: {
"plusicon" : "ui-icon-triangle-1-e",
"minusicon" : "ui-icon-triangle-1-s",
"openicon" : "ui-icon-arrowreturn-1-e",
//expand all rows on load
"expandOnLoad" : true
},
subGridRowExpanded: function(subgrid_id, row_id) {
var subgrid_table_id, pager_id;
subgrid_table_id = subgrid_id+"_t";
pager_id = "p_"+subgrid_table_id;
$("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>");
jQuery("#"+subgrid_table_id).jqGrid({
datastr : myJSONObject,
datatype: 'jsonstring',
colNames: ['Name','Value1','Value2'],
colModel: [
{name:"name",index:"name",width:90},
{name:"firstValue",index:"firstValue",width:100},
{name:"secondValue",index:"secondValue",width:100},
],
rowNum:20,
pager: pager_id,
sortname: 'name',
sortorder: "asc",
height: 'auto',
autowidth:true,
jsonReader: { repeatitems : false, root:"attribute" }
});
jQuery("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:false,add:false,del:false})
}
});
grid.jqGrid('navGrid','#gridpager2',{add:false,edit:false,del:false});
Any type of suggestions/comments/solutions are welcome. Thanks
My output
You code has small errors in the declaration of the myJSONObject variable and the code which create the contain of the div#compareContent should be fixed to
$('#compareContent').empty();
$('<div id="compareParentDiv" width="100%">'+
'<table id="list2" cellspacing="0" cellpadding="0"></table>'+
'<div id="gridpager2"></div></div>')
.appendTo('#compareContent');
Small other syntax errors are the trailing commas in the colModel: the comma before ']' should be removed.
Now to your main problem. You should change datastr : myJSONObject in the subgrid to something like
datastr : myJSONObject.list[0]
then the modified demo will show the data: see here.
One more problem which you has is the absent of ids in your data. You should modify the structure of the data to define the unique ids for very grid row and every subgrid row. You should take in the considerations that ids from the data will be used as id of <tr> elements and HTML don't permit to have id duplicates on one HTML page.
UPDATED: See here an example of modification of your JSON input and the jqGrid so that ids will be used.
a couple of suggestion that may/maynot workout
when using subgrid select the grid as
var mygrid = jQuery("#mygrid")[0];
replace
var grid = jQuery("#list2");
with
var grid = jQuery("#list2")[0];
Ref: http://www.trirand.com/blog/?page_id=393/help/2-questions-about-jqgrid-subgrid-and-jsonstring
also change your json to a valid json
{
"list": [
{
"elementName": "TERM",
"attribute": [
{
"name": "information",
"firstValue": "RequiredfixesforAIX",
"secondValue": "RequiredfixesforAIX"
},
{
"name": "name",
"firstValue": "PHCO_34",
"secondValue": "PHCO_34"
},
{
"name": "version",
"firstValue": "1.0",
"secondValue": "2.0"
}
],
"isEqual": false,
"isPrasentinXml1": true,
"isPrasentinXml2": false
}
]
}
verfified by www.jsonlint.com
you may find the following link useful
jqGrid with JSON data renders table as empty
I've got some code that, when switching which row is selected, it triggers a save of the previously selected row.
The row is being successfully saved without any problem, however the successfunc isn't being called at all - my console.log output never shows up, and the code in this function isn't being run. I also tried specifying the function as the aftersavefunc, but couldn't get that to work either.
Seems like a simple syntax problem, but I can't quite get it right. Am I not specifying this function properly?
As a side note, I realize that reloading the entire grid after a row save seems like overkill, but in the context of where this particular piece of code is, within the larger structure of my app, this snippet of code is a special case.
The full jqGrid code is:
var lastSelectedMainGridRowID = 0;
var lastSelectedSubGridRowID = 0;
var translationsFeed = "/update/translations/ajax/translations_feed.php";
var translationsEdit = "/update/translations/ajax/translations_edit.php";
var translationsSubGridFeed = "ajax/translations_subgrid_feed.php";
var translationsSubGridFeedEdit = "ajax/translations_subgrid_feed_edit.php";
$(document).ready(function () {
$("#translationsList").jqGrid({
caption : "Translations",
datatype : "xml",
url : translationsFeed,
editurl : translationsEdit,
mtype : "get",
pager : "#translationsPager",
rowNum : 20,
autowidth : true,
sortname : "phrase",
sortorder : "asc",
viewrecords : true,
multiselect : false,
hidegrid : false,
height : 300,
altRows : true,
rownumbers : true,
toolbar : [false],
loadComplete: function(data) {
jQuery("#translationsList").setSelection (0, true);
},
colNames : ["phrase_id", "translation_id", "language_cd", "Phrase", "Translation", "Modified", "Created", "Active"],
colModel : [
{ name : "phrase_id", index : "phrase_id", sortable : true, search : false, editable: true, edittype : "text", editrules: { edithidden: true }, hidden: true},
{ name : "translation_id", index : "translation_id", sortable : false, search : false, editable: true, edittype : "text", editrules: { edithidden: true }, hidden: true},
{ name : "language_cd", index : "language_cd", sortable : true, search : true, editable: true, edittype : "text", editrules: { edithidden: true, required : true }, hidden: true },
{ name : "Phrase", width:200, index : "phrase", sortable : true, search : true, editable: true, edittype : "text", editrules: { required: true } },
{ name : "Translation", width:200, index : "translation", sortable : true, search : true, editable: true, edittype : "text", editrules: { required: false } },
{ name : "Modified", width:100, index : "modify_dt", sortable : true, search : true },
{ name : "Created", width:100, index : "create_dt", sortable : true, search : true },
{ name : "Active", width:20, index : "active", sortable : true, search : true, editable: true, edittype: "checkbox", editoptions: {value:"Yes:No", checked: true} }
],
onSelectRow: function(id) {
jQuery('#translationsList').jqGrid('saveRow', lastSelectedMainGridRowID);
jQuery('#translationsList').jqGrid('editRow', id, true);
lastSelectedMainGridRowID = id;
},
subGrid: true,
subGridRowExpanded: function(subgrid_id, row_id) {
var subgrid_table_id;
jQuery("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table>");
jQuery("#"+subgrid_table_id).jqGrid({
url: translationsSubGridFeed + "?phrase_id=" + row_id,
editurl: translationsSubGridFeedEdit,
datatype: "xml",
colNames: ['phrase_id', 'translation_id', 'language_cd', 'Translations', 'Language', 'Active'],
colModel: [
{name:"phrase_id", index:"phrase_id", sortable: false, editable: true, edittype : "text", editrules: { edithidden :true }, hidden: true},
{name:"translation_id", index:"translation_id", sortable: false, editable: true, edittype : "text", editrules: { edithidden :true }, hidden: true},
{name:"language_cd", index:"language_cd", sortable: false, editable: true, edittype : "text", editrules: { edithidden :true }, hidden: true},
{name:"Translation", index:"translation", sortable: true, editable: true, edittype:"text", width:589},
{name:"Language", index:"language_disp", sortable: true, editable: false, width:250},
{name:"Active", index:"active", sortable: true, editable: true, edittype:"checkbox", editoptions:{value:"Yes:No", checked: true}, width:80}
],
height: "100%",
rowNum:20,
sortname: 'language_cd',
sortorder: "asc",
onSelectRow: function(id) {
jQuery("#"+subgrid_table_id).jqGrid('saveRow', lastSelectedSubGridRowID, function(response) {
console.log("Data: " + response.responseText);
return false;
});
jQuery("#"+subgrid_table_id).jqGrid('editRow', id, true);
lastSelectedSubGridRowID = id;
}
});
}
});
Perhaps I don't need to use saveRow. In this case, what I'm doing is:
When you click on a row, it becomes editable
If you then click on a second row, the first row is saved (and no longer selected), and the new second row then becomes editable. Similar to saving a row "onBlur", so to speak.
I don't see the place of code where responseData variable are defined. The code responseData[0] should throw an exception, so the console.log("Data: " + responseData[0]); will not display any data. The line of code should be probably fixed as
console.log("Server response: " + result.responseText);
UPDATED: Without having the data for the both grid and for example the subgrid corresponds the first row one can't debug the code. Reading is not so effective. If you posted the test data (two XML files) I could try to localize the problem.
An important error is that you only declare subgrid_table_id variable, but not assign a value for it. Typically one construct an unique id name subgrid_table_id based on the subgrid_id. For example
var subgrid_table_id = subgrid_id+"_t";
instead of var subgrid_table_id; only.
Nevertheless some things I find a little suspected:
I don't understand why you return return false; from the successfunc. It means that you interpret the server response as an error and the normal actions on successful server response should be interrupted. I would recommend you additionally use errorfunc parameter of saveRow. In my server code the server always return error HTML status code in case of the server error. So I never need use successfunc and use aftersavefunc and errorfunc only.
The subgrid has many column which already exist in the corresponding row of the parent grid. The potential problems here are not only spending of additional memory. You don't posted the grid data and so I don't know what values you use as rowids for grids. It is very important to have no id duplicates on the HTML page. So you should be careful in the subject. Why you need ? Probably you can just use extraparam parameter of saveRow and editRow instead of the usage of phrase_id, translation_id and language_cd hidden columns having editable: true, editrules: { edithidden :true }, hidden: true properties?
My problem now is trying to send the ID (editable: false) of a row when editing that row.
For example, i have a grid with columns userid(editable: false), username(editable: true), firstname(editable: true), lastname(editable: true). When editing the row the grid is only sending the parameters username, firstname and lastname. In the server side i need the userid to know to which user i've tu apply those new values.
the editUrl looks like:
editurl : CONTEXT_PATH+'/ajax/admin/savePart.do?category=1',
Thanks
This is the full code:
$.jgrid.useJSON = true;
//http://www.trirand.com/jqgridwiki/doku.php?id=wiki%3Acommon_rules
$(document).ready(function() {
//alert(CONTEXT_PATH);
var lastsel;
jQuery("#rowed3").jqGrid(
{
url : CONTEXT_PATH+'/ajax/getPartesByCategory.do?catid=<s:property value="categoryId" />',
//url : '/autoWEB/text.html',
datatype: "json",
ajaxGridOptions: { contentType: "application/json" },
jsonReader : {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false
},
headertitles: true,
colNames : [ 'ID', 'Pieza', 'Disponible'],
colModel : [ {
name : 'piezaId',
index : 'piezaId',
align : "right",
width : 50,
editable : false,
required : true
}, {
name : 'descripcion',
index : 'descripcion',
width : 390,
editable : true,
required : true
}, {
name : 'disponible',
index : 'disponible',
width : 80,
editable : true,
edittype : 'select',
editoptions:{value:"0:No;1:Si"},
required : true
} ],
rowNum : 20,
rowList : [ 20, 40, 60, 80 ],
pager : '#prowed3',
sortname : 'piezaId',
postData: {piezaId : lastsel},
mtype:"POST",
viewrecords : true,
sortorder : "desc",
onSelectRow : function(id) {
if (id && id !== lastsel) {
jQuery('#rowed3').jqGrid('restoreRow', lastsel);
jQuery('#rowed3').jqGrid('editRow', id, true);
lastsel = id;
}
},
editurl : CONTEXT_PATH+'/ajax/admin/savePieza.do?categoria=<s:property value="categoryId" />',
caption : "Piezas"
});
jQuery("#rowed3").jqGrid('navGrid', "#prowed3", {
edit : false,
add : false,
del : false
});
})
in your onSelectRow callback, you can modify the editUrl to be whatever you want, including passing in the ID you need.
$("#rowed3").jqGrid('setGridParam', {editurl:'whatever/url/you/need/with/the/id'});
jqGrid will add all the other nececessary params to that editurl for you.
You can use
hidden: true, editable: true, editrules: { edithidden: false }, hidedlg: true
in the definition of the piezaId (ID) column. The parameter hidedlg is currently not real needed, but can be useful if you decide the use other jqGrid features.
Passing values in the GET string worked for me.
editurl: '/ajax/update?line=1',