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.
Related
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.
I'm new to Jquery and JSon and trying to bind the JSON array result to JQGrid.
I can see the JSON result in Controller but not binding in the View.
Please help me on my code. Probably I was missing in the function in the view
This is the function raise when click on button to load results
function LoadOrganisationGrid() {
var predifnedValue = $("#cmdOrgList").val();
jQuery("#gridOrganisation").jqGrid({
url: 'Home/GetOrganisationGridResults?predefinedMatchID=' + predifnedValue,
datatype: "json",
mtype: 'GET',
width: 1030,
height: 275,
colNames: ['Org_MID', 'P_MID', 'Candidate_Detail', 'CompanyName', 'StreetAddress', 'City', 'PostCode', 'Country', 'EmailDomain', 'VATNo', 'IsLinked', 'NotLinked'],
colModel: [
{ name: 'Org_MatchCandidateID', index: 'Org_MatchCandidateID', width: 60 },
{ name: 'PredefinedMatchID', index: 'PredefinedMatchID', width: 50 },
{ name: 'Candidate_Detail', index: 'Candidate_Detail', width: 150 },
{ name: 'CompanyName', index: 'CompanyName', width: 100, align: "right" },
{ name: 'StreetAddress', index: 'StreetAddress', width: 150, align: "right" },
{ name: 'City', index: 'City', width: 50, align: "right" },
{ name: 'PostCode', index: 'PostCode', width: 80, sortable: false },
{ name: 'Country', index: 'Country', width: 60, sortable: false },
{ name: 'EmailDomain', index: 'EmailDomain', width: 100, sortable: false },
{ name: 'VATNo', index: 'VATNo', width: 50, sortable: false },
{ name: 'Count_IsLinked', index: 'Count_IsLinked', width: 90, sortable: false },
{ name: 'Count_NotLinked', index: 'Count_NotLinked', width: 90, sortable: false }
],
rowNum: 10,
rowList: [10, 20, 30],
pager: '#pager5',
sortname: 'id',
viewrecords: true,
sortorder: "desc",
caption: "Organisations Data"
}).navGrid("#pager5", { edit: false, add: false, del: false });
}
And the controller code below
public JsonResult GetOrganisationGridResults(int predefinedMatchID)
{
var result = new SearchTypeModel
{
ListOrganisationType = GetOrgansiationList(SearchTypeService.GetOrganisationType(predefinedMatchID))
};
return Json(result, JsonRequestBehavior.AllowGet);
}
View code below
<table id="gridOrganisation" ></table>
<div id="pager5"></div>
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"];
}
I want to display JQGrid with all column headers but without any data rows when the page loads.
Based upon user selection through autocomplete i want to populate the JqGrid with data.
The problem is that each time during pageload the grid is automatically populated.
How can i get around this ?
This is how i am using the grid with VS2008 MVC2
jQuery('#jgrid').jqGrid({
autowidth: true,
altRows: true,
altclass: 'grdAltRwClr',
datatype: 'xml',
forceFit: true,
gridview: true,
height: 290,
mtype: 'post',
rowList: [10, 20, 30],
rowNum: 10,
pager: '#pager',
pagerpos: 'right',
recordpos: 'left',
rownumbers: false,
scrollrows: false,
sortname: 'roledtlid',
toolbar: [true, "top"],
url: rootPath + 'RoleDetail/JGridData',
beforeSelectRow: function(rowid, e) { return false; },
gridComplete: function() { GridComplete() },
colModel: [
{ name: 'act', label: 'View', resizable: false, search: false, sortable: false, title: false, width: 6, index: 'act' }
, { name: 'roledtlid', label: 'R.Detail id', width: 15, index: 'roledtlid' }
, { name: 'roleid', label: 'Role id', width: 10, index: 'roleid' }
, { name: 'rolename', label: 'Role Name', width: 25, index: 'rolename' }
, { name: 'pageid', label: 'Page ID', width: 10, index: 'pageid' }
, { name: 'pgname', label: 'Page Name', width: 30, index: 'pgname' }
, { name: 'canadd', label: 'Add', width: 10, index: 'canadd' }
, { name: 'canedit', label: 'Edit', width: 10, index: 'canedit' }
, { name: 'candel', label: 'Delete', width: 10, index: 'candel' }
, { name: 'canview', label: 'View', width: 10, index: 'canview' }
]
});
Thanks
Don't provide a url. Instead set your datatype to "local" and use code similar to the following:
var mySearchData = // Get your search data...
$.post('#Url.Action("Getars")', mySearchData, function(gridData) {
var rowIds = $('#carGrid').jqGrid('getDataIDs');
for (var i = 0, len = rowIds.length; i < len; i++) {
var currRow = rowIds[i];
$('#carGrid').jqGrid('delRowData', currRow);
}
$('#carGrid').jqGrid('setGridParam', { data: gridData }).trigger('reloadGrid');
}).error(function (jqXHR, textStatus) {
app.showErrorAlert(jqXHR.responseText);
});
}
I have an Asp.Net MVC app using jqGrid. Can I send the Model that is used to populate a lot of my ui controls(checkboxes, radio buttons, etc) to the server(controler action method). I would like to send this Model to the server instead of reading ui control by ui control. Can this be done?
var myGrid = jQuery("#list").jqGrid({
url: '/Data/GridData/',
datatype: 'json',
mtype: 'POST',
colNames: ['Year', 'Overall %'],
colModel: [
{ name: 'Year', index: 'Year', width: 80, align: 'center' },
{ name: 'overallHarvestPercent', index: 'overallHarvestPercent', width: 80, align: 'center'}],
postData: { contactId: jQuery('#contactId').val() },
pager: jQuery('#pager'),
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'id',
sortorder: "desc",
viewrecords: true,
imgpath: '',
caption: 'Harvest Data Results'
});
Specify your Model as the data type for the Controller Action's Parameter.
public ActionResult Index(MyModel model)
{
// Do stuff
}