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
});
Related
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").
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..
i am trying to bind JSON data to jqgrid. But, i am not getting any data.
here, is my code:
$(function () {
$("#list").jqGrid({
url:'<%:Url.Action("LoadData","Home")%>',
datatype: "JSON",
mtype: "GET",
colNames: ["sid","sname"],
colModel: [
{ name: "sid", width: 55,align:"center"},
{ name: "sname", width: 90,align:"center"},
],
jsonReader: {
repeatitems: false
},
pager: "#pager",
rowNum: 10,
rowList: [10, 20, 30],
viewrecords: true,
gridview: true,
autoencode: true,
caption: "My first grid"
});
});
I am using it in Asp.net MVC Application.
I am able to hit the controller and get the JSON data..but i was unsucessful in displaying data to grid.
I am getting proper json o/p from controller.
My Controller is:
public JsonResult LoadData()
{
var Data= new DataTable();
Data= DataModel.LoadData();
var JsonData = JsonConvert.SerializeObject(Packages, Formatting.Indented);
return Json(new
{
JsonData
}, JsonRequestBehavior.AllowGet);
}
I think there is error in my JQgrid jquery code. Firtly, i want to implement the jqgrid with minimal configuration.
The JSON response i am getting is:
[
{
"sid": 2,
"sname": "ABC"
},
{
"sid": 3,
"sname": "XYZ"
},
{
"sid": 4,
"sname": "CBA"
},
{
"sid": 5,
"sname": "IIT"
},
{
"sid": 6,
"sname": "NIT"
}
]
This is my HTML Structure:
<table id="list">
</table>
<div id="pager"></div>
I removed the duplicates from the data i am fetching..
The JSON result, i have checked in Text Visualizer of Visual Studio.Its fine..
Please help..
I suppose that the reason of your problem is the usage of JsonConvert.SerializeObject. You should return object instead of string. Try to use
return Json(Packages, JsonRequestBehavior.AllowGet);
directly.
Not sure you have js code in .js file on in .aspx file.
Anyway try this and check the request/response with Firefox/Chrome console
$(function () {
$("#list").jqGrid({
url:/Home/LoadData/,
datatype: "json",
mtype: "GET",
colNames: ["sid","sname"],
colModel: [
{ name: "sid", width: 55,align:"center"},
{ name: "sname", width: 90,align:"center"},
],
pager: "#pager",
rowNum: 10,
rowList: [10, 20, 30],
viewrecords: true,
gridview: true,
caption: "My first grid"
});
});
HTML
<table id="list"></table>
<div id="pager"></div>
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.