Related
I have the jqgrid configuration below that is supposed to supposed to show a Tree like structure. Instead I am getting a flat list structure displayed. Can somebody please tell me what I am missing?
Here are the versions I am using in the order listed in the html page:
jquery/3.2.1/jquery.min.js,
jqgrid/4.6.0/js/i18n/grid.locale-en.js,
jqueryui/1.12.1/jquery-ui.min.js
From triand.com site:
jqgrid/js/i18n/grid.locale-en.js
jqgrid/js/jquery.jqGrid.min.js
I am also using these CSS:
jqueryui/1.8.14/themes/redmond/jquery-ui.css,
jqgrid/themes/ui.jqgrid.css (from triand.com),
jqueryui/1.12.1/themes/smoothness/jquery-ui.css
in that order. My grid looks gray as opposed to the nice blue. I can't figure why.
$(document).ready(function(){
$("#list").jqGrid({
url : "/reconcile",
datatype : "json",
mtype : 'GET',
colModel : [
{name: "id",width:1,hidden:true, key:true},
{name : 'data.key.busnDate', label : 'Business Date', hidden:false, sorttype:"date", width : 80 },
{name : 'data.product', label : 'Product', sorttype:"string", width : 50, editable : false},
{name : 'data.quantityBought', label : 'Quantity Bought', sorttype:"int", width : 100, editable : false},
{"name":"level","hidden":true},
{"name":"parent","hidden":true},
{"name":"isLeaf","hidden":true},
{"name":"expanded","hidden":true},
{"name":"uiicon","hidden":true}
],
treeGrid: true,
pager : '#pager',
loadonce:false,
rowNum : 25,
height: 'auto',
rowList : [ 25,50,100,200 ],
sortname : 'key.positionId',
sortorder : 'asc',
viewrecords : true,
gridview : true,
multiselect: false,
multiboxonly: false,
autoencode: true,
caption : 'ARC Reconciliation',
emptyrecords: "No records to found for given date!",
jsonReader : {
repeatitems : true,
},
treeIcons : {
"plus": "ui-icon-circlesmall-plus",
"minus": "ui-icon-circlesmall-minus",
"leaf" : "ui-icon-document"
},
ExpandColumn: 'key.positionId'
});
jQuery("#list").jqGrid('navGrid', '#pager', {
edit : false,
add : false,
del : false,
view : true,
search : true
});
$('#datePick').datepicker({
onSelect: function (dateText, inst) {
var e = $("#list").data("events");
if (typeof (e) !== "undefined" && typeof (e.reloadGrid) !== "undefined") {
$("#list").trigger("reloadGrid");
}
}
});
});
Thanks
You can look at our new Guriddo jqGrid documentation here in order to get answer of your problem.
Additionally to this you may want to visit or tree grid demo here with a lot of new features
I have a grid that has a datepicker with a button and a checkbox to reload the grid when the date changes. The datepicker is initialized to today's. This works fine. However I can't figure how to override the default url in the grid. Whenever the grid which is a tree is loaded it reads the default from the url configuration. Only when I click the button then it reloads the treee with the selected date. Even worst when I click in the icons in the tree to expand the child elements it overrides the date and all the loaded data with the value of the default URL. Can somebody tell me how to set the url properly? Also I don't understand why clicking in the elements reloads the tree since I have property loadonce=true.
thanks
$(document).ready(function(){
$("#list").jqGrid({
url : "/reconcile?unMatchedOnly=true",
datatype : "json",
mtype : 'GET',
colModel : [
{name : "data.key.busnDate", label : "Business Date", hidden:false, sorttype:"date", width : 100 },
{name : "data.product", label : "Product", sorttype:"string", width : 50, editable : false},
{name : "data.quantityBought", label : "Quantity Bought", sorttype:"int", width : 100, editable : false},
{name : "matches", label : "match", "edittype":"checkbox","formatter":"checkbox", width : 25, editable : false}
],
cmTemplate: { width: 70 },
treeGrid: true,
pager : '#pager',
treeGridModel: "adjacency",
ExpandColumn: "data.key.busnDate",
rowNum : 25,
height: 'auto',
rowList : [ 25,50,100,200 ],
loadonce:true,
});
jQuery("#list").jqGrid('navGrid', '#pager', {
edit : false,
add : false,
del : false,
view : true,
search : true
});
$('#datePick').datepicker({
onSelect: function (dateText, inst) {
var e = $("#list").data("events");
if (typeof (e) !== "undefined" && typeof (e.reloadGrid) !== "undefined") {
$("#list").trigger("reloadGrid");
}
}
}
);
$("#datePick").datepicker('setDate', new Date());
jQuery("#list").setGridParam({url:'/reconcile?datePick=' + $("#datePick").val() + '&unMatchedOnly=' + $("#unMatchedOnly").val(),page:1});
var url = '/reconcile?datePick=' + $("#datePick").val() + '&unMatchedOnly=' + $("#unMatchedOnly").val();
$("#list").jqGrid('setGridParam', { url: url });
});
$('#showSelected').on('click', function () {
var url = '/reconcile?datePick=' + $("#datePick").val() + '&unMatchedOnly=' + $("#unMatchedOnly").val();
$("#list").jqGrid('setGridParam', { url: url });
$("#list").trigger("reloadGrid");
});
I can't reproduce the problem, which you reports. If you want to load the data of TreeGrid at once then you don't need to use loadonce: true option. Instead of that the items of data should contains the property "loaded":true.
If you need to send some additional parameter to the server then you should use postData parameter with properties defined as functions (see the old answer). You can just use
url: "/reconcile",
postData: {
datePick: function () { return $("#datePick").val(); },
unMatchedOnly: function () { return $("#unMatchedOnly").val(); }
}
As the result the current data from #datePick and #unMatchedOnly will be sent to the server on every loading of the grid. To reload the TreeGrid you will need just use $("#list").trigger("reloadGrid");.
If you do loads the data of the grid on demand then expanding of nodes adds nodeid, n_level and parentid parameters to postData and the value of treeANode parameter will be changed from -1 to the rowid of expanding node. To reset the parameters before reloading you will need to reset treeANode parameter to -1.
I don't know the format of the data, which returns url: "/reconcile", but I suppose that you can use the following code
$(document).ready(function(){
var $grid = $("#list"),
fullReloadOfTreeGrid = function () {
var p = $grid.jqGrid("getGridParam"); // get reference to parameters
p.treeANode = -1; // be sure that we reload full grid
$grid.trigger("reloadGrid");
};
$('#datePick').datepicker({
onSelect: function (dateText, inst) {
fullReloadOfTreeGrid();
}
});
$("#datePick").datepicker('setDate', new Date());
$grid.jqGrid({
url: "/reconcile?unMatchedOnly=true",
datatype: "json",
postData: {
datePick: function () { return $("#datePick").val(); },
unMatchedOnly: function () { return $("#unMatchedOnly").val(); }
},
colModel: [
{name: "data.key.busnDate", label: "Business Date",
sorttype:"date", width : 100 },
{name: "data.product", label: "Product", width: 50},
{name: "data.quantityBought", label: "Quantity Bought",
sorttype:"int", width: 100},
{name: "matches", label: "match",
"template: "booleanCheckbox", width : 25}
],
cmTemplate: { width: 70 },
treeGrid: true,
pager: true,
treeGridModel: "adjacency",
ExpandColumn: "data.key.busnDate"
}).jqGrid('navGrid', {
edit : false,
add : false,
del : false,
view : true
});
$('#showSelected').on('click', function () {
fullReloadOfTreeGrid();
});
});
As I wrote before, resetting of treeANode to -1 will be not required if you really correctly loads all the nodes at once (with loaded:true property in all nodes).
I have a jqgrid with an id that is a db sequence and thus the user doesn't need to see it. When the column is marked as 'hidden : true' the inlinenav edit is not clickable and the save won't save. It works fine when I comment that out.
$("#grid_d").jqGrid(
{
url : "${pageContext.request.contextPath}/testjson?id=0",
datatype : "json",
colNames : [ "id", "analyte","units" ],
colModel : [ {
name: 'id',
index: 'id',
hidden : true,
editable : true
}, {
name : 'analyte',
index : 'analyte',
editable : true
}, {
name : 'unit',
index : 'unit',
editable : true
} ],
sortname : 'id',
pager : '#pager_d',
viewrecords : true,
editurl : "${pageContext.request.contextPath}/editjson"
});
$("#grid_d").jqGrid('navGrid', "#pager_d", {
edit : false,
add : false,
del : true
}, {}, // edit options.
{}, // add options.
{
reloadAfterSubmit : false,
afterSubmit : deleteMessage,
msg: "Delete selected analyte(s)"
}, // del options.
{}, // search options.
{} // view options.
);
$("#grid_d").jqGrid('inlineNav',"#pager_d");
var pid = $('#byId').val();
jQuery("#patient").jqGrid({
mtype: 'GET',
url : "totalPatientList.html",
postData :{pid:pid},
datatype : "json",
colNames : [ 'Patient Id', 'Name', 'BirthDate', 'Address','City','Mobile' ],
colModel : [ {
name : 'patientId',
index : 'patientId',
width : 55
}, {
name : 'name',
index : 'name',
width : 200
}, {
name : 'birthdate',
index : 'birthdate',
width : 100,
editable : true
}, {
name : 'address',
index : 'address',
editable : true,
width : 80
}, {
name : 'city',
index : 'city',
editable : true,
width : 80
}, {
name : 'mobile',
index : 'mobile',
editable : true,
width : 80
} ],
rowNum : 10,
rowList : [ 5, 10, 30 ],
pager : '#pager',
sortname : 'id',
viewrecords : true,
sortorder : "desc",
caption : "Search Patient's List",
width : 800,
cellEdit : true,
});
I have a code like above.
I want to send pid from this JSP page to controller.I am getting pid , but when I reload my web page. I want it without reloading the page when i click the button.
How can I do that?
plz plz help me....
You should use the "function" style of postData:
url: "totalPatientList.html",
postData: {
pid: function () {
return $('#byId').val();
}
}
In the case the value for the pid parameter will be new evaluated on every request to the server. See the answer for more details. In the way you can send multiple parameters to the server by including multiple methods in postData object.
I am using the Basic Grid example from jqGrid Demos:
jQuery("#rowed1").jqGrid(
{
url : 'clientArray',
datatype : "local",
colNames : [ 'Inv No', 'Date', 'Client', 'Amount', 'Tax',
'Total', 'Notes' ],
colModel : [ {
name : 'id',
index : 'id',
width : 55,
editable : true,
key: true
}, {
name : 'invdate',
index : 'invdate',
width : 90,
editable : true
}, {
name : 'name',
index : 'name',
width : 100,
editable : true
}, {
name : 'amount',
index : 'amount',
width : 80,
align : "right",
editable : true
}, {
name : 'tax',
index : 'tax',
width : 80,
align : "right",
editable : true
}, {
name : 'total',
index : 'total',
width : 80,
align : "right",
editable : true
}, {
name : 'note',
index : 'note',
width : 150,
sortable : false,
editable : true
} ],
rowNum : 10,
rowList : [ 10, 20, 30 ],
pager : '#prowed1',
sortname : 'id',
viewrecords : true,
sortorder : "desc",
editurl : "clientArray",
caption : "Basic Example"
});
jQuery("#rowed1").jqGrid('navGrid', "#prowed1", {
edit : false,
add : false,
del : false
});
The following events to handle the user clicks on edit, save, and cancel buttons:
jQuery("#ed1").click(function() {
var id = jQuery('#rowed1').jqGrid('getGridParam','selrow');
jQuery("#rowed1").jqGrid('editRow', id);
this.disabled = 'true';
jQuery("#sved1,#cned1").attr("disabled", false);
});
jQuery("#sved1").click(function() {
var rowid = jQuery('#rowed1').jqGrid('getGridParam','selrow');
alert('id: ' + rowid);
jQuery("#rowed1").jqGrid('saveRow', rowid , false );
jQuery("#sved1,#cned1").attr("disabled", true);
jQuery("#ed1").attr("disabled", false);
jQuery("#aded1").attr("disabled", false);
});
jQuery("#cned1").click(function() {
var id = jQuery('#rowed1').jqGrid('getGridParam','selrow');
jQuery("#rowed1").jqGrid('restoreRow', id);
jQuery("#sved1,#cned1").attr("disabled", true);
jQuery("#ed1").attr("disabled", false);
jQuery("#aded1").attr("disabled", false);
});
jQuery("#aded1").click(function() {
jQuery("#rowed1").jqGrid('addRow', 'new');
this.disabled = 'true';
jQuery("#sved1,#cned1").attr("disabled", false);
});
And the html of the buttons:
<input type="BUTTON" id="aded1" value="Add Row" />
<input type="BUTTON" id="ed1" value="Edit row 3" />
<input type="BUTTON" id="sved1" disabled='true' value="Save row 3" />
<input type="BUTTON" id="cned1" disabled='true' value="Cancel Save" />
But the grid is not working properly because:
After saving a new row it keeps selected and I can't select others.
When I cancel the editing of a row, it deletes a few other rows.
When I click for second time
the add new row button, google chrome debugger console displays the error: Uncaught TypeError: Cannot read property 'name' of undefined
I am almost sure that it has something to do with the new row id, but after 2 days of trying I would appreciate a little help, thanks in advance
You are passing the wrong parameters to addRow. From the jqGrid documentation for addRow:
Calling convention:
jQuery("#grid_id").jqGrid('addRow',parameters);
where parameters is a object and has the following default values:
parameters =
{
rowID : "new_row",
initdata : {},
position :"first",
useDefValues : false,
useFormatter : false,
addRowParams : {extraparam:{}}
}
Also, you will want to set rowID equal to a new value each time. You can either do this explicitly or you can set it to undefined to let jqGrid assign a random ID to each new row.
For example:
jQuery("#aded1").click(function() {
var parameters = {
rowid : undefined,
initdata : {},
position :"first",
useDefValues : false,
useFormatter : false,
addRowParams : {extraparam:{}}
};
jQuery("#rowed1").jqGrid('addRow', parameters);
});