fresh here and fresh in jqgrid .i have some problems about sorting the jqgrid by given column.please give me an example and following is my code .
function gridList() {
var $gridList = $("#gridList1");
$gridList.dataGrid({
mtype: 'Get',
url: '#Url.Action("GetMonthEnrollPlanFinishRateData")',
postData: { },
height: $(window).height() - 128,
colModel: [
{
label: "主键", name: "Id", hidden: true, key: true
},
{ label: '真实姓名', name: 'RealName', width: 150, align: 'left' },
{ label: '本月目标', name: 'CurrentMonthPlan', width: 160, align: 'left'},
{ label: '本月招生', name: 'CurrentMonthFinish', width: 160, align: 'left' },
{ label: '完成率Hidden', name: 'FinishRateHidden', width: 150, align: 'left', hidden: true },
{ label: '完成率', name: 'FinishRate', width: 150, align: 'left' },
{ label: '状态', name: 'Status', width: 150, align: 'left' },
],
pager: '#gridPager1',
viewrecords: true,
//sortname: "CurrentMonthPlan",
//sortorder: "asc",
////pginput: true,
////caption: "",
//sortable: true,
});
}
If you need to sort the grid by FinishRate column, then you should add sortname: "FinishRate" parameter of jqGrid. It will send additional parameter sidx=FinishRate to url: '#Url.Action("GetMonthEnrollPlanFinishRateData")'. By the way, I'm not sure whether you want to use XML or JSON format of data in communication with the server. You should add datatype: "json" if the server ('#Url.Action("GetMonthEnrollPlanFinishRateData")') returns JSON data.
It's important to understand than jqGrid allows you two alternative scenarios: sorting, paging and filtering/searching on the server side or on the client side. If the total number of rows in the grid isn't too large (for example <1000 or <10000), then it's recommended to use client side scenario. You need just add loadonce: true and forceClientSorting: true options to the grid and to return array of all items from the server. jqGrid will automatically sort the data for you. It's important that you can use forceClientSorting: true option only if you use free jqGrid fork.
If you use an old version of jqGrid or not free jqGrid, then you will have to sort the data locally or to use the trick described in the answer.
If you have large number of items in the grid, that you can't use loadonce: true and you will have to sort the data on the server based on the values of sidx and sord parameters (sord describes the sort direction and it has the value "asc" or "desc").
Related
I have a Jqgrid with an editable column and showing Actions column. If i click on edit button, on the row, I can change the value of first column ( cause it is editable ). Then Jqgrid shows two buttons like "save" and "reset". How I can pass the row value to a controller when click on save icon? How generally I catch these buttons and call/send data to a controller?
this is the jqgrid script:
$("#grid").jqGrid({
data: tabledata,
datatype: 'local',
edit:true,
colNames: ['Actions','Name', 'Surname'],
colModel: [
{ name: 'Actions', width: 50, align: 'left', search: false, formatter: 'actions',
formatoptions: { keys: true,editbutton:true}
},
{ name: 'Name', index: 'Name', , editable: true},
{ name: 'Surname', index: 'LoopYears' }
],
pager: $('#gridpager'),
rowNum: 10,
rowList: [10, 20, 30],
sortname: 'id',
sortorder: "desc",
viewrecords: true,
imgpath: 'themes/basic/images',
caption: 'My first grid',
cellEdit: true
});
I'm working on a generic search from an object and his relation objects. I execute a SQL query and display the data dynamically on a grid. The problem that I faced is that my query returns varied Columns (more then 18) and so much data (1474656 records) and when I return the data to display them in the grid an Out Of MemoryException occured. How can I solve this problem?
Your grid needs to either implement a paging solution (fairly easy) or you need to load rows on demand as the user scrolls down (could be a little bit more difficult). Regardless, you should only be loading a small subset of the data as needed for display on the UI.
You tagged Kendo Grid, so I will assume you're using that.
Implementing paging is very easy with Kendo Grid, by setting a page size in the datasource and configuring pageable.
Example
$("#grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: '#Url.Action("MyAction", "Home")'
},
pageSize: 20
},
height: 550,
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
field: "ContactName",
title: "Contact Name",
width: 200
}, {
field: "ContactTitle",
title: "Contact Title"
}, {
field: "CompanyName",
title: "Company Name"
}, {
field: "Country",
width: 150
}]
});
Controller
public JsonResult MyAction([DataSourceRequest]DataSourceRequest request) {
var result = BL.GetYourData();
return Json(result.ToDataSourceResult(request));
}
ToDataSourceResult will apply your paging, so only 20 records will be returned to the client. If your data access is set up properly your SQL Server will also only return 20 records.
I want to display a image in the column of jqgrid for all data I get from '/Index/CaseBatchDetailList'. i have my jquery like,
$(function () {
var outerwidth = $('#TableCaseDtlsView').width();
$("#CaseBatchDetailList").jqGrid({
url: '/Index/CaseBatchDetailList',
datatype: 'json',
mtype: "GET",
colNames: ["Serial Number", "Denomination", "Note Image", "Back Image"],
colModel: [
{ name: "serialno", sortable: true, width: "120px", align: "center" },
{ name: "denomination", sortable: true, width: "120px", align: "left" },
{
name: "frontimageurl", sortable: false, width: "290px", align: "center", fixed: true,
formatter: function () {
return "<img src = /F:/MCP_Images/635101007551068098_324.jpg>";
}
},
{
name: "backimageurl", sortable: false, width: "290px", align: "center", fixed: true,
formatter: function () {
return "<img src = /F:/MCP_Images/635101007551068098_324.jpg>";
}
}
],
...
});
i just tried with the example for img src. I need to display the different images in different columns. As iam the beginner i dont know how to manipulate this.Kindly tell me how to achieve this.
As i saw your comment that you are having the image source in the list, then within your formatter you can do this:
formatter: function (cellvalue, options, rowobject) {
return "<img src='"+cellvalue+"'>";
}
I am constructing a jqgrid with the following code:
$(document).ready(function () {
$("#Data").jqGrid({
url: '/Home/LoadData',
loadonce:true,
datatype: "json",
mtype: "GET",
colNames:["ID"],
colModel: [
{ name: "Id",index:'ID',width:800, align: "center"}
],
pager: "#Pager",
rowNum: '10',
rowList: [10, 20, 30],
sortname: "ID",
sortorder: "asc",
height: "auto",
gridview:true,
sortname: "ID",
viewrecords: true,
caption: "My First Grid",
loadComplete: function (data) {
var $this = $(this),
datatype = $this.getGridParam('datatype');
if (datatype === "xml" || datatype === "json") {
setTimeout(function () {
$this.trigger("reloadGrid");
}, 100);
}
}
});
});
This is working absolutely fine. But, this is all happening in the client side. I am also using loadonce:true to the grid which means the grid loads all the data at once.
But, i am having approx 30,000 records.
loadonce=true
This is not an correct option. So, i need to implement server side sorting and server side paging.
I need to load records like page by page but sorting/Filtering should happen taking into consideration all the records.
Please help in this..if possible please provide code sample for C# code and Jquery script for paging and sorting..
Setup: jqGrid 4.4.1
I have a grid that has worked forever. Something has changed and the data will no longer display in the grid. The grid loads, but sticks with the "Loading..." notice.
There error message is:
Uncaught TypeError: Cannot read property 'stype' of undefined (jquery.jqGrid.src.js:1599)
$.fn.jqGrid.each.addLocalData jquery.jqGrid.src.js:1599
$.fn.jqGrid.each.populate jquery.jqGrid.src.js:1853
(anonymous function) jquery.jqGrid.src.js:2467
f.event.dispatch jquery.min.js:3
f.event.add.h.handle.i jquery.min.js:3
f.event.trigger jquery.min.js:3
(anonymous function) jquery.min.js:3
e.extend.each jquery.min.js:2
e.fn.e.each jquery.min.js:2
f.fn.extend.trigger jquery.min.js:3
$gridManager.addColumnNameToGroupHead gridManager.js:81
$gridManager.setGridOptions gridManager.js:28
$order.showOrders orders.js:112
$.ajax.success orders.js:145
f.Callbacks.o jquery.min.js:2
f.Callbacks.p.fireWith jquery.min.js:2
w jquery.min.js:4
f.support.ajax.f.ajaxTransport.send.d jquery.min.js:4
As far as I can tell, the json strings are valid and correct, the data (and column names) match, and all the stype values are valid.
var searchResultGrid = jQuery("#orderStatus").jqGrid({
datatype: "jsonstring",
datastr: orderData,
jsonReader: { root: 'rows', total: 'total', page: 'page', records: 'records', repeatitems: false, id: 'id' },
colNames: colNames,
colModel: colModel,
rowNum: 5000,
height: $(window).height() - 205,
width: $(window).width()-29,
pagination: true,
pager: '#orderStatusPager',
viewrecords: true,
sortname: 'status',
sortorder: 'desc',
loadonce: true,
sortable: true,
ignoreCase: true,
emptyDataText: "No orders found",
grouping: true,
groupingView: groupingView,
onSelectRow: function (rowId, status) {
{REMOVED FOR CLARITY}
},
loadComplete: function () {
jQuery("#orderStatus").trigger("reloadGrid"); // Call to fix client-side sorting
$gridManager.setGroupingDd("orderStatus", "orderStatusPager", groupCol, ["part_no", "Descript"], "status");
if (orderId) {
jQuery("#orderStatus").setSelection(orderId, true);
}
},
resizeStop: function () { $gridManager.updateGrid("orderStatus", "orderStatusPager"); }
});
I can provide the colNames and colModel if they are relevant to finding the problem.
What would cause this? Or, how do I go about finding the cause?
UPDATE:
Here is the definition for groupingView
groupingView = { groupField: [groupCol], groupColumnShow: [$gridManager.isColumnVisible(groupCol)], groupText: ['<b>{0} - {1} Order(s)</b>'], groupCollapse: false, groupOrder: ['desc'] };
I can see that groupCol has a value of clear, which isn't a column in the json string.
I had a similar problem and found an issue with grouping. You didn't provide details on the definition for 'groupingView' but check there first.
You shouldn't try to group off of columns that aren't in the data. Either remove it, or remove the grouping if the column name doesn't exist.