.navGrid('#selectedInmatePager', { edit: false, add: false, del: false });
Gives me the search button on my JqGrid. How can I get the data from the dialog box and send it through a webmethod?
Related
I'm developing a wordpress plugin that uses jqgrid plugin to show a list of elements. This list gets data from ajax request.
I have to buttons to make filters, depending on the button pressed the data in the jqgrid must show only the rows that one column had a value.
When I press the button, I do this:
var postdata = grid.jqGrid('getGridParam','postData');
jQuery.extend (postdata,
{
filters:'',
searchField: 'estado',
searchOper: 'eq',
searchString: that.text().substring(0, that.text().indexOf("(") - 1)
});
grid.jqGrid('setGridParam', { search: filtrar, postData: postdata });
grid.trigger("reloadGrid",[{page:1}]);
in searchString I pass the text in the button, that matches with the text value i'm looking for in te table.
My problem is that all buttons makes the jqgrid empty, except the first button that is for show all, this button works (but it makes no sense for mi, this button sends in searchString a text that is not in any row at the field 'estado').
estado is the name in the column that I want search:
{ label: 'Estado', name: 'estado', width: 70, height: 'auto', template: myFloatTemplate, datatype: 'html' },
thanks...
I have an object that contains the following filter string:
prefs.filters={"groupOp":"AND","rules":[{"field":"FirstName","op":"cn","data":"max"}]}
Here is my grid create, where I am trying to apply the filters in the postData setting:
// 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");
},
// Paging
toppager: true,
rowNum: 20,
rowList: [5, 10, 20, 50, 100],
viewrecords: true, // Specify if "total number of records" is displayed
// Default sorting
sortname: typeof prefs.sortCol !== "undefined" ? prefs.sortCol : "LastName",
sortorder: typeof prefs.sortCol !== "undefined" ? prefs.sortOrd : "asc",
sorttype: "text",
sortable: true,
postData: typeof prefs.filters !== "undefined" ? { filters: prefs.filters } : {},
//also tried this...
//postData: typeof prefs.filters !== "undefined" ? { JSON.stringify(filters: prefs.filters) } : {},
//remaining property settings excluded from post to keep short.
Update: Using .navGrid on grid as follows:
.navGrid("#jqGridTable",
{ refresh: true, add: false, edit: false, del: false, refreshtitle: getRefreshText('#Model.Instruction'), searchtitle: searchText },
{}, // settings for edit
{}, // settings for add
{}, // settings for delete
{ closeAfterSearch: true, closeOnEscape: true, multipleSearch: true, multipleGroup: true });
When grid is created, the filter in postData is not applied. I also tried triggering reload event after the initial create and that to did not apply filter either.
From other posts, I believe I'm on correct path, but appear to be missing something.
Update after comments:
I added the following code to loadComplete...
if ($("#jqGridTable").jqGrid("getGridParam", "datatype") === "json") {
setTimeout(function () {
$("#jqGridTable").jqGrid("setGridParam", {
datatype: "local",
postData: { filters: prefs.filters, sord: prefs.sortOrd, sidx: prefs.sortCol },
search: true
});
$("#jqGridTable").trigger("reloadGrid");
}, 50);
}
and it successfully retains the filters. :)
However, now I have interesting issue side effect. I can sort on columns and some columns will change to sort asc/desc correctly, but when I go to others and sort, they sort but in the order that they originally loaded which is neither asc or desc.
You have to set search: true option of jqGrid if you want that filters will be applied. Moreover you use datatype: "json". It means that the filters will be just send to the server and your server code have to decode the filters and to use there. One more remark. The correct value for postData would be { filters: JSON.stringify(prefs.filters) }.
UPDATED: I recommend you upgrade to the latest version (4.12.1) or free jqGrid. It's the fork of jGrid which I develop since the end of 2014. To use free jqGrid you can just change the URLs to jqGrid files to URLs described in the wiki article. After that you can use the following options:
loadonce: true,
forceClientSorting: true,
search: true,
postData: { filters: prefs.filters },
sortname: prefs.sortCol,
sortorder: prefs.sortOrd
and remove the loadComplete code which you posted in "Update after comments" part of your question. Free jqGrid will load all data returned from the server, apply the filter prefs.filters locally, sort the results locally and display the first page of the results (based on the page size rowNum: 20).
The old demo loads the JSON data from the server, sort the data locally and filter by isFinal === 1 and finally display the first page of results. The demo uses additionally custom sorting using sortfunc, additionalProperties, which allows to saved additionally properties in local data.
You can additionally include reloadGridOptions: { fromServer: true } to other options of navGrid which you use (refresh: true, add: false, ...). It will change the behavior of the Refresh button of the navigator bar to reload the data from the server if the user clicks on the button. See another answer, which I posted today for more information about new options of free jqGrid and loadonce: true.
I have a jqgrid in which i have a column of buttons. I want to delete row from this button. My question is i want to make confirm message pop up when i click on the button. I appreciate if i can customize the dialog box. So how i can do this?
I have tried bootstrap pop up and query but i think i did something wrong.
So is there any way to make pop up in JQgrid?
This is my column.
{
name: "action",
align: "center",
sortable: false,
title: false,
fixed: true,
search: false,
formatter: function (cellvalue, options, rowObject) {
var links = "<a title='' href='/Admin/Workflow/Delete?id=" + rowObject.templateId + "'>" + "Delete" + "</a>";
return links;
}
}
I just want to display the refresh button on my jqGrids. I thought it was provided naturally so I did this :
$.extend($.jgrid.nav, {
refresh: true,
refreshstate: "current"
});
but it does nothing. no button appearing.
How can I add a refresh button just triggering the reloadGrid ?
thank you
$.jgrid.nav cab be used to specify default values of navGrid parameters, but to create "refresh" button or some other button in the grid you need explicitly call navGrid method. For example
$("#gridId").jqGrid("navGrid", "#pager", {
add: false, edit: false, del: false, search: false, refresh: true
});
The method navGrid creates navigator structures in the specified pager and then places specified buttons in the navigator bar.
If you use toppager: true option then top pager will be created additionally. The pager will have id = grid_id + "_toppager" (gridId_toppager if id of the grid is gridId). You can have one or two pagers. You can call navGrid explicitly for one from the pagers or you can use cloneToTop: true option of navGrid to place the pager on every page.
If you have existing project with many grids you have sure one common JavaScript file with settings which you included on every page. You placed sure $.extend($.jgrid.nav, {...}); in the file. Whyt you can do is to specify common onInitGrid callback which calls navGrid:
$.extend($.jgrid.defaults, {
onInitGrid: function () {
var $self = $(this), p = $self.jqGrid("getGridParam");
if (p.pager) {
$self.jqGrid("navGrid", p.pager,
{add: false, edit: false, del: false, search: false, refresh: true, cloneToTop: true});
} else if (p.toppager) {
$self.jqGrid("navGrid", "#" + $.jgrid.jqID(p.id) + "_toppager",
{add: false, edit: false, del: false, search: false, refresh: true});
}
}
});
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.