This question has been as a lot so please forgive me asking again.
I have a grid loaded from a url.
I use loadonce: true
I use filtertoolbar:
$("#status").jqGrid('filterToolbar', { stringResult:true, searchOnEnter:false, autosearch: true, defaultSearch: "cn" });
I have a dropdown search list from which I can select what I'm looking for. Works great.
I have a navbutton I click to initiate a reload every 30 seconds. Works great.
$("#status").jqGrid('navButtonAdd','#statuspager', { caption: '', buttonicon: 'ui-icon-play', onClickButton: function ()
{
stint = setInterval (function() {
postfilt = $("#status").jqGrid('getGridParam', 'postData').filter;
$("#status").jqGrid('setGridParam',{
url: './ar_status.cgi?systemtype=' + systype,
datatype: "json",
postData: postfilt,
search: true,
loadtext: "Refreshing grid...",
loadonce: true,
loadui: "block"
});
$("#status").jqGrid().trigger("reloadGrid");
}, 30000);
},
title: 'Start Auto Refresh (every 30 sec.)'
});
Using google chrome I can see the filters that were specified being posted to the server:
systemtype:production
_search:true
nd:1358887757603
rows:1000
page:1
sidx:system
sord:asc
totalrows:700
filters:{"groupOp":"AND","rules":[{"field":"system","op":"eq","data":"ATTDA02"}]}
I can change the filter between reloads and see the new, even multiple filters:
systemtype:production
_search:true
nd:1358887847592
rows:1000
page:1
sidx:system
sord:asc
totalrows:700
filters:{"groupOp":"AND","rules":[{"field":"system","op":"eq","data":"ATTDA02"},{"field":"dow","op":"cn","data":"MO"}]}
I am using multipleSearch: true on the initial load. I'm pretty sure that's retained on reload
On the grid, the filtertoolbar retains my filter criteria, both text and selects, but when the grid reloads, the filters are ignored and the entire dataset is diplayed in the grid.
I've tried many examples posted here on SO. I've tried adding [{current:true}] to the reloadGrid call - no difference. I can't seem to retain and apply the filters on a reload.
I would like the reload to always return the full dataset from the server (which happens fine), and allow the current filter settings to control what is shown after the reload. I do not want to use the postdata to build a new SQL select statement - server side filtering, because at any time the user may want to click the pause button, select a new filter and view something else from the entire dataset without another reload.
$("#status").jqGrid('navButtonAdd','#statuspager', { caption: '', buttonicon: 'ui-icon-pause', onClickButton: function ()
{
clearInterval(stint);
},
title: 'End Auto Refresh'
});
How can this be done without using cookies, as I saw in one post?
I could try using jqGridExport'ing the postfilt var, and then jqGridImport'ing it but was hoping for a more direct approach. I'm not even sure this would help since I already have everything I need right here in the grid via postData.
As a side note, in my setGridParam above, the loadtext I specify is never displayed. Instead, the default "Loading..." is displayed. All of the other parameters are working.
Many thanks in advance,
Mike
Solution. The complete loadComplete to retain filters, sort index and sort order after a [json] reload from the server:
loadComplete: function() {
var $this = $(this);
postfilt = $this.jqGrid('getGridParam','postData').filters;
postsord = $this.jqGrid('getGridParam','postData').sord;
postsort = $this.jqGrid('getGridParam','postData').sidx;
if ($this.jqGrid("getGridParam", "datatype") === "json") {
setTimeout(function () {
$this.jqGrid("setGridParam", {
datatype: "local",
postData: {filters: postfilt, sord: postsord, sidx: postsort},
search: true
});
$this.trigger("reloadGrid");
}, 50);
}
}
Thanks very much!!!!
I only added a bit to your solution to retain the page number as well:
loadComplete: function () {
var $this = $(this);
var postfilt = $this.jqGrid('getGridParam', 'postData').filters;
var postsord = $this.jqGrid('getGridParam', 'postData').sord;
var postsort = $this.jqGrid('getGridParam', 'postData').sidx;
var postpage = $this.jqGrid('getGridParam', 'postData').page;
if ($this.jqGrid("getGridParam", "datatype") === "json") {
setTimeout(function () {
$this.jqGrid("setGridParam", {
datatype: "local",
postData: { filters: postfilt, sord: postsord, sidx: postsort },
search: true
});
$this.trigger("reloadGrid", [{ page: postpage}]);
}, 25);
}
}
I am not sure, but I suppose that the origin of your first problem could be mixing postData.filters and postData and usage filter property instead of filters``. You use
postfilt = $("#status").jqGrid('getGridParam', 'postData').filter;
to get filter property instead of filters. You get undefined value. So the setting postData to postfilt means nothing.
The next problem is that the server response contains non-filtered data. To force filtering the data locally you have to reload the grid once after the loading from the server have finished. You can do this inside of loadComplete. Exactly here you can set postData.filter if required, set search: true and trigger reloadGrid event. It's important only to do this once to have no recursion and you must don't set datatype back to "json" in the case. The datatype will be changed to "local" and the end of loading from the server in case of usage loadonce: true option. If you want apply filtering locally you have to reload grid once with options datatype: "local", search: true and postData having filters specifying the filter which need by applied. See the code from the answer or another one which do another things, but the code which you need will be very close.
Related
I have a JSON Object as the following:
{
"rows": [
{
"id":1,
"name": "Peter",
"hasData": true,
},
{
"id":2,
"name": "Tom",
"hasData": false,
}]
}
And I want the jqGrid to load only rows that have data, meaning when "hasData" == true.
I am firstly wondering what is the best way to do such and secondly wondering how to do it.
UPDATE:
I have tried the following:
gridComplete: function(){
var rowObjects = this.p.data;
for(var i = 0; i<rowObjects.length;i++){
if(rowObjects[i].hasData == false){
$(this).jqGrid('delRowData',rowObjects[i].id);
}
}
},
but the problem is when I go to the next page, all the data is loaded new from the JSON.
I suppose that you load the data from the server using datatype: "json" in combination with loadonce: true option. The solution is very easy if you use free jqGrid fork of jqGrid. Free jqGrid allows to sort and to filter the data, returned from the server, before displaying the first page of data. One need to add forceClientSorting: true to force the applying the actions by jqGrid and postData.filters with the filter, which you need, and the option search: true to apply the filter:
$("#grid").jqGrid({
...
datatype: "json",
postData: {
// the filters property is the filter, which need be applied
// to the data loaded from the server
filters: JSON.stringify({
groupOp: "AND",
groups: [],
rules: [{field: "hasData", op: "eq", data: "true"}]
})
},
loadonce: true,
forceClientSorting: true,
search: true,
// to be able to use "hasData" property in the filter one has to
// include "hasData" column in colModel or in additionalProperties
additionalProperties: ["hasData"],
...
});
See the demo https://jsfiddle.net/OlegKi/epcz4ptq/, which demonstrate it. The demo uses Echo service of JSFiddle to simulate server response.
I can recommend you another solution (in case you use Guriddo jqGrid) , which can be used with any datatype and any settings. The idea is to use beforeProcessing event to filter the needed data.
For this purpose we assume that the data is like described from you. Here is the code:
$("#grid").jqGrid({
...
beforeProcessing : function (data, st, xhr) {
var test= data.rows.filter(function (row) {
if(row.hasData == true ) { // true is not needed but for demo
return true;
} else {
return false;
}
});
data.rows = test;
return true;
}
...
});
I suppose the script will work in free jqGrid in case you use them
I have a jqGrid and want to apply user's sort values after it loads. These values are saved and retrieved in jquery cookies. I am storing data in cookies because user will go to another url and come back which initiates page load and they want to be in same spot they left.
I have a loadPreferences function being called within loadComplete.
See code snippet below(I left several jqrid properties out to keep posting short).
// Set up the jquery grid
$("#jqGridTable").jqGrid(
{
// Ajax related configurations
url: jqDataUrl,
datatype: "json",
mtype: "GET",
autowidth: true,
// Configure the columns
colModel: columnModels,
// Grid total width and height
height: "100%",
// customize jqgrid post init
gridComplete: function()
{
CRef.updateJqGridPagerIcons("jqGridTable");
},
// Default sorting
sortname: "LastName",
sortorder: "asc",
sorttype: "text",
sortable: true,
jsonReader:
{
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
userdata: "userdata"
},
loadComplete: function (data)
{
if (boolPreferencesLoaded == false)//page level variable
{
boolPreferencesLoaded = loadPreferences(this);
$("#jqGridTable").trigger("reloadGrid");
}
isGridSorting(this, false);
}
...the rest of grid properties...
and in the function call(which is located in another js file), I have...
function loadPreferences(gridId)
{
if (typeof $.cookie("sortCol") !== "undefined")
{
$(gridId).jqGrid("sortGrid", $.cookie("sortCol"), true, $.cookie("sortOrd"));
}
return true;
}
function isGridSorting(gridId, sorting)
{
$.cookie("sortCol", $(gridId).jqGrid('getGridParam', 'sortname'));
$.cookie("sortOrd", $(gridId).jqGrid('getGridParam', 'sortorder'));
$(gridId).jqGrid('setGridParam', { postData: { isSorting: sorting } });
}
My problem is when I go to apply them on page load(with jqGrid specified above), it does not exactly work. The icon moves to correct column and the arrow is pointing in correct direction, but the data in column does not sort.
I know there are a lot of posts dealing with similar issues, but not able to get solutions to work. What I am trying to do seems to easy, but it's driving me nuts. If you respond, please make comment easy to understand. Thank you.
I have two buttons in the pager, one for adding a new record. See the code below:
$(grid_selector).jqGrid('navGrid', pager_selector,
{
edit: false,
add: true,
addicon : 'icon-plus-sign purple',
del: true,
delicon : 'icon-trash red',
search: false,
refresh: false,
view: false,
},
null, //no need for edit
{
//new record form
url: "/add",
...
afterSubmit : function(response, postdata) {
// ??? how to refresh the grid
}
},
...
}
After adding a record, I am hoping to refresh the grid. Could someone let me know how to do this?
I am using local data for the test purpose.
Regards.
Make sure that you are using updated version of jqGrid in your application
If all other parameters are are correct ( refresh:true etc ) you can use this to reload Grid
$(grid_selector).trigger("reloadGrid");
Please note this condition too
The reloading is not performed due to the datatype got change to local(loadonce is true).You need to reload the grid manually in afterSubmit function for form editing. You need to set the datatype to json before triggering reload event.
$(grid_selector).jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid');
Default property used in form editing is reloadAfterSubmit: true. It means that jqGrid trigger reloadGrid processing of afterSubmit.
You wrote "I am using local data". It's difficult to answer on your question because you don't posted more full code which you use. I try to guess what you do. Because jqGrid don't support local for editing till now then I suppose that your problem exist because you use loadonce: true option. If the option are used then jqGrid changes the original datatype to "local" after the first loading of data. In other words jqGrid "breaks" connection to the server (to url) after the first loading of data.
So you need just to reset the original datatype ("json" or "xml") before jqGrid trigger reloadGrid. The corresponding code will be about the following:
$(grid_selector).jqGrid("navGrid", pager_selector,
{
edit: false,
addicon : 'icon-plus-sign purple',
delicon : 'icon-trash red',
search: false,
beforeRefresh: function () {
$(this).jqGrid("setGridParam", { datatype: "json" });
}
},
{}, //no need for edit
{
//new record form
url: "/add",
...
afterSubmit: function () {
$(this).jqGrid("setGridParam", { datatype: "json" });
}
},
...
}
The above code add "Refresh" button and uses the same beforeRefresh and afterSubmit. In the way "Refresh" button reloads the data from the server. I personally find existence of such button practical in loadonce: true scenario.
I'm looking for a way to show jqgrid with search toolbar pre-filled and data filtered by this toolbar. I tried code below but this makes two requests to retrieve data. First request retrieves
unfiltered data and only second request retrieves proper data.
How to eliminate first request so that filtered data is retrieved and search toolbar is pre-filled immediately ?
var grid = $("#grid"),
notLoaded= true;
grid.jqGrid({
datatype: "json",
mtype: 'POST',
loadComplete: function() {
$("#gs_Name").val('<%= Request.QueryString["Name"] %>');
if (notLoaded) {
setTimeout( function() {
$("#grid")[0].triggerToolbar();
}, 100 );
notLoaded = false;
}
}
});
Update
I tried to fill search toolbar using search criteria passed from query string
$(function () {
var grid = $("#grid"),
urlFilters;
var namedParameters = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'),
parameters = {},
nameAndValue,
i;
for (i = 0; i < namedParameters.length; i += 1) {
nameAndValue = namedParameters[i].split('=');
parameters[nameAndValue[0]] = decodeURIComponent(nameAndValue[1]);
if (nameAndValue[0] === "filters") {
urlFilters= decodeURIComponent(nameAndValue[1]);
}
}
grid.jqGrid({
postData: { filters: urlFilters },
search:true,
loadComplete: function() {
refreshSearchingToolbar( $(this), 'eq');
}
...
Search toolbar is empty if grid is loaded but grid is filtered and find dialog is filled properly.
Search toolbar is also filled if find dialog is opened.
Debugger shows that in refreshSearchingToolbar condition
if (typeof (postData.filters) === "string" &&
typeof ($grid[0].ftoolbar) === "boolean" && $grid[0].ftoolbar) {
if not satisfied: ftoolbar is undefined.
I removed this check but after that got error at line tagName = control[0].tagName.toUpperCase(); about undefined tagName
How to fix this ?
You should create jqGrid with search: true and postData: {filters: theFilterAsJSON} parameters. Look the answer, this one of this one for details.
UPDATED: The answer shows how to parse postData.filters and fill the fields of the searching toolbar (whenever it's possible) the the corresponding filters.
I am showing lots of form using jquery dialog and I wish to add in client side validation on it. I read through some examples, saying that mvc 3 already somehow support jquery client side validation, but I tried by including the necessary script, and my form like this:
#using (Html.BeginForm("CreateFood", "Home", FormMethod.Post, new { id = "formData" }))
{
#Html.ValidationSummary(false, "Please fix these errors.")
When i try to submit my form without fill in the required field, I still dint get any message. Can anyone give me more idea / explanation / examples on this??
Really needs help here... Thanks...
UPDATE (add in the script for my dialog)
$createdialog.dialog("option", "buttons", {
"Cancel": function () {
//alert('Cancel');
$createdialog.dialog('close');
},
"Submit": function () {
var frm = $('#formData');
$.ajax({
url: '/Food/CreateFood',
type: 'POST',
data: frm.serialize(),
success: $createdialog.dialog('close')
});
}
});
Once dropped, open dialog:
// Once drop, open dialog to create food
options.drop = function (event, ui) {
// Get the ContainerImgName which food dropped at
var cimg = $(this).attr('id');
// Pass in ContainerImgName to retrieve respective ContainerID
// Once success, set the container hidden field value in the FoodForm
$.ajax({
url: '/food/getcontainerid',
type: 'GET',
data: { cImg: cimg },
success: function (result) { $('#containerID').val(result); }
});
clear();
$.validator.unobtrusive.parse($createdialog);
$createdialog.dialog('open');
};
I've faced the same problem, solved with:
$(name).dialog({
autoOpen: true,
width: options.witdth,
heigth: options.height,
resizable: true,
draggable: true,
title: options.title,
modal: true,
open: function (event, ui) {
// Enable validation for unobtrusive stuffs
$(this).load(options.url, function () {
var $jQval = $.validator;
$jQval.unobtrusive.parse($(this));
});
}
});
of course you can add the validation on the close event of the dialog, depends on what you're doing, in my case the popup was just for displaying errors so I've performed validation on load of the content. (this pop up is displaying am Action result)
For every dynamically generated form you need to manually run the validator once you inject this content into the DOM as shown in this blog post using the $.validator.unobtrusive.parse function.