I have following jqGrid. The 'ActiveStatusText' column is populated using IsActive column value of rowObject, using a formatter.
{
name: 'ActiveStatusText',
width: 100,
formatter: function (cellvalue, options, rowObject) {
return rowObject.IsActive == true ? 'Active' : 'Retired';
}
}
When button is clicked, the status display text (“'ActiveStatusText'” ) need to be updated.
When “Retire” button click complete, the status display should become “Retired” and the button text should be “Activate”. This works fine.
When “Activate” button click complete, the status display should become “Active” and the button text should be “Retire”. The status column does not get updated.
Why is the text change happen only first time? How to fix this?
Fiddle
$(document).ready(function () {
function updateActiveStatus(rowid, isToActive) {
alert(isToActive);
$("#list").jqGrid('setCell', rowid, 'IsActive', isToActive);
$("#list").jqGrid('getLocalRow', rowid).IsActive = isToActive;
//Set display text
$("#list").jqGrid('setCell', rowid, 'ActiveStatusText', isToActive);
}
var myData = [
{ "id": "35", "firstname": null, "codeval": "G", "note": "xx7866", "amount": "23", "IsActive": true },
{ "id": "73", "firstname": null, "codeval": "W", "note": "dd1047", "amount": "34", "IsActive": true },
{ "id": "75", "firstname": "LORA", "codeval": "H", "note": "rr7323", "amount": "56", "IsActive": true },
{ "id": "95", "firstname": "EST", "codeval": "M", "note": "gg574", "amount": "55", "IsActive": false }
],
myGrid = $("#list");
myGrid.jqGrid({
datatype:'local',
data: myData,
colNames: ['ID', 'Note','Status', 'Action'],
colModel:[
{name:'id',width:70,align:'center',sorttype: 'int'},
{name:'note',index:'note',width:100,sortable:false},
{
name: 'ActiveStatusText',
width: 100,
formatter: function (cellvalue, options, rowObject) {
return rowObject.IsActive == true ? 'Active' : 'Retired';
}
},
{
name: 'IsActive',
width: 100,
formatter: function (cellvalue, options, rowObject) {
if (cellvalue == true) {
return '<div><button class="ui-button ui-widget ui-state-default app-custom-button-retire" >' +
'Retire' +'</button></div>';
}
else {
return '<div><button class="ui-button ui-widget ui-state-default app-custom-button-activate" >' +
'Activate' +
'</button></div>';
}
}
}
],
rowNum:10,
pager: '#pager',
gridview:true,
ignoreCase:true,
rownumbers:true,
viewrecords: true,
sortorder: 'desc',
height: '100%',
beforeSelectRow: function (rowid, e) {
var $self = $(this),
$td = $(e.target).closest("tr.jqgrow>td"),
rowid = $td.parent().attr("id"),
rowData = $self.jqGrid("getRowData", rowid),
iCol = $td.length > 0 ? $td[0].cellIndex : -1,
colModel = $self.jqGrid("getGridParam", "colModel");
celValue = $self.jqGrid('getCell', rowid, 'FirstName');
if (iCol >= 0 && colModel[iCol].name === "IsActive") {
if ($(e.target).hasClass("app-custom-button-retire")) {
updateActiveStatus(rowid,false);
return false;
}
if ($(e.target).hasClass("app-custom-button-activate")) {
updateActiveStatus(rowid, true);
return false;
}
}
//Avoid selection of row
return false;
}
});
});
HTML
<body>
<table id="list"><tr><td/></tr></table>
<div id="pager"></div>
</body>
I wrote you in the answer on your previous question, that jqGrid 4.6 is old (3 years old) and it contains many bugs, which are fixed later. I recommend you to upgrade jqGrid to the latest version of free jqGrid (it's 4.13.6 today). You code will start working.
In any way you can easy verify that the formatter will do called by setCell, but with the wrong parameter rowObject. jqGrid 4.6 uses DOM element of <tr> instead of real rowObject (see the line of code, where ind is assigned here). rowObject.IsActive will be undefined and the formatter of ActiveStatusText will return always 'Retired'.
Only if you really can't migrate to free jqGrid, then you can use the following workaround:
{
name: 'ActiveStatusText',
width: 100,
formatter: function (cellvalue, options, rowObject) {
var isActive = rowObject.IsActive;
if (isActive === undefined) {
// be called by setCell from buggy version of jqGrid
isActive = $(this).jqGrid('getLocalRow', options.rowId).IsActive;
}
return isActive == true ? 'Active' : 'Retired';
}
}
See the modified demo https://jsfiddle.net/OlegKi/fp7mL659/2/, which uses the code. By the way I wrote you in the answer on your previous answer, that setCell changes the local data too. Thus the call $("#list").jqGrid('getLocalRow', rowid).IsActive = isToActive; after $("#list").jqGrid('setCell', rowid, 'IsActive', isToActive); is absolutely unneeded.
Related
Currently free-jqgrid has feature that supports multiselect toolbar, same feature i want to create in jqgrid also.
http://www.ok-soft-gmbh.com/jqGrid/OK/MultiselectIn.htm
More recent code of usage multiselect with free jqGrid can be seen on the demo https://jsfiddle.net/OlegKi/ty4e68pm/16/. The most important parts of the demo I include below:
var dataInitMultiselect = function (elem, searchOptions) {
var $grid = $(this);
setTimeout(function() {
var $elem = $(elem),
id = elem.id,
inToolbar = searchOptions.mode === "filter",
options = {
selectedList: 2,
height: "auto",
checkAllText: "all",
uncheckAllText: "no",
noneSelectedText: "Any",
open: function() {
var $menu = $(".ui-multiselect-menu:visible");
$menu.width("auto");
$menu.css({
width: "auto",
height: "auto"
});
$menu.children("ul").css({
maxHeight: "300px",
overflow: "auto"
});
}
},
$options = $elem.find("option");
if ($options.length > 0 && $options[0].selected) {
$options[0].selected = false; // unselect the first selected option
}
if (inToolbar) {
options.minWidth = "auto";
}
$grid.triggerHandler("jqGridRefreshFilterValues");
$elem.multiselect(options);
// replace icons ui-icon-check, ui-icon-closethick, ui-icon-circle-close
// and ui-icon-triangle-1-s to font awesome icons
var $header = $elem.data("echMultiselect").header;
$header.find("span.ui-icon.ui-icon-check")
.removeClass("ui-icon ui-icon-check")
.addClass("fa fa-fw fa-check");
$header.find("span.ui-icon.ui-icon-closethick")
.removeClass("ui-icon ui-icon-closethick")
.addClass("fa fa-fw fa-times");
$header.find("span.ui-icon.ui-icon-circle-close")
.removeClass("ui-icon ui-icon-circle-close")
.addClass("fa fa-times-circle");
$elem.data("echMultiselect")
.button
.find("span.ui-icon.ui-icon-triangle-1-s")
.removeClass("ui-icon ui-icon-triangle-1-s")
.addClass("fa fa-caret-down")
.css({
float: "right",
marginRight: "5px"
});
}, 50);
},
multiselectTemplate = {
stype: "select",
searchoptions: {
generateValue: true,
//noFilterText: "Any",
sopt: ["in"],
attr: {
multiple: "multiple",
size: 3
},
dataInit: dataInitMultiselect
}
};
declares multiselectTemplate template. The next code fragment uses the template in colModel
colModel: [
...
{
name: "ship_via", width: 85, align: "center",
template: multiselectTemplate
},
...
],
Finally loadComplete include the code, which create filter toolbar after the data are loaded from the server:
loadComplete: function () {
if (!this.ftoolbar) {
// create filter toolbar if it isn't exist
$(this).jqGrid("filterToolbar", {
defaultSearch: "cn",
beforeClear: function() {
$(this.grid.hDiv)
.find(".ui-search-toolbar button.ui-multiselect")
.each(function() {
$(this).prev("select[multiple]").multiselect("refresh");
});
}
});
$(this).triggerHandler("jqGridRefreshFilterValues");
$(this.grid.hDiv)
.find(".ui-search-toolbar button.ui-multiselect")
.each(function() {
$(this).prev("select[multiple]")
.multiselect("refresh");
});
}
},
If required one can reload the data in filter toolbar by destroying it by destroyFilterToolbar method and executing the same code fragment which create it once more (I mean above code inside of loadComplete).
Using jqgrid free latest version 4.15.2
I am trying to make cascading drop down from db.
I tried the sample as posted by #Oleg
jqgrid incorrect select drop down option values in edit box
But this is for older version of jqgrid and does not work fully while using latest version of jqgrid.
var countries = { "UsId": "US", "UkId": "UK" },
statesOfUS = { "AlabamaId": "Alabama", "CaliforniaId": "California", "FloridaId": "Florida", "HawaiiId": "Hawaii" },
statesOfUK = { "LondonId": "London", "OxfordId": "Oxford" },
states = $.extend({}, statesOfUS, statesOfUK),
allCountries = $.extend({"": "All"}, countries),
allStates = $.extend({"": "All"}, states),
// the next maps provide the states by ids to the contries
statesOfCountry = {
"": states,
"UsId": statesOfUS,
"UkId": statesOfUK
},
The entire code can be seen in fiddle below
https://jsfiddle.net/svnL4Lsv/
The issue is during the add form the second dropwdown shows all states instead of showing as per country
Secondly during the edit the second dropdown again shows all states and not as per the row value
Its just when I change the first dropdown does the second dropdown filters and works.
----------Updated
editoptions: {
// value: countries,
dataInit: dataInitApp,
dataEvents: dataEventsApp,
dataUrl: '#Url.Action("GetData", "Home")',
}
Controller code:
public enum Countries
{
USA = 1,
UK = 2
}
public enum State
{
Alabama = 1,
Florida = 2
London = 3
}
public JsonResult GetData()
{
var type = typeof(Helpers.UsersEnum.Countries);
var jsonData = Enum.GetNames(type)
.Select(name => new
{
Id = (int)Enum.Parse(type, name),
Name = name
})
.ToArray();
return Json(jsonData);
}
I call the above to populate my dropdown.
Also below is the json that is returned back:
[0]: {Id=1, Name="USA"}
[1]: {Id=2, Name="UK"}
[0]: {Id=1, Name="Alabama "}
[1]: {Id=2, Name="Florida"}
[2]: {Id=3, Name="London"}
In case of usage free jqGrid you can use a little simplified code
$(function () {
"use strict";
var countries = "usId:US;ukId:UK",
allStates = "alabamaId:Alabama;californiaId:California;floridaId:Florida;hawaiiId:Hawaii;londonId:London;oxfordId:Oxford",
// the next maps provide the states by ids to the countries
statesOfCountry = {
"": allStates,
usId: "alabamaId:Alabama;californiaId:California;floridaId:Florida;hawaiiId:Hawaii",
ukId: "londonId:London;oxfordId:Oxford"
},
mydata = [
{ id: "10", country: "usId", state: "alabamaId", name: "Louise Fletcher" },
{ id: "20", country: "usId", state: "floridaId", name: "Jim Morrison" },
{ id: "30", country: "ukId", state: "londonId", name: "Sherlock Holmes" },
{ id: "40", country: "ukId", state: "oxfordId", name: "Oscar Wilde" }
],
$grid = $("#list"),
changeStateSelect = function (countryId, countryElem) {
// build "state" options based on the selected "country" value
var $select, selectedValues,
$countryElem = $(countryElem),
isInSearchToolbar = $countryElem.parent().parent().parent().parent().hasClass("ui-search-table");
// populate the subset of countries
if (isInSearchToolbar) {
// searching toolbar
$select = $countryElem.closest("tr.ui-search-toolbar")
.find(">th.ui-th-column select#gs_list_state");
} else if ($countryElem.is(".FormElement")) {
// form editing
$select = $countryElem.closest("form.FormGrid")
.find("select#state.FormElement");
} else {
// inline editing
$select = $("select#" + $.jgrid.jqID($countryElem.closest("tr.jqgrow").attr("id")) + "_state");
}
if ($select.length > 0) {
selectedValues = $select.val();
if (isInSearchToolbar) {
$select.html("<option value=\"\">All</option>");
} else {
$select.empty();
}
$.jgrid.fillSelectOptions($select[0], statesOfCountry[countryId], ":", ";", false, selectedValues);
}
},
dataInitCountry = function (elem) {
setTimeout(function () {
$(elem).change();
}, 0);
},
dataEventsCountry = [
{ type: "change", fn: function (e) { changeStateSelect($(e.target).val(), e.target); } },
{ type: "keyup", fn: function (e) { $(e.target).trigger("change"); } }
],
cancelInlineEditingOfOtherRows = function (rowid) {
var $self = $(this), savedRows = $self.jqGrid("getGridParam", "savedRow");
if (savedRows.length > 0 && rowid !== savedRows[0].id) {
$self.jqGrid("restoreRow", savedRows[0].id);
}
};
$grid.jqGrid({
data: mydata,
datatype: "local",
colNames: [ "Name", "Country", "State" ],
colModel: [
{ name: "name", width: 180 },
{ name: "country", formatter: "select", stype: "select", edittype: "select",
searchoptions: {
noFilterText: "Any",
dataInit: dataInitCountry,
dataEvents: dataEventsCountry
},
editoptions: {
value: countries,
dataInit: dataInitCountry,
dataEvents: dataEventsCountry
}},
{ name: "state", formatter: "select", stype: "select", edittype: "select",
editoptions: { value: allStates }, searchoptions: { noFilterText: "Any" } }
],
cmTemplate: { width: 100, editable: true },
onSelectRow: cancelInlineEditingOfOtherRows,
ondblClickRow: function (rowid) {
cancelInlineEditingOfOtherRows.call(this, rowid);
$(this).jqGrid("editRow", rowid);
},
inlineEditing: {
keys: true
},
formEditing: {
onclickPgButtons: function (whichButton, $form, rowid) {
var $self = $(this), $row = $($self.jqGrid("getGridRowById", rowid)), countryId;
if (whichButton === "next") {
$row = $row.next();
} else if (whichButton === "prev") {
$row = $row.prev();
}
if ($row.length > 0) {
countryId = $self.jqGrid("getCell", $row.attr("id"), "country");
changeStateSelect(countryId, $form.find("#country")[0]);
}
},
closeOnEscape: true
},
searching: {
searchOnEnter: true,
defaultSearch: "cn"
},
navOptions: {
del: false,
search: false
},
iconSet: "fontAwesome",
sortname: "name",
sortorder: "desc",
viewrecords: true,
rownumbers: true,
pager: true,
pagerRightWidth: 85, // fix wrapping or right part of the pager
caption: "Demonstrate dependent selects (inline editing on double-click)"
})
.jqGrid("navGrid")
.jqGrid("filterToolbar");
});
see https://jsfiddle.net/OlegKi/svnL4Lsv/3/
I used the solution mentioned in How to update value of data in jqgrid to update data locally. It worked for me as shown in the first fiddle. In the "Action" column, there is button added conditionally, based on the data in "IsActive" column. If it is "true", a "Retire" button gets added as an action. If it is false, "Activate" button gets added. When the javascript function is called, the button changes to "Activate".
Fiddle 1
Now, I added another column to display the status value as text. Now, both "Status" column and "Action" column are utilizing the same data column - IsActive. After adding this column, the javascript function is not changing the button from "Retire" to "Activate".
Fiddle 2
What is the best way to fix this issue?
CODE
$(document).ready(function () {
function updateActiveStatus(rowid, isToActive) {
alert('function');
// first change the cell in the visible part of grid
$("#list").jqGrid('setCell', rowid, 'firstname', 'A');
// now change the internal local data
$("#list").jqGrid('getLocalRow', rowid).firstname = 'A';
$("#list").jqGrid('setCell', rowid, 'IsActive', false);
$("#list").jqGrid('getLocalRow', rowid).IsActive = false;
}
var myData = [
{ "id": "35", "firstname": null, "codeval": "G", "note": "xx7866", "amount": "23", "IsActive": true },
{ "id": "73", "firstname": null, "codeval": "W", "note": "dd1047", "amount": "34", "IsActive": true },
{ "id": "75", "firstname": "LORA", "codeval": "H", "note": "rr7323", "amount": "56", "IsActive": true },
{ "id": "95", "firstname": "EST", "codeval": "M", "note": "gg574", "amount": "55", "IsActive": true }
],
myGrid = $("#list");
myGrid.jqGrid({
datatype:'local',
data: myData,
colNames: ['ID', 'FirstName', 'Code', 'Amount', 'Note', 'Action'],
colModel:[
{name:'id',width:70,align:'center',sorttype: 'int'},
{name:'firstname',width:80, align:'center'},
{ name: 'codeval', width: 70 },
{name:'amount',width:100, formatter:'number'},
{name:'note',index:'note',width:100,sortable:false},
{
name: 'IsActive',
width: 100,
formatter: function (cellvalue, options, rowObject) {
if (cellvalue == true) {
return '<div style="padding-left:5px;"><button class="ui-button ui-widget ui-state-default app-custom-button-retire" >' +
'<span title="" class="ui-button-icon-primary ui-icon ui-icon-scissors"></span>Retire' +
'</button></div>';
}
else {
return '<div style="padding-left:5px;"><button class="ui-button ui-widget ui-state-default app-custom-button-activate" >' +
'<span title="" class="ui-button-icon-primary ui-icon ui-icon-check"></span>Activate' +
'</button></div>';
}
}
}
],
rowNum:10,
pager: '#pager',
gridview:true,
ignoreCase:true,
rownumbers:true,
viewrecords: true,
sortorder: 'desc',
height: '100%',
beforeSelectRow: function (rowid, e) {
var $self = $(this),
$td = $(e.target).closest("tr.jqgrow>td"),
rowid = $td.parent().attr("id"),
//rowData = $self.jqGrid("getLocalRow", rowid),
rowData = $self.jqGrid("getRowData", rowid)
iCol = $td.length > 0 ? $td[0].cellIndex : -1,
colModel = $self.jqGrid("getGridParam", "colModel");
celValue = $self.jqGrid('getCell', rowid, 'FirstName');
if (iCol >= 0 && colModel[iCol].name === "IsActive") {
if ($(e.target).hasClass("app-custom-button-retire")) {
updateActiveStatus(rowid,false);
return false;
}
if ($(e.target).hasClass("app-custom-button-activate")) {
updateActiveStatus(rowid, true);
return false;
}
}
//Avoid selection of row
return false;
}
});
myGrid.jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: "cn" });
});
I seem multiple misunderstanding in your code. First of all you have some source data, which are the array of item. Every item is object with multiple properties, like:
{ "id": "75", "firstname": "LORA", "codeval": "H", "note": "rr7323",
"amount": "56", "IsActive": true }
or, which is the same,
{ id: "75", firstname: "LORA", codeval: "H", note: "rr7323",
amount: "56", IsActive: true }
It should be clear that such item can't have multiple properties with the same name. The object
{ "id": "75", "firstname": "LORA", "codeval": "H", "note": "rr7323",
"amount": "56", "IsActive": true, "IsActive": true }
would be wrong even if some web browser could ignore the error. Even if you specify the same value true for both "IsActive" properties.
In the same way you can't use colModel with multiple columns with the same name property. Your second demo https://jsfiddle.net/LijoCheeran/rqab1veh/11/ have two columns with the same property name: 'IsActive'. It's wrong. You can fix the code by usage, for example, name: 'IsActive1' in the second column. The formatter of IsActive1 can use rowObject.IsActive instead of cellvalue to access to the required data. The corresponding code will be the follwing
{
name: 'IsActive1',
width: 75,
formatter: function (cellvalue, options, rowObject) {
return rowObject.IsActive == true ? 'Active' : 'Retired';
}
},
{
name: 'IsActive',
width: 100,
formatter: function (cellvalue, options, rowObject) {
return cellvalue == true ? retireButton : activeButton;
}
}
where retireButton and activeButton contains HTML fragments of the buttons.
Now it's important to understand, that jqGrid hold the data array. The method $("#list").jqGrid('getLocalRow', rowid) get you the reference to the data item which corresponds the data of the row. The method getRowData will get the data from HTML representation of the cells (from <td> elements) and unformat there. The type of the fields of returned object will be strings.
Because you need to update not only the data, but the cell content of firstname, IsActive1 and IsActive columns then you have to call setCell on every the field or better call one setRowData:
function updateActiveStatus (rowid, isToActive) {
alert('calling the function');
$("#list").jqGrid('setRowData', rowid, {
firstname: 'A',
IsActive1: false,
IsActive: false
});
var item = $("#list").jqGrid('getLocalRow', rowid);
// delete unneeded IsActive1 property created in the item
delete item.IsActive1;
}
The only small disadvantage of the setRowData call is creating new property IsActive1 in the item of data. Old jqGrid 4.6 have no possibility to save the data "virtually" in some another place as the item.IsActive1. Free jqGrid allows to specify saveLocally callback, which can make custom "saving" of the data of the column in the local item. It's not real large problem in your case and you need just delete unneeded property by delete item.IsActive1
You can see the results on the modified demo https://jsfiddle.net/OlegKi/rqab1veh/12/
I have a JQuery grid which I am reloading everytime when some event occurs on the server (i.e. update in the data set) and display the latest set of data in the grid. This grid has also got checkboxes in it's first column. What's happening is let's say user is selecting some checkboxes and in the meantime if the grid gets reloaded due to update in the data on the server, my grid gets reloaded with the latest set of data but all my previous checkbox selection gets lost. How can I mark these selected checkboxes again after grid reload?
Please suggest.
function PushData() {
// creates a proxy to the Alarm hub
var alarm = $.connection.alarmHub;
alarm.notification = function () {
$("#jqTable").trigger("reloadGrid",[{current:true}]);
};
// Start the connection and request current state
$.connection.hub.start(function () {
BindGrid();
});
}
function BindGrid() {
jqDataUrl = "Alarm/LoadjqData";
var selectedRowIds;
$("#jqTable").jqGrid({
url: jqDataUrl,
cache: false,
datatype: "json",
mtype: "POST",
multiselect: true ,
postData: {
sp: function () { return getPriority(); },
},
colNames: ["Id", "PointRef", "Value", "State", "Ack State", "Priority", "AlarmDate", "", ""],
colModel: [
//{ name: 'alarmId_Checkbox', index: 'chekbox', width: 100, formatter: "checkbox", formatoptions: { disabled: false }, editable: true, edittype: "checkbox" },
{ name: "AlarmId", index: "AlarmId", width: 70, align: "left" },
{ name: "PointRef", index: "PointRef", width: 200, align: "left" },
{ name: "Value", index: "Value", width: 120, align: "left" },
{ name: "AlarmStateName", index: "AlarmStateName", width: 150, align: "left" },
{ name: "AcknowledgementStateName", index: "AcknowledgementStateName", width: 200, align: "left" },
{ name: "Priority", index: "Priority", width: 130, align: "left" },
{ name: "AlarmDate", index: "AlarmDate", width: 250, align: "left" },
{ name: "TrendLink", index: "Trends", width: 100, align: "left" },
{ name: "MimicsLink", index: "Mimics", width: 100, align: "left" }
],
// Grid total width and height
width: 710,
height: 500,
hidegrid: false,
// Paging
toppager: false,
pager: $("#jqTablePager"),
rowNum: 20,
rowList: [5, 10, 20],
viewrecords: true, // "total number of records" is displayed
// Default sorting
sortname: "Priority",
sortorder: "asc",
// Grid caption
caption: "Telemetry Alarms",
onCellSelect: function (rowid, icol, cellcontent, e) {
var cm = jQuery("#jqTable").jqGrid('getGridParam', 'colModel');
var colName = cm[icol];
//alert(colName['index']);
if (colName['index'] == 'AlarmId') {
if ($("#AlarmDialog").dialog("isOpen")) {
$("#AlarmDialog").dialog("close");
}
AlarmDialogScript(rowid)
}
else if (colName['index'] == 'Trends') {
TrendDialogScript(rowid)
}
else if (colName['index'] == 'Mimics') {
MimicsDialogScript(rowid)
}
else {
$("#jqTable").setCell(rowid, "alarmId_Checkbox", true); //Selects checkbox while clicking any other column in the grid
}
},
recreateFilter: true,
emptyrecords: 'No Alarms to display',
loadComplete: function () {
var rowIDs = jQuery("#jqTable").getDataIDs();
for (var i = 0; i < rowIDs.length; i++) {
rowData = jQuery("#jqTable").getRowData(rowIDs[i]);
//change the style of hyperlink coloumns
$("#jqTable").jqGrid('setCell', rowIDs[i], "AlarmId", "", { 'text-decoration': 'underline', 'cursor': 'pointer' });
$("#jqTable").jqGrid('setCell', rowIDs[i], "TrendLink", "", { 'text-decoration': 'underline', 'cursor': 'pointer' });
$("#jqTable").jqGrid('setCell', rowIDs[i], "MimicsLink", "", { 'text-decoration': 'underline', 'cursor': 'pointer' });
if ($.trim(rowData.AcknowledgementStateName) == 'Active') {
$("#jqTable").jqGrid('setCell', rowIDs[i], "AcknowledgementStateName", "", { 'background-color': 'red', 'color': 'white' });
}
else if ($.trim(rowData.AcknowledgementStateName) == 'Acknowledged') {
$("#jqTable").jqGrid('setCell', rowIDs[i], "AcknowledgementStateName", "", { 'background-color': 'Navy', 'color': 'white' });
}
}
//$("#jqTable").jqGrid('hideCol', "AlarmId") //code for hiding a particular column
},
gridComplete: function () {
$('#jqTable input').bind('mouseover', function () {
var tr = $(this).closest('tr');
if ($("#AlarmDialog").dialog("isOpen")) {
$("#AlarmDialog").dialog("close");
}
AlarmDialogScript(tr[0].id);
}
);
}
}).navGrid("#jqTablePager",
{ refresh: true, add: false, edit: false, del: false },
{}, // settings for edit
{}, // settings for add
{}, // settings for delete
{sopt: ["cn"]} // Search options. Some options can be set on column level
)
.trigger('reloadGrid', [{page:1, current:true}]);
}
If I understand you correct you need just use additional parameter i
$("#list").trigger("reloadGrid", [{current:true}]);
or
$("#list").trigger("reloadGrid", [{page: 1, current: true}]);
(See the answer). It do almost the same what Justin suggested.
Depend from what you want exactly mean under reloading of the grid it can be that waht you need is to save the grid state inclusive the list of selected items in localStorage and reload the state after loading the grid. This answer describes in details the implementation. The corresponding demo from the answer could be simplified using new jqGrid events which are introduced in version 4.3.2.
You could save the selections before reloading the grid, for example in the beforeRequest event:
selectedRowIDs = jQuery('#myGrid').getGridParam('selarrrow');
Then after the grid has been reloaded, you can loop over selectedRowIDs and reselect each one using setSelection. For example:
for (i = 0, count = selectedRowIDs.length; i < count; i++) {
jQuery('#myGrid').jqGrid('setSelection', selectedRowIDs[i], false);
}
You might run this code in the loadComplete event.
use
recreateFilter: true
and you should be done
I have poured through every question asked on this website related to populating the jqGrid summary footer WITHOUT the userdata being a server request. And the jqGrid wiki resource and just cannot find an answer. Is this possible to do?
I use the jqGrid in many typical ways as part of my admin portal but have one particular use where I want the look & feel of the jqGrid to start out as an empty UI container of sorts for some user interaction adding rows through a form which doesn't post on Submit (thanks to Oleg's great script below) but simply adds the row and updates the summary footer with the values from the newly added row. I have 'summarytype:"sum"' in the colModel, "grouping:true", footerrow: true, userDataOnFooter: true, altRows: true, in the grid options but apart from the initial values supplied by the userdata in the local data string, the summary footer values never change. It seems like no one wants to touch this subject. Is it because the primary nature of the jqGrid is it's database driven functionality? I use about 15 instances of the jqGrid in it's database driven stance (many of which are in a production service now) but need to use it for consistency sake (all my UI's are inside jqTabs) initially as a client side UI with no server request (everything will be saved later to db) but I am pulling my hair out trying to manipulate the summary footer programmatically on and by the client only. Can anyone suggest how to cause values to the summary footer to update when a new row is added the values of which would be summed up with any existing rows and which does not involve any posting to server, just updates inside the grid?
The code supplied is kind of long and based primarily on user Oleg's solution for adding a row from a modal form without posting to the server. I've changed the local array data to JSON string simply to better understand the notation as I'm used to xml. The jsonstring initializes the grid with one default row for the user to edit. I've left out the jsonReader because the grid would not render with it.
In a nutshell then what I want to do is to have the summary footer update when a new row is added to the grid (no posting to server occurring at this point) or edited or deleted. When a certain set of values is achieved the user is prompted by a displayed button to save row data to db.
var lastSel, mydata = { "total": 1, "page": 1, "records": 1, "rows": [{ "id": acmid, "cell": ["0.00", "0.00", "0.00", "0.00"]}], "userdata":{ "mf": 0.00, "af":0.00,"pf":0.00,"cf":0.00 }}
grid = $("#ta_form_d"),
onclickSubmitLocal = function (options, postdata) {
var grid_p = grid[0].p,
idname = grid_p.prmNames.id,
grid_id = grid[0].id,
id_in_postdata = grid_id + "_id",
rowid = postdata[id_in_postdata],
addMode = rowid === "_empty",
oldValueOfSortColumn;
// postdata has row id property with another name. we fix it:
if (addMode) {
// generate new id
var new_id = grid_p.records + 1;
while ($("#" + new_id).length !== 0) {
new_id++;
}
postdata[idname] = String(new_id);
//alert(postdata[idname]);
} else if (typeof (postdata[idname]) === "undefined") {
// set id property only if the property not exist
postdata[idname] = rowid;
}
delete postdata[id_in_postdata];
// prepare postdata for tree grid
if (grid_p.treeGrid === true) {
if (addMode) {
var tr_par_id = grid_p.treeGridModel === 'adjacency' ? grid_p.treeReader.parent_id_field : 'parent_id';
postdata[tr_par_id] = grid_p.selrow;
}
$.each(grid_p.treeReader, function (i) {
if (postdata.hasOwnProperty(this)) {
delete postdata[this];
}
});
}
// decode data if there encoded with autoencode
if (grid_p.autoencode) {
$.each(postdata, function (n, v) {
postdata[n] = $.jgrid.htmlDecode(v); // TODO: some columns could be skipped
});
}
// save old value from the sorted column
oldValueOfSortColumn = grid_p.sortname === "" ? undefined : grid.jqGrid('getCell', rowid, grid_p.sortname);
//alert(oldValueOfSortColumn);
// save the data in the grid
if (grid_p.treeGrid === true) {
if (addMode) {
grid.jqGrid("addChildNode", rowid, grid_p.selrow, postdata);
} else {
grid.jqGrid("setTreeRow", rowid, postdata);
}
} else {
if (addMode) {
grid.jqGrid("addRowData", rowid, postdata, options.addedrow);
} else {
grid.jqGrid("setRowData", rowid, postdata);
}
}
if ((addMode && options.closeAfterAdd) || (!addMode && options.closeAfterEdit)) {
// close the edit/add dialog
$.jgrid.hideModal("#editmod" + grid_id,
{ gb: "#gbox_" + grid_id, jqm: options.jqModal, onClose: options.onClose });
}
if (postdata[grid_p.sortname] !== oldValueOfSortColumn) {
// if the data are changed in the column by which are currently sorted
// we need resort the grid
setTimeout(function () {
grid.trigger("reloadGrid", [{ current: true}]);
}, 100);
}
// !!! the most important step: skip ajax request to the server
this.processing = true;
return {};
},
editSettings = {
//recreateForm:true,
jqModal: false,
reloadAfterSubmit: false,
closeOnEscape: true,
savekey: [true, 13],
closeAfterEdit: true,
onclickSubmit: onclickSubmitLocal
},
addSettings = {
//recreateForm:true,
jqModal: false,
reloadAfterSubmit: false,
savekey: [true, 13],
closeOnEscape: true,
closeAfterAdd: true,
onclickSubmit: onclickSubmitLocal
},
delSettings = {
// because I use "local" data I don't want to send the changes to the server
// so I use "processing:true" setting and delete the row manually in onclickSubmit
onclickSubmit: function (options, rowid) {
var grid_id = grid[0].id,
grid_p = grid[0].p,
newPage = grid[0].p.page;
// delete the row
grid.delRowData(rowid);
$.jgrid.hideModal("#delmod" + grid_id,
{ gb: "#gbox_" + grid_id, jqm: options.jqModal, onClose: options.onClose });
if (grid_p.lastpage > 1) {// on the multipage grid reload the grid
if (grid_p.reccount === 0 && newPage === grid_p.lastpage) {
// if after deliting there are no rows on the current page
// which is the last page of the grid
newPage--; // go to the previous page
}
// reload grid to make the row from the next page visable.
grid.trigger("reloadGrid", [{ page: newPage}]);
}
return true;
},
processing: true
}; //,
/*initDateEdit = function (elem) {
setTimeout(function () {
$(elem).datepicker({
dateFormat: 'dd-M-yy',
autoSize: true,
showOn: 'button', // it dosn't work in searching dialog
changeYear: true,
changeMonth: true,
showButtonPanel: true,
showWeek: true
});
//$(elem).focus();
}, 100);
},
initDateSearch = function (elem) {
setTimeout(function () {
$(elem).datepicker({
dateFormat: 'dd-M-yy',
autoSize: true,
//showOn: 'button', // it dosn't work in searching dialog
changeYear: true,
changeMonth: true,
showButtonPanel: true,
showWeek: true
});
//$(elem).focus();
}, 100);
};*/
//jQuery("#ta_form_d").jqGrid({
grid.jqGrid({
// url:'/admin/tg_cma/ta_allocations.asp?acmid=' + acmid + '&mid=' + merchantid + '&approval_code=' + approval_code,
//datatype: "local",
//data: mydata,
datatype: 'jsonstring',
datastr: mydata,
colNames: ['ID', 'Monthly Fees', 'ATM Fees', 'POS Fees', 'Card to Card Fees'],
colModel: [
{ name: 'id', index: 'id', width: 90, align: "center", editable: true, editoptions: { size: 25 }, formoptions: { rowpos: 1, colpos: 1, label: "EzyAccount ID", elmprefix: "(*) " }, editrules: { required: true} },
{ name: 'mf', index: 'mf', width: 130, align: "right", formatter: 'number', editable: true, summaryType: 'sum', editoptions: { size: 25 }, formoptions: { rowpos: 2, colpos: 1, label: "Monthly Fee", elmprefix: "(*) " }, editrules: { required: true} },
{ name: 'af', index: 'af', width: 130, align: "right", formatter: 'number', editable: true, summaryType: 'sum', editoptions: { size: 25 }, formoptions: { rowpos: 3, colpos: 1, label: "ATM Fee", elmprefix: "(*) " }, editrules: { required: true} },
{ name: 'pf', index: 'pf', width: 130, align: "right", formatter: 'number', editable: true, summaryType: 'sum', editoptions: { size: 25 }, formoptions: { rowpos: 4, colpos: 1, label: "POS Fee", elmprefix: "(*) " }, editrules: { required: true} },
{ name: 'cf', index: 'cf', width: 130, align: "right", formatter: 'number', editable: true, summaryType: 'sum', editoptions: { size: 25 }, formoptions: { rowpos: 5, colpos: 1, label: "Card to Card Fee", elmprefix: "(*) " }, editrules: { required: true} }
],
rowNum: 5,
rowList: [5, 10, 20],
pager: '#pta_form_d',
toolbar: [true, "top"],
width: 500,
height: 100,
editurl: 'clientArray',
sortname: 'id',
viewrecords: true,
sortorder: "asc",
multiselect: false,
cellEdit: false,
caption: "Allocations",
grouping: true,
/*groupingView: {
groupField: ['id', 'mf', 'af', 'pf', 'cf'],
groupColumnShow: [true],
groupText: ['<b>{0}</b>'],
groupCollapse: false,
groupOrder: ['asc'],
groupSummary: [true],
groupDataSorted: true
},*/
footerrow: true,
userDataOnFooter: true,
altRows: true,
ondblClickRow: function (rowid, ri, ci) {
var p = grid[0].p;
if (p.selrow !== rowid) {
// prevent the row from be unselected on double-click
// the implementation is for "multiselect:false" which we use,
// but one can easy modify the code for "multiselect:true"
grid.jqGrid('setSelection', rowid);
}
grid.jqGrid('editGridRow', rowid, editSettings);
},
onSelectRow: function (id) {
if (id && id !== lastSel) {
// cancel editing of the previous selected row if it was in editing state.
// jqGrid hold intern savedRow array inside of jqGrid object,
// so it is safe to call restoreRow method with any id parameter
// if jqGrid not in editing state
if (typeof lastSel !== "undefined") {
grid.jqGrid('restoreRow', lastSel);
}
lastSel = id;
}
},
afterEditCell: function (rowid, cellname, value, iRow, iCol) {
alert(iCol);
},
gridComplete: function () {
},
loadComplete: function (data) {
}
})
.jqGrid('navGrid', '#pta_form_d', {}, editSettings, addSettings, delSettings,
{ multipleSearch: true, overlay: false,
onClose: function (form) {
// if we close the search dialog during the datapicker are opened
// the datepicker will stay opened. To fix this we have to hide
// the div used by datepicker
//$("div#ui-datepicker-div.ui-datepicker").hide();
}
});
$("#t_ta_form_d").append("<input type='button' class='add' value='Add New Allocation' style='height:20px; color:green; font-size:11px;' />");
$("input.add", "#t_ta_form_d").click(function () {
jQuery("#ta_form_d").jqGrid('editGridRow', "new", {
//recreateForm:true,
jqModal: false,
reloadAfterSubmit: false,
savekey: [true, 13],
closeOnEscape: true,
closeAfterAdd: true,
onclickSubmit: onclickSubmitLocal
})
})
In case of "local" datatype one can use footerData method to set (or get) the data in the footer. Additionally the method getCol can be used co calculate the sum of elements in the column.
Look at the answer for more information. I hope it will solve your problem.