We Keep Coding

ASP.NET MVC jqgrid pass row to controller by row save button

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
});

how to sort the jqgrid by one column

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").

JSON data is not displaying in JQGrid

I have looked at played around with suggestions in all related answers but to no avail. I tried all kinds of options but again to no avail. I am using ASP.NET with C# as the processing language, and Oracle 10g as a database engine.
Here is my .aspx file:
<form id="LocalizationSearch" name="locSearch" defaultbutton="updateButton" runat="server">
<script language="javascript" type="text/javascript">
jQuery(document).ready(function () {
var createLanguageList = function () {
$("#list").jqGrid({
url: "KPHandler.ashx?langname=English",
datatype: "json",
contentType: "application/json; charset=utf-8",
mtype: 'POST',
//datatype: "local",
//data: mydata,
autowidth: true,
height: 150,
colNames: ['DelLanguageID', 'DocRecID', 'LanguageID', 'DocPartNumber,', 'NewLanguage', 'ConcentraIDLang', 'ActFromTranslation'],
colModel: [
{ name: 'DelLanguageID', index: 'DelLanguageID', width: 65, editable: false },
{ name: 'DocRecID', index: 'DocRecID', width: 65, editable: false },
{ name: 'LanguageID', index: 'LanguageID', width: 65, editable: false },
{ name: 'DocPartNmbr', index: 'DocPartNmbr', width: 65, editable: true },
{ name: 'NewLanguage', index: 'NewLanguage', editable: true, edittype: 'checkbox', editoptions: { value: "1:0"} },
{ name: 'ConcentraIDLang', index: 'ConcentraIDLang', width: 65, editable: true },
{ name: 'ActFromTranslation', index: 'ActFromTranslation', width: 120, editable: true }
],
rowNum: 5,
rowList: [10, 20, 30],
pager: '#pager',
sortname: 'DelLanguageID',
viewrecords: true,
//altRows: true,
//sortorder: "desc",
caption: "Deliverable Languages",
//height: "100%",
loadonce: true,
gridview: true,
autoencode: true,
loadError: function (jqXHR, textStatus, errorThrown) {
alert('Error: ' + textStatus + errorThrown + jqXHR.responseText);
}
}); // JQGrid
}; // Create function
$("#btnLanguages").click(function () {
createLanguageList();
});
}); // document ready
</script>
<table cellspacing="1" cellpadding="0" width="100%">
<tr>
<td valign="top">
<table id="list"></table>
<div id="pager"></div>
</td>
</tr>
</table>
<input type="button" id="btnLanguages" value="Work With Languages" />
</form>
and here is my C# code that builds the JSON object:
<%# WebHandler Language="C#" Class="KPHandler" %>
using System;
using System.Web;
using System.Web.Script.Serialization;
using System.Web.Configuration;
using System.Text;
using System.Data;
using System.Collections.Generic;
using System.Configuration;
using System.Data.OracleClient;
public class KPHandler : IHttpHandler
{
private DKCL.ReportDK Rpt = new DKCL.ReportDK();
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "application/json";
System.Collections.Specialized.NameValueCollection forms = context.Request.Form;
string strOperation = forms.Get("oper");
switch (strOperation)
{
case null: // means this is the first time load
string strSQL = "SELECT DelLanguageID, DocRecID, LanguageID, DocPartNmbr, NewLanguage, " +
"ConcentraIDLang, ActFromTranslation FROM DELLANGUAGES WHERE DOCRECID = 18787";
DataTable dlLanguages = Rpt.GetDataTable(strSQL);
context.Response.Write(GetJson(dlLanguages));
break;
default:
break;
} // End Switch
}
// This is generic function that converts DataTable into JSON object.
public string GetJson(DataTable dt)
{
System.Web.Script.Serialization.JavaScriptSerializer serializer = new
System.Web.Script.Serialization.JavaScriptSerializer();
List<Dictionary<string, object>> rows =
new List<Dictionary<string, object>>();
Dictionary<string, object> row = null;
foreach (DataRow dr in dt.Rows)
{
row = new Dictionary<string, object>();
foreach (DataColumn col in dt.Columns)
{
row.Add(col.ColumnName.Trim(), dr[col]);
}
rows.Add(row);
}
return serializer.Serialize(rows);
}
public bool IsReusable
{
get
{
return false;
}
}
}
and here is the JSON data returned by the above code (I actually got this as shown by Fiddler2), and my own debugging the code.:
[{"DELLANGUAGEID":"4613","DOCRECID":"18787","LANGUAGEID":"12","DOCPARTNMBR":null,"NEWLANGUAGE":0,"CONCENTRAIDLANG":"c02609839","ACTFROMTRANSLATION":null},{"DELLANGUAGEID":"4614","DOCRECID":"18787","LANGUAGEID":"34","DOCPARTNMBR":null,"NEWLANGUAGE":0,"CONCENTRAIDLANG":null,"ACTFROMTRANSLATION":null},{"DELLANGUAGEID":"4615","DOCRECID":"18787","LANGUAGEID":"1","DOCPARTNMBR":null,"NEWLANGUAGE":0,"CONCENTRAIDLANG":"c02606925","ACTFROMTRANSLATION":null},{"DELLANGUAGEID":"4616","DOCRECID":"18787","LANGUAGEID":"13","DOCPARTNMBR":null,"NEWLANGUAGE":0,"CONCENTRAIDLANG":"c02609850","ACTFROMTRANSLATION":null},{"DELLANGUAGEID":"4617","DOCRECID":"18787","LANGUAGEID":"11","DOCPARTNMBR":null,"NEWLANGUAGE":0,"CONCENTRAIDLANG":"c02606924","ACTFROMTRANSLATION":null},{"DELLANGUAGEID":"4618","DOCRECID":"18787","LANGUAGEID":"3","DOCPARTNMBR":null,"NEWLANGUAGE":0,"CONCENTRAIDLANG":"c02606920","ACTFROMTRANSLATION":null},{"DELLANGUAGEID":"4619","DOCRECID":"18787","LANGUAGEID":"21","DOCPARTNMBR":null,"NEWLANGUAGE":0,"CONCENTRAIDLANG":null,"ACTFROMTRANSLATION":null},{"DELLANGUAGEID":"39703","DOCRECID":"18787","LANGUAGEID":"142","DOCPARTNMBR":"593957-001","NEWLANGUAGE":0,"CONCENTRAIDLANG":null,"ACTFROMTRANSLATION":null},{"DELLANGUAGEID":"89446","DOCRECID":"18787","LANGUAGEID":"161","DOCPARTNMBR":null,"NEWLANGUAGE":0,"CONCENTRAIDLANG":null,"ACTFROMTRANSLATION":null},{"DELLANGUAGEID":"97174","DOCRECID":"18787","LANGUAGEID":"162","DOCPARTNMBR":null,"NEWLANGUAGE":0,"CONCENTRAIDLANG":null,"ACTFROMTRANSLATION":null},{"DELLANGUAGEID":"112630","DOCRECID":"18787","LANGUAGEID":"164","DOCPARTNMBR":null,"NEWLANGUAGE":0,"CONCENTRAIDLANG":null,"ACTFROMTRANSLATION":null},{"DELLANGUAGEID":"104902","DOCRECID":"18787","LANGUAGEID":"163","DOCPARTNMBR":null,"NEWLANGUAGE":0,"CONCENTRAIDLANG":null,"ACTFROMTRANSLATION":null}]
Any idea what may be going wrong? The grid shows correct number of records and also pages in the pager. Any help will be most appreciated.
By the way, I tried GET vs POST, json vs jsonstring etc. and many other options including JSON Reader, but no luck.

The colModel index property is intended to be an exact reflection of the key in the JSON result. See the documentation:
index: The name passed to the server on which to sort the data (note that we could pass column numbers instead). Typically this is the name (or names) from the database – this is server-side sorting, so what you pass depends on what your server expects to receive.
Given that information it looks like your indexes in the example are incorrectly cased. Try correcting them to the proper case or use a numeric value.
Example:
colModel: [{ name: 'DelLanguageID', index: 'DELLANGUAGEID', width: 65, editable: false },...

Thank you Strake. This was painful for me, but quite educational. It works great now with just changing the ** ColModel**. Thanks again.

Add to javascript array dynamically

I have a javascript file that for a slider that gets imag url's from an array. How can I add image url's from code behind. I want to get the pictures url from database so I want to add images to the array from code behind. I use asp.net c#. the jquery file is like below:
$(function() {
$('#ds_showcase').showcase({
linksOn: 'images',
css: {},
animation: { autoCycle: true, type: 'horizontal-slider', interval: 4000, stopOnHover:true, speed: 1500, easefunction: 'easeOutBounce'},
images: [
{ url: 'Showcase_ds_images/lift-truck.jpg ', description: 'Title 2', link: '', target: '_self' },
{ url: 'Showcase_ds_images/lifttruck2.jpg', description: 'Title 3', link: '', target: '_self' },
{ url: 'Showcase_ds_images/lift-truck3.jpg', description: 'Title 4', link: '', target: '_self' },
],
navigator: { position: 'bottom-right', orientation: 'horizontal', autoHide: false, showNumber: false,
css: { padding: '10px'},
item: { css: { height: '10px', width: '10px', backgroundColor: '#cccccc', borderColor: '#999999'},
cssHover: { backgroundColor: '#3399ff'},
cssSelected: { backgroundColor: '#3399ff', borderColor: '#3399ff'}
}
}
});
});

You can always do something like this:
var jsArr = [];
<%foreach(string img in images){%>
jsArr.push('<%=img%>');
<%}%>
This code will generate the js with hardcoded strings from the server.
The js each client will see will be something like this:
var jsArr = [];
jsArr.push('http://server/img1.png');
jsArr.push('http://server/img2.png');
jsArr.push('http://server/img3.png');
In your case - Something like this:
$(function() {
var jsArr = [];
<%foreach(Image img in images){%>
jsArr.push({url: '<%=img.url%>', description: '<%=img.desc%>', link: '', target:'_self'});
<%}%>
$('#ds_showcase').showcase({
linksOn: 'images',
css: {},
animation: { autoCycle: true, type: 'horizontal-slider', interval: 4000, stopOnHover:true, speed: 1500, easefunction: 'easeOutBounce'},
images: jsArr,
navigator: { position: 'bottom-right', orientation: 'horizontal', autoHide: false, showNumber: false,
css: { padding: '10px'},
item: { css: { height: '10px', width: '10px', backgroundColor: '#cccccc', borderColor: '#999999'},
cssHover: { backgroundColor: '#3399ff'},
cssSelected: { backgroundColor: '#3399ff', borderColor: '#3399ff'}
}
}
});
});

JqGrid is displayed with columns and no json data

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>