issue with filterToolbar in jqGrid Search - asp.net-mvc

search functionality is not working. when hitting action method in controller parameters looking like "_search=true", "searchField=null", "searchString=null" ,"searchOper=null", here i am not getting values of searchField,searchString,searchOper. Please can any one help.
if i give loadonce: true property then search is working. but i am getting first page records only. i am not getting other page records. How can i fix this.
My code:
$(function () {
$("#Channelslistgrid").jqGrid({
colNames: ['ChannelName', 'Description', 'status'],
colModel: [
{ name: 'ChannelName', index: 'ChannelName', sortable: true, align: 'left', width: '200',
editable: false, edittype: 'text',search:true
},
{ name: 'Description', index: 'Description', sortable: false, align: 'left', width: '120',
editable: false, edittype: 'text',search:true
},
{ name: 'status', index: 'status', sortable: false, align: 'left', width: '220',
editable: false, edittype: 'text',search:true
},
],
pager: jQuery('#pager'),
sortname: 'Title',
rowNum: 15,
rowList: [15, 20, 25],
sortorder: "desc",
height: 345,
ignoreCase: true,
viewrecords: true,
rownumbers: true,
caption: 'Channels List',
width: 660,
url: "#Url.Content("~/Home/Channelslist")",
datatype: 'json',
mtype: 'GET',
loadonce: true
})
jQuery("#Channelslistgrid").jqGrid('filterToolbar', { searchOnEnter: true, enableClear: false });
});
controller
public ActionResult Channelslist(int page, int rows, string sidx, string sord, bool _search, string searchField, string searchString, string searchOper)
{
//code
}

Instead you can use the below controller code to get the search parameters typed on the filtertoolbar.
public ActionResult Channelslist(int page, int rows, string sidx, string sord, bool _search) {
string ChannelName= "";
string desc= "";
if (Request.Params["ChannelName"] != null) ChannelName = Request.Params["ChannelName"];
if (Request.Params["Description "] != null) desc= Request.Params["Description"];
}

Related

jqgrid not showing any results when count exceeds ~9000

I am using jqgrid version 4.1.2 with MVC4, using loadonce option. When the search result's count exceeds approximately 9000 records, no data is shown up on the grid.
What might be the issue?
Here is the JS code: Update 1
function showCompletedGrid() {
// Set up the jquery grid
$("#jqTableCompleted").jqGrid({
// Ajax related configurations
url: jqDataUrl,
datatype: "json",
mtype: "POST",
loadonce: true,
loadtext: 'Loading Data please wait ...',
postData: { strUserName: function () { return $('#ddlUserName :selected').val(); },
strFunctionName: function () { return $('#ddlOPMSFunction :selected').text(); },
strProcName: function () { return $('#ddlOPMSProcess :selected').text(); },
strCategory: function () { return $('#ddlSearchCategory :selected').text(); },
strWorkType: function () { return $('#ddlSearchWorkType :selected').text(); },
strRequestNumber: function () { return $('#txtRequestNo').val(); },
strStatus: function () { return $('#ddlSearchStatus :selected').text(); },
strFromDate: function () { return $('#txtFromDate').val().toString(); }, //datepicker('getDate'),
strToDate: function () { return $('#txtToDate').val().toString(); }, //datepicker('getDate'),
strAction: "Closed"
},
autowidth: true,
shrinkToFit: true,
// Specify the column names
colNames: ["S.No.", "User Name", "Category", "Work Type", "Request Number", "Status", "Time Spent", "RE", "GUID", "Marked for Correction", "Correction Complete", "Reason", "Task Type", "acf2id", "Created Date", "Action", "IsTeam"],
// Configure the columns
colModel: [
{ name: "SNo", index: "SNo", sorttype: 'int', width: 100, align: "left", hidden: true, sortable: true, search: true, searchoptions: { sopt: ['eq']} },
{ name: "UserName", index: "UserName", width: 200, align: "left", sortable: true, search: true, sorttype: 'string', searchoptions: { sopt: ['cn']} },
{ name: "Category", index: "Category", width: 200, align: "left", sortable: true, search: true, sorttype: 'string', searchoptions: { sopt: ['cn']} },
{ name: "WorkType", index: "WorkType", width: 200, align: "left", sortable: true, search: true, sorttype: 'string', searchoptions: { sopt: ['cn']} },
{ name: "RequestNumber", index: "RequestNumber", width: 200, align: "left", sortable: true, search: true, searchoptions: { sopt: ['cn']} },
{ name: "Status", index: "Status", width: 200, align: "left", sortable: true, search: true, sorttype: 'string', searchoptions: { sopt: ['cn']} },
{ name: "TimeSpent", index: "TimeSpent", width: 200, align: "left", sortable: true, search: true },
{ name: "RE", index: "RE", width: 200, align: "left", sortable: true, search: true },
{ name: "GUID", index: "GUID", sortable: false, search: false, width: 200, align: "left", hidden: true },
{ name: "MarkCorrection", index: "MarkCorrection", width: 200, align: "left", hidden: true, sortable: true, search: true, sorttype: 'string', searchoptions: { sopt: ['cn']} },
{ name: "CorrectionComplete", index: "CorrectionComplete", width: 200, align: "left", hidden: true, sortable: true, search: true, sorttype: 'string', searchoptions: { sopt: ['cn']} },
{ name: "Reason", index: "Reason", width: 200, align: "left", hidden: true, sortable: true, search: true, sorttype: 'string', searchoptions: { sopt: ['cn']} },
{ name: "TaskType", index: "TaskType", width: 200, align: "left", sortable: true, search: true, sorttype: 'string', searchoptions: { sopt: ['cn']} },
{ name: "acf2id", index: "acf2id", width: 200, align: "left", hidden: true, sortable: true, search: true, sorttype: 'string', searchoptions: { sopt: ['cn']} },
{ name: "CreatedDate", index: "CreatedDate", width: 200, align: "left", hidden: false, search: false },
{ name: 'Actions', sortable: false, search: false, fixed: true, align: 'center', formatter: returnHyperLinkCompleted },
{ name: 'IsTeam', sortable: false, hidden: true, search: false, fixed: true, align: 'center' }
],
ignoreCase: true,
//width: 1250,
height: 150,
// Paging
toppager: true,
pager: $("#jqTableCompletedPager"),
//rowTotal: 200,
rowNum: 20,
rowList: [20, 15, 10, 5],
viewrecords: true,
emptyrecords: "",
hiddengrid: true,
// Default sorting
sortname: "SNo",
sortorder: "asc",
// Grid caption
caption: "Closed",
loadComplete: function (data) {
var RE;
var TimeSpent;
var rowIDs = jQuery("#jqTableCompleted").jqGrid('getDataIDs');
for (var i = 0; i < rowIDs.length; i++) {
var rowID = rowIDs[i];
var row = jQuery('#jqTableCompleted').jqGrid('getRowData', rowID);
RE = hmsToSecondsOnly(row.RE);
RE = (0.2 * RE) + RE;
TimeSpent = hmsToSecondsOnly(row.TimeSpent);
if (TimeSpent > RE && RE > 0) {
$(row).removeClass('ui-widget-content');
$(row).removeClass('ui-state-highlight');
$("#jqTableCompleted tr[id='" + rowID + "']").addClass('myColor');
}
}
}
}).navGrid("#jqTableCompletedPager",
{ refresh: true, add: false, edit: false, del: false },
{}, // settings for edit
{}, // settings for add
{}, // settings for delete
{sopt: ["cn"]}
);
$("#jqTableCompleted").jqGrid('navGrid', '#jqTableCompletedPager', { del: false, add: false, edit: false, search: false });
$("#jqTableCompleted").jqGrid('filterToolbar', { searchOnEnter: false, searchOperators: true });
$("#jqTableCompleted").jqGrid('navButtonAdd', '#jqTableCompletedPager',
{ caption: "Export to Excel", buttonicon: "ui-icon-extlink", title: "Export", id: "btnExport",
onClickButton: function (evt) {
var UserName = $('#ddlUserName option:selected').val();
var RequestNumber = $('#txtRequestNo').val();
var FunctionName = encodeURIComponent($('#ddlOPMSFunction option:selected').text());
var ProcessName = encodeURIComponent($('#ddlOPMSProcess option:selected').text());
var Category = $('#ddlSearchCategory option:selected').text();
var WorkTypeName = $('#ddlSearchWorkType option:selected').text();
var SearchStatus = $('#ddlSearchStatus option:selected').text();
var TransactionStartTS = $('#txtFromDate').val().toString();
var TransactionEndTS = $('#txtToDate').val().toString();
window.open("../Search/Export?UserName=" + UserName + "&RequestNumber=" + RequestNumber + "&FunctionName=" + FunctionName + "&ProcessName=" + ProcessName + "&Category=" + Category + "&WorkTypeName=" + WorkTypeName + "&SearchStatus=" + SearchStatus + "&TransactionStartTS=" + TransactionStartTS + "&TransactionEndTS=" + TransactionEndTS + "&ActionName=" + "Closed");
}
});
}
Although the data is being returned and in the correct format, from the controller, as follows, the grid does not show any result.
var jsonData = new
{
page = page,
rows = data
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
Also is there any limit on number of records or dependency on the browser when returning all the data from server using the loadonce option?
Any help would be much appreciated. Thanks.
Finally I found the solution for the above problem by tracing the request in Fiddler, in the response title following error was shown:
Error during serialization or deserialization using the JSON JavaScriptSerializer. The length of the string exceeds the value set on the maxJsonLength property.
Upon searching for the above error, I found a workaround:
Here
Basically the problem area was not the jqGrid, but was MaxJsonLength property of JavaScriptSerializer which defaults to 2097152 characters ~ 4 MB of data. Source: MaxJsonLength
To get it working, I replaced the following code in my Action method:
return Json(jsonData, JsonRequestBehavior.AllowGet);
with:
var jsonResult = Json(jsonData, JsonRequestBehavior.AllowGet);
jsonResult.MaxJsonLength = int.MaxValue;
return jsonResult;
Thanks.

get unformatted value of cell in jqgrid as parameter

I am trying to get the value of a cell to pass as a parameter in an ajax call for another column in the grid. The cell value I need is formatted to return a url so when I select it it is passing the url instead of the batchID value.
How can I access the value of BatchID without the formatter applied?
$(function () {
$('#search').html('');
$('#grid').GridUnload();
Grid.Home.Grid.setupGrid($('#grid'), $('#pager'), $('#search'));
});
Grid.Home.Grid = {
setupGrid: function (grid, pager, search) {
grid.jqGrid({
colNames: ['Batch ID', 'Job Start Date', 'Job Finish Date', 'Contacts', 'Statements', 'Selected', 'Sent', 'Queued', 'Action'],
colModel: [
{ name: 'BatchID', index: 'BatchID', width: 35, formatter: batch },
{ name: 'JobStartDate', index: 'JobStartDate', width: 55, sortable: false, search: false, formatoptions: { srcformat: 'y/m/dTH:i:s', newformat: 'm/d/Y g:i:s A'} },
{ name: 'JobFinishDate', index: 'JobFinishDate', width: 55, sortable: false, search: false, formatoptions: { srcformat: 'y/m/dTH:i:s', newformat: 'm/d/Y g:i:s A'} },
{ name: 'Contacts', index: 'Contacts', width: 20, align: 'right', sortable: false, search: false },
{ name: 'Statements', index: 'Statements', width: 20, align: 'right', sortable: false, search: false }, //'currencyFormatter' },
{name: 'Selected', index: 'Selected', width: 20, align: 'right', sortable: false, search: false },
{ name: 'Sent', index: 'Sent', width: 30, sortable: false, search: false, sortable: false, search: false },
{ name: 'Queued', index: 'Queued', width: 30, sortable: false, search: false },
{ name: 'Action', index: 'Action', width: 50, sortable: false, search: false, formatter: action}
],
loadonce: false,
pager: '#pager',
sortname: 'BatchID',
sortorder: "desc",
onCellSelect: function (rowid, cellcontent, e) {
if (cellcontent == '8') {
var rowObject = grid.getRowData(rowid);
if (rowObject.Action === 'Add To Queue'){
$.ajax({
type: 'POST',
url: '<%= Url.Action("UpdateBatch") %>',
data: { BatchID: rowObject.BatchID },
beforeSend: function (xhr) {
blockElement($('.grid'));
},
complete: function (xhr, status) {
unblockElement($('.grid'));
},
success: function (data) {
var title = $('<h6>', { html: data.Title, 'class': 'jgrowl-header' });
$.jGrowl(data.Message, {
theme: 'ui-state-highlight',
life: 5000,
beforeOpen: function (e, m, o) {
e.children('.header').html(title);
}
});
grid.trigger("reloadGrid");
}
}); }
};
},
url: '<%= Url.Action("GetBatchList") %>'
}).navGrid('#pager', { edit: false, add: false, del: false, search: false, refresh: true });
grid.filterToolbar({ stringResult: true, searchOnEnter: false });
}
};
function action(cellvalue, options, rowObject) {
if (rowObject.Action == 'Add To Queue'){
options.colModel.classes = 'show-link';
return 'Add To Queue'
}
else {
options.colModel.classes = '';
return '';
}
};
function batch(cellvalue, options, rowObject) {
var t = rowObject.BatchID;
return '' + t + ' ';
};
</script>
I used jsonmap and added another column that was hidden to hold the value of batchID unformatted. Now the grid looks like this.
Grid.Home.Grid = {
setupGrid: function (grid, pager, search) {
grid.jqGrid({
colNames: ['Batch', 'Job Start Date', 'Job Finish Date', 'Contacts', 'Statements', 'Selected', 'Sent', 'Queued', 'Action', ''],
colModel: [
{ name: 'BatchIDLink ', index: 'BatchID', jsonmap: 'BatchID', width: 35, formatter: link },
{ name: 'JobStartDate', index: 'JobStartDate', width: 55, sortable: false, search: false, formatoptions: { srcformat: 'y/m/dTH:i:s', newformat: 'm/d/Y g:i:s A'} },
{ name: 'JobFinishDate', index: 'JobFinishDate', width: 55, sortable: false, search: false, formatoptions: { srcformat: 'y/m/dTH:i:s', newformat: 'm/d/Y g:i:s A'} },
{ name: 'Contacts', index: 'Contacts', width: 20, align: 'right', sortable: false, search: false },
{ name: 'Statements', index: 'Statements', width: 20, align: 'right', sortable: false, search: false }, //'currencyFormatter' },
{name: 'Selected', index: 'Selected', width: 20, align: 'right', sortable: false, search: false },
{ name: 'Sent', index: 'Sent', width: 30, sortable: false, search: false, sortable: false, search: false },
{ name: 'Queued', index: 'Queued', width: 30, sortable: false, search: false },
{ name: 'Action', index: 'Action', width: 50, sortable: false, search: false, formatter: queue },
{ name: 'BatchIDVal', index: 'BatchID', jsonmap: 'BatchID', hidden: true }
],

jqgrid load from database does not work filterToolbar

I'm working with Asp.net MVC4, jqgrid 4.4.4 and jquery 1.9
The jqGrid is loaded from a query to the database, but I can not filter the fields, when I put a value doesn't search, it shows me the same values, but when I define in jqgrid the value loadonce: true only in the first search page, How I can resolve this problem? Where I should be modify the code?
This is my code, jqgrid:
jQuery(document).ready(function () {
jQuery("#tbBuscaRec").jqGrid({
url: '#Url.Action("DatosBuscaPersona", "raTabPersonaReclamante")',
datatype: 'json',
mtype: 'POST',
postData: { Parametro: Param },
colNames: ['Id', 'IdPer', 'Doc', 'CI/NIT', 'Nombres', 'Apellido Paterno', 'Apellido Materno', 'Apellido Esposo'],
colModel:
[
{ name: 'ip_idpersona', index: 'ip_idpersona', formatter: 'number', hidden: true },
{ name: 'ip_idpersonadoc', index: 'ip_idpersonadoc', formatter: 'text', hidden: true },
{ name: 'ip_partipodoc', index: 'ip_partipodoc', align: 'left', width: '4', editable: true, edittype: 'text', editoptions: { readonly: true }, search: false },
{ name: 'ip_nrodoc', index: 'ip_nrodoc', sortable: true, align: 'left', width: '8', editable: true, edittype: 'text', editoptions: { readonly: true} },
{ name: 'ip_nombres', index: 'ip_nombres', sortable: true, align: 'left', width: '15', editable: true, edittype: 'text', editoptions: { readonly: true} },
{ name: 'ip_appaterno', index: 'ip_appaterno', sortable: true, align: 'left', width: '15', editable: true, edittype: 'text', editoptions: { readonly: true } },
{ name: 'ip_apmaterno', index: 'ip_apmaterno', sortable: true, align: 'left', width: '15', editable: true, edittype: 'text', editoptions: { readonly: true} },
{ name: 'ip_apesposo', index: 'ip_apesposo', sortable: false, align: 'left', width: '15', editable: true, edittype: 'text', editoptions: { readonly: true} }
],
pager: '#pg_tbBuscaRec',
rowNum: 100,
rowList: [100, 200, 300],
sortname: 'ip_nombres',
sortorder: 'asc',
rownumbers: true,
multiselect: false,
gridview: true,
height: 180,
width: 490,
ignoreCase: true,
// loadonce: true,
});
});
jQuery("#tbBuscaRec").jqGrid('navGrid', '#pg_tbBuscaRec', { view: false, edit: false, add: false, del: false }, {}, {}, {}, { multipleSearch: true, closeAfterSearch: true, closeOnEscape: true });
jQuery("#tbBuscaRec").jqGrid('filterToolbar');
jQuery("#tbBuscaRec").trigger("reloadGrid", [{ current: true}]);
By default the filtering will be handled by your Controller, and you will see these values being passed to the controller in the _search and filters.
The reason the loadonce: true is working on the first page is that it is doing the filtering on the client side.
I would suggest checking out Oleg's answer on filtering at the link below, it is what put me on the track to do server side filtering for my application.
ASP.NET MVC 2.0 Implementation of searching in jqgrid

jqGrid page return null

i have problem with jqGrid and dynamical data binding.
The problem is, that I allways get Null for parameter page. I am working with MVC3 and jqGrid 4.4.1.
var dataToSend = {
mrpId: selPRid,
mrpFilter: cookMainFilter,
divId: randomId,
chartId: chartId
};
$("#gridMeasurementsTableView" + randomId).jqGrid({
url: '/DataMonitor/CreateMeasurementTableView/',
datatype: "json",
mtype: 'POST',
postData: $.toDictionary(dataToSend),
jsonReader : {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
cell: "cell",
id: "id"
},
colNames: ['Date', 'Value'],
colModel: [
{ name: 'Timestamp', index: 'Timestamp', width: 280,
formatter: function (cellvalue, options, rowObject) {
return new Date(parseInt(cellvalue.substr(6, cellvalue.length - 8), 10));
}
},
{ name: 'Value', index: 'Value', width: 200, align: 'center' }
],
loadui: "disable",
loadtext: "Loading",
viewrecords: true,
height: "100%",
caption: "Measurements2",
pager: $("#gridpager" + randomId),
rowNum: 10,
sortname: 'Value',
sortorder: "asc",
rowList: [10, 50, 100]
});
and function for getting data is define like this:
public ActionResult CreateMeasurementTableView(string sidx, string sord, int page, int rows, int mrpId, FilterMRPParameters mrpFilter, string divId, string chartId)
br,
Jan
Try to change postData: $.toDictionary(dataToSend) to postData: dataToSend.

Why isn't my jqGrid passing additional form data?

I'm using ASP.Net MVC 4 with a jqGrid, and I'm trying to pass an additional value from the form into the Add and Edit controller methods when jqGrid add/edits a record. My jqGrid looks like this:
$('#jqgRulesSetupVariablesList').jqGrid({
data: JSON.stringify(("#GroupDDL").valueOf()),
contentType: 'application/json; charset=utf-8',
//url from wich data should be requested
url: '#Url.Action("GetRulesSetupVariables")',
ondblClickRow: function (rowid) {
jQuery(this).jqGrid('editGridRow', rowid,
{ url: '#Url.Action("UpdateRulesSetupVariable")', recreateForm: true, closeAfterEdit: true, closeOnEscape: true, reloadAfterSubmit: false });
},
//type of data
datatype: 'json',
//url access method type
mtype: 'POST',
//columns names
colNames: ['ID', 'Name', 'Description', 'Type'],
//columns model
colModel: [
{ name: 'ID', index: 'ID', align: 'left', width: '30px', editable: false, key: true },
{ name: 'Name', index: 'Name', align: 'left', width: '100px', editable: true, edittype: 'text', editoptions: { maxlength: 20 }, editrules: { required: true } },
{ name: 'Description', index: 'Description', align: 'left', width: '260px', editable: true, edittype: 'text', editoptions: { maxlength: 80 }, editrules: { required: true } },
{ name: 'Type', index: 'Type', align: 'left', width: '25px', editable: true, edittype: 'text', editoptions: { maxlength: 1 }, editrules: { required: true } },
],
//pager for grid
pager: $('#jqgRulesSetupVariablesPaging'),
//number of rows per page
rowNum: 10,
//initial sorting column
sortname: 'Name',
//initial sorting direction
sortorder: 'asc',
//we want to display total records count
viewrecords: true,
//grid height
height: 230,
width: 450,
});
$('#jqgRulesSetupVariablesList').jqGrid('navGrid', '#jqgRulesSetupVariablesPaging',
{ add: true, del: false, edit: true, search: false },
// Edit Options
{ url: '#Url.Action("UpdateRulesSetupVariable")', closeAfterEdit: true, closeOnEscape: true, editData: { GroupName: function () { return "ABC"; } } },
// Add Options
{ url: '#Url.Action("InsertRulesSetupVariable")', closeAfterAdd: true, closeOnEscape: true, editData: { GroupName: function () { return "ABC"; } } },
// Delete options
{}
);
My controller is:
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult UpdateRulesSetupVariable(RulesSetupVariableViewModel viewModel, string GroupName)
{
bool updateSuccess = UpdateRulesSetupVariable_Internal(viewModel);
return Json(updateSuccess);
}
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult InsertRulesSetupVariable(RulesSetupVariableViewModel viewModel, string GroupName)
{
bool updateSuccess = UpdateRulesSetupVariable_Internal(viewModel);
return Json(updateSuccess);
}
and my model:
public class RulesSetupVariableViewModel
{
public int ID { get; set; }
public string Name { get; set; }
public string Description { get; set; }
public string Type { get; set; }
}
The ID, Name, Description and Type are all coming through just fine, but the GroupName is not.
Any ideas what I'm doing wrong here?
I figured it out. Dumb mistake. I was using the doubleClick to edit the row. I modified this line
jQuery(this).jqGrid('editGridRow', rowid,
{ url: '#Url.Action("UpdateRulesSetupVariable")',
recreateForm: true,
closeAfterEdit: true,
closeOnEscape: true,
reloadAfterSubmit: false });
},
to this:
jQuery(this).jqGrid('editGridRow', rowid,
{ url: '#Url.Action("UpdateRulesSetupVariable")',
recreateForm: true,
closeAfterEdit: true,
closeOnEscape: true,
reloadAfterSubmit: false,
editData: { GroupName: function () { return $("#GroupDDL").val(); } }
},
This fixed my problem.

Resources