Create Jqgrid pass value from datatable and change column names dynamically - asp.net-mvc-3

Question

I want to create jqgrid by passing value from Datatable as I have multiple tables ,based on that I need to change colomn names dynamically,in asp.net mvc.

Answer 1

Hi after working hard on it finally i have got a solution.
<table id="tableDetails1" cellpadding="0" cellspacing="0">
<tr><td></td></tr></table>
<div id="pager" style="text-align: center"></div>
Jqgrid and javascript function
<script type="text/javascript">
$(document).ready(function () {
// $("#tableDetails1").GridUnload();
CreateColumnDetails();
});
function getData() {
debugger;
$.ajax({
url: '#Url.Action("TableDetails", "TableInfo")',
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (result) {
debugger;
var obj = $.parseJSON(result);
resultData = JSON.parse(result);
$(resultData).each(function (e) {
$("#tableDetails1").addRowData(e, this);
});
}
});
}
function CreateColumnDetails() {
debugger;
$.ajax({
url: '#Url.Action("GetColumnDetails", "TableInfo")',
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (result) {
var colName = JSON.parse(result);
debugger;
var colModels = BuildColumnModel(colName);
$("#tableDetails1").jqGrid({
url: '#Url.Action("GetColumnDetails", "TableInfo")',
datatype: 'json',
colNames: colName,
colModel: colModels
})
}
});
getData();
}
function CreateGrid(result) {
debugger;
$("#tableDetails1").jqGrid({
url: '#Url.Action("TableDetails", "TableInfo")',
datatype: 'json',
mtype: 'Get',
pager: $('#pager'),
rowNum: 5,
gridview: true,
rowList: [5, 10, 20, 30],
height: '100%',
viewrecords: true,
caption: 'Table Details ',
emptyrecords: 'No Records found',
jsonReader: {
root: function (rows) {
debugger;
return typeof rows === "string" ? $.parseJSON(rows) : rows;
},
page: 'page',
total: 'total',
records: 'records',
repeatitems: false,
id: "0"
},
autowidth: true,
multiselect: false,
loadError: function (jqXHR, textStatus, errorThrown) {
debugger;
alert('HTTP status code: ' + jqXHR.status + '\n' +
'textStatus: ' + textStatus + '\n' +
'errorThrown: ' + errorThrown);
alert('HTTP message body (jqXHR.responseText): ' + '\n' + jqXHR.responseText);
}
}).navGrid('pager', { edit: false, add: false, del: false });
}
function BuildColumnModel(result) {
// var uFields = result.split(',');
var uFields = result;
var columns = [];
for (var i = 0; i < uFields.length ; i++) {
if (uFields[i].indexOf('Id') > -1) {
columns.push({ name: uFields[i], index: uFields[i], key: true });
//columns.push({ 'name': name, 'index': name, key: true});
}
// else if (uFields[i].indexOf('Name') > -1) {
else if(uFields[i].length>-1){
columns.push({ name: uFields[i], index: uFields[i]})
// columns.push({ 'name': name, 'index': name });
}
//else if (uFields[i].length > -1) {
// columns.push({ name: uFields[i], index: uFields[i]})
// //columns.push({ 'name': name, 'index': name, key: true });
//}
}
return columns;
}
</script>
Controllers
**Httppost method adding rows dynamically
[HttpPost]
public ActionResult TableDetails(int? id, DataTable dt)
{
dt = new DataTable();
dt = GetTableDetails(id);
JavaScriptSerializer serializer = new JavaScriptSerializer();
List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
Dictionary<string, object> row;
foreach (DataRow dr in dt.Rows)
{
row = new Dictionary<string, object>();
foreach (DataColumn col in dt.Columns)
{
serializer.Serialize(col.ColumnName);
row.Add(col.ColumnName, dr[col]);
}
rows.Add(row);
}
return Json(serializer.Serialize(rows), JsonRequestBehavior.AllowGet);
}
Column Details in string format
[HttpPost]
public ActionResult GetColumnDetails(int ? id, DataTable dt)
{
dt = GetTableDetails(1);
// id = (int)Session["id"] ;
// dt = GetTableDetails(id);
string[] columnNames = dt.Columns.Cast<DataColumn>()
.Select(x => x.ColumnName)
.ToArray();
JavaScriptSerializer serializer = new JavaScriptSerializer();
return Json(serializer.Serialize(columnNames), JsonRequestBehavior.AllowGet);
}