JqGrid Basic Grid example error when saving a new row - jqgrid

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);
});

Related

jqgrid - columns mis-align with setGroupHeaders

I have an issue when my columns aren't aligned with the header only when I use setGroupHeaders. As seen in my code, I am setting the column width (as suggested in other posts). I am also using the latest version of jqgrid (just downloaded it today to see if it solves this issue).
My JS:
var jqadminagrid_data = [{}];
var wwidth = $(window).width()*.90;
var fifteen=wwidth*.06;
var onehundred=wwidth*.16;
var seventy=wwidth*.11;
var sixty=wwidth*.09;
var onetwenty=wwidth*.18;
var fiftyfive=wwidth*.08;
var eightyfive=wwidth*.13;
jQuery("#jqadminagrid").jqGrid({
url: "createadminaxml.cfm",
datatype : "xml",
height : 'auto',
colNames : ['CTR Title', 'CTR Name', '', '', 'Status Date', 'End User', 'Signed By', 'Total Cost'],
//colNames : ['CTR Title', 'CTR Name', '', 'Status Date', 'End User', 'Signed By', 'Total Cost'],
colModel : [{
name : 'title',
index : 'title',
width: onehundred
}, {
name : 'ctrname',
index : 'ctrname',
width: sixty
}, {
name : 'status',
index : 'status',
width: onehundred
},{
name : 'statusbutton',
index : 'statusbutton',
width: fiftyfive
}, {
name : 'date',
index : 'date',
width: fiftyfive
}, {
name : 'euname',
index : 'euname',
sortable: true,
width: eightyfive
}, {
name : 'signed',
index : 'signed',
width: seventy
}, {
name : 'total',
index : 'total',
width: fiftyfive
}],
rowNum : 15,
rowList : [15, 30, 45],
pager : '#pjqadminagrid',
sortname : 'ctrname',
toolbarfilter : true,
viewrecords : true,
sortorder : "asc",
autowidth : true,
});
jQuery("#jqadminagrid").jqGrid('setGroupHeaders', {
useColSpanStyle: false,
groupHeaders:[{startColumnName: 'status', numberOfColumns: 2, titleText: '<center><b>Status</b></center>'}]
});
jQuery("#jqadminagrid").navGrid("#pjqadminagrid", {
edit: false, add: false, del: false, search: false, refresh: false
});
$(window).on("resize", function () {
var newWidth = $("#jqadminagrid").closest(".ui-jqgrid").parent().width()*.95;
jQuery("#jqadminagrid").jqGrid("setGridWidth", newWidth, true);
})
Grid with no grouping
Grid with grouping
Any assistance is greatly appreciated.
Can you please, try with some other "standard" UI Theme?
We have the same demo and it is working fine. The only difference is the Theme and and the data.
If possible can you please prepare a online demo - I think the problem is either in the Theme or in the data and the way it is inserted in the Guriddo jqGrid

jqgrid tree not showing like a list instead of a tree

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

jqgrid overriding the default URL in a Tree

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).

Fetching kendo grid row data on selecting checkbox

I am trying to fetch kendo data on selecting particular row using checkbox.
This is part of code of controller.js
$scope.campaignLabelOptions = {
dataSource: {
data: [] ,
},
sortable: true,
pageable : {pageSizes : [5, 10, 25, 50]},
filterable : true,
resizable :true,
reordable :true,
scrollable:true,
columnMenu: true,
selectable :true,
editable: {
confirmation: "Are you sure that you want to delete this record?",
mode: "popup"
},
columns : [
{template: "<input type='checkbox' class='checkbox' ng-click='onClick($event)'/>" },
{field : "campaign_name", title :"Campaign Name", width : "150px", attributes: {style: "font-size: 12px"}},
// {field : "time_line", title :"Timeline", width : "100px",attributes: {style: "font-size: 12px"} },
{field : "spend", title :"Spend", width : "90px",attributes: {style: "font-size: 12px"} },
{field : "campaign_group_status", title :"Status", width : "85px", attributes: {style: "font-size: 12px"}},
{field : "performance", title :"Performance", width : "130px", attributes: {style: "font-size: 12px"}},
// {field : "creation_time", title :"Created Time", width : "135px", attributes: {style: "font-size: 12px"}},
],
};
$scope.checkedIds = [];
$scope.showCheckboxes = function(){
var checked = [];
for(var i in $scope.checkedIds){
if($scope.checkedIds[i]){
checked.push(i);
}
}
alert(checked);
};
$scope.onClick = function(e){
console.log(e);
var element =$(e.currentTarget);
var checked = element.is(':checked');
var row = element.closest("tr");
var grid = element.closest('kendoGrid').getKendoGrid();
var dataItem = grid.dataItem(row);
$scope.checkedIds[dataItem.EmployeeID] = checked;
if (checked) {
row.addClass("k-state-selected");
} else {
row.removeClass("k-state-selected");
}
};
I have copied similar code from http://dojo.telerik.com/exAB/5 for select logic . But here grid variable is coming undefined. Its not getting getKendoGrid() method..
Is there any better way to get row data? If yes what and if not -- how to use this current code?

How to send data from jsp page to controller using jqgrid in spring

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.

Resources