public JsonResult GridRecords1() { //var records = objInstituteRegistrationBusiness.GridRecords(); ////return Json(records, JsonRequestBehavior.AllowGet); //dynamic obj; //obj = objInstituteRegistrationBusiness.GridRecords(); //DataTable dt = GetDataTableFromObjects(obj); //var javaScriptSerializer = new System.Web.Script.Serialization.JavaScriptSerializer(); //string jsonString = javaScriptSerializer.Serialize(records); //return Json(jsonString, JsonRequestBehavior.AllowGet); var result = new { Json = new { colNames = new[] { "institutionid","institutionname", "displayname", "shortname","supportedfield","schemename","subscriptionto" }, colModels = new[] { new { name= "institutionid", hidden= false, sortable= true, sorttype= "int", formatter= string.Empty, formatoptions = string.Empty }, new { name= "institutionname", hidden= false, sortable= true, sorttype= "string", formatter= string.Empty, formatoptions = string.Empty }, new { name= "displayname", hidden= false, sortable= true, sorttype= "string", formatter= string.Empty, formatoptions = string.Empty }, new { name= "shortname" ,hidden= false, sortable= true, sorttype= "string", formatter= string.Empty, formatoptions = string.Empty }, new { name= "supportedfield",hidden= false, sortable= true, sorttype= "string", formatter= string.Empty, formatoptions = string.Empty }, new { name= "schemename", hidden= false, sortable= true, sorttype= "string", formatter= string.Empty, formatoptions = string.Empty }, new { name= "subscriptionto", hidden= false, sortable= true, sorttype= "string", formatter= "date", formatoptions = "dd/mm/YYYY" } }, data = new { options = new { page = "1", total = "1", records = "1", rows = new[] { new{institutionid=1,institutionname="test",displayname="test",shortname="test",supportedfield="test",schemename="test",subscriptionto="20/11/2014" }, new{institutionid=12,institutionname="test2",displayname="test",shortname="test",supportedfield="test",schemename="test",subscriptionto="15/03/2014" }, new{institutionid=11,institutionname="test3",displayname="test",shortname="test",supportedfield="test",schemename="test",subscriptionto="15/11/2014" }, new{institutionid=10,institutionname="test4",displayname="test",shortname="test",supportedfield="test",schemename="test",subscriptionto="15/11/2014" }, new{institutionid=9,institutionname="test5",displayname="test",shortname="test",supportedfield="test",schemename="test",subscriptionto="15/11/2014" }, new{institutionid=5,institutionname="test6",displayname="test",shortname="test",supportedfield="test",schemename="test",subscriptionto="15/12/2014" }, new{institutionid=3,institutionname="test7",displayname="test",shortname="test",supportedfield="test",schemename="test",subscriptionto="15/01/2014" }, } } } } }; //return Json(result); return Json(result, JsonRequestBehavior.AllowGet); } [Authorize] public ActionResult GridViewInstituteDynamicBinding() { return View(); } View: <script src="../Scripts/jqGrid/i18n/grid.locale-en.js"></script> <table id="list2"> </table> <div id="pager2"></div> <table id="grid-table"></table> <div id="grid-pager"></div> <script type="text/javascript"> $.extend( $.jgrid.search, { closeOnEscape: true, closeAfterSearch: true, //closeAfterReset:true, overlay: 0, Reset: "Reset", Find: "Find" } ); var recordids = new Array(); jQuery(function ($) { var grid_selector = "#grid-table"; var pager_selector = "#grid-pager"; //resize to fit page size $(window).on('resize.jqGrid', function () { $(grid_selector).jqGrid('setGridWidth', $(".page-content").width()); }) //resize on sidebar collapse/expand var parent_column = $(grid_selector).closest('[class*="col-"]'); $(document).on('settings.ace.jqGrid', function (ev, event_name, collapsed) { if (event_name === 'sidebar_collapsed' || event_name === 'main_container_fixed') { //setTimeout is for webkit only to give time for DOM changes and then redraw!!! setTimeout(function () { $(grid_selector).jqGrid('setGridWidth', parent_column.width()); }, 0); } }) var selaArrr = []; jQuery(grid_selector).jqGrid({ //direction: "rtl", //subgrid options subGrid: false, //subGridModel: [{ name : ['No','Item Name','Qty'], width : [55,200,80] }], //datatype: "xml", subGridOptions: { plusicon: "ace-icon fa fa-plus center bigger-110 blue", minusicon: "ace-icon fa fa-minus center bigger-110 blue", openicon: "ace-icon fa fa-chevron-right center orange" }, ///veera multiselect: true, onSelectRow: function (id, status, e) { }, onSelectAll: function (aRowids, status,id,e) { recordids = []; if (status) { //$('#add_grid-table').hide(); //$('#edit_grid-table').hide(); } else { //$('#add_grid-table').show(); //$('#edit_grid-table').show(); } for (var i = 0; i < aRowids.length; i++) { var myGrid = $('#grid-table'), // selectedRowId = myGrid.jqGrid('getGridParam', 'selrow'), cellValue = myGrid.jqGrid('getCell', aRowids[i], 'institutionid'); recordids.push(cellValue); } }, ondblClickRow: function (rowid, iRow, iCol, e) { var myGrid = $('#grid-table'), selectedRowId = myGrid.jqGrid('getGridParam', 'selrow'), cellValue = myGrid.jqGrid('getCell', rowid, 'institutionid'); window.location = "../Ace/EditRecord?rowid=" + cellValue + "&operation=ViewRecord"; }, //for this example we are using local data subGridRowExpanded: function (subgridDivId, rowId) { var subgridTableId = subgridDivId + "_t"; $("#" + subgridDivId).html("<table id='" + subgridTableId + "'></table>"); $("#" + subgridTableId).jqGrid({ datatype: 'json', data: subgrid_data, colNames: ['ID', 'Institution Name', 'Short Name', 'Board of Education', 'Website Address'], colModel: [ { name: 'id', width: 50 }, { name: 'name', width: 150 }, { name: 'qty', width: 50 } ] }); }, url: "../Ace/GridRecords1", datatype: "json", height: 250,
//Here i need to bind the Controller Data,Column model,Column names dynamically But now i have to give colNames: ['ID', 'Institution Name', 'Display Name', 'Short Name', 'Board of Education', 'Scheme Name','Subscription Date'], colModel: [ { name: 'institutionid', hidden: true, sortable: true, sorttype: "int" }, { name: 'institutionname', sortable: true }, { name: 'displayname', sortable: true }, { name: 'shortname' ,sortable: true}, { name: 'supportedfield', sortable: true }, { name: 'schemename', sortable: true }, { name: 'subscriptionto', hidden: true, sortable: true, formatter: "date", formatoptions: { newformat: "d/m/Y" } } ], viewrecords: true, rowNum: 10, height: '350px', loadtext: "Processing pending request data please wait...", rowList: [10, 20, 30], idsOfSelectedRows: [], pager: pager_selector, reloadAfterSubmit:true, altRows: true, sortorder: "ASC", loadonce: true, //toppager: true, multiselect: true, scrollerbar:true, //multikey: "ctrlKey", multiboxonly: true, afterSubmit: function () { $(grid_selector).jqGrid().setGridParam( { datatype: "json", page: 1, url: "GridRecords", } ).trigger("reloadGrid"); }, onSelectRow: function (id, isSelected,status) { var p = this.p, idsOfSelectedRows = p.idsOfSelectedRows, item = p.data[p._index[id]], i = $.inArray(id, idsOfSelectedRows); item.cb = isSelected; if (!isSelected && i >= 0) { idsOfSelectedRows.splice(i, 1); // remove id from the list recordids.splice(i, 1); // remove id from the list if (recordids.length == 1 || recordids.length == 0) { //$('#edit_grid-table').show(); } else { //$('#edit_grid-table').hide(); } if (recordids.length == 0) { //$('#add_grid-table').show(); } else { //$('#add_grid-table').hide(); } } else if (i < 0) { idsOfSelectedRows.push(id); var myGrid = $('#grid-table'), selectedRowId = myGrid.jqGrid('getGridParam', 'selrow'), cellValue = myGrid.jqGrid('getCell', id, 'institutionid'); recordids.push(cellValue); if (recordids.length == 1 || recordids.length == 0) { //$('#edit_grid-table').show(); } else { //$('#edit_grid-table').hide(); } if (recordids.length == 0) { //$('#add_grid-table').show(); } else { //$('#add_grid-table').hide(); } } }, loadComplete: function () { var table = this; setTimeout(function () { styleCheckbox(table); updateActionIcons(table); updatePagerIcons(table); enableTooltips(table); }, 0); }, //editurl: "DeleteRecord",//nothing is saved caption: "Registered Institutes" }); $(window).triggerHandler('resize.jqGrid');//trigger window resize to make the grid get the correct size function aceSwitch(cellvalue, options, cell) { setTimeout(function () { $(cell).find('input[type=checkbox]') .addClass('ace ace-switch ace-switch-5') .after('<span class="lbl"></span>'); }, 0); } //enable datepicker function pickDate(cellvalue, options, cell) { setTimeout(function () { $(cell).find('input[type=text]') .datepicker({ format: 'dd/MM/yyyy', autoclose: true }); }, 0); } //navButtons jQuery(grid_selector).jqGrid('navGrid', pager_selector, { //navbar options edit: true, editicon: 'ace-icon fa fa-pencil blue', add: true, addicon: 'ace-icon fa fa-plus-circle purple', del: true, delicon: 'ace-icon fa fa-trash-o red', search: true, searchicon: 'ace-icon fa fa-search orange', refresh: true, refreshicon: 'ace-icon fa fa-refresh green', view: true, viewicon: 'ace-icon fa fa-search-plus grey', view: true, edit: true, add: true, del: true, view: true, editfunc: function () { var myGrid = $('#grid-table'), selectedRowId = myGrid.jqGrid('getGridParam', 'selrow'), cellValue = myGrid.jqGrid('getCell', selectedRowId, 'institutionid'); window.location = "../Ace/EditRecord?rowid=" + cellValue + "&operation=EditRecord"; }, addfunc: function () { var myGrid = $('#grid-table'), selectedRowId = myGrid.jqGrid('getGridParam', 'selrow'), cellValue = myGrid.jqGrid('getCell', selectedRowId, 'institutionid'); // Add(); window.location = "../Ace/Aceadmin?operation=Addrecord"; }, delfunc: function (id, status, e) { $.alert.open({ type: 'confirm', content: 'Do you want to delete the selected Institute?', callback: function (button) { if (button == 'yes') { $.ajax({ type: "POST", contentType: "application/json; charset=utf-8", data: "{'recordid':'" + recordids + "'}", url: "../Ace/DeleteRecord", dataType: "html", success: function (data) { var msg = jQuery.parseJSON(data); $('.deletealert').html('<button type="button" class="close" data-dismiss="alert">'+'<i class="ace-icon fa fa-times"></i>'+ '</button>'+'<b>Success!</b>' + " " + msg.Message); $('.deletealert').css("display", "block"); window.setTimeout(function () { $('.deletealert').css("display", "none"); }, 5000); $('#edit_grid-table').show(); $('#add_grid-table').show(); $(grid_selector).jqGrid().setGridParam( { datatype: "json", page: 1, url: "GridRecords", } ).trigger("reloadGrid"); recordids.splice(0, recordids.length); }, error: function (xhr, ajaxOptions, thrownError) { //alert(thrownError); $.alert.open({ title: 'Warning', type: 'warning', content: thrownError }); } }); } } }); }, viewfunc: function () { var myGrid = $('#grid-table'), selectedRowId = myGrid.jqGrid('getGridParam', 'selrow'), cellValue = myGrid.jqGrid('getCell', selectedRowId, 'institutionid'); window.location = "../Ace/EditRecord?rowid=" + cellValue + "&operation=ViewRecord"; } }, { recreateForm: false, }, { closeAfterAdd: true, recreateForm: true, viewPagerButtons: false, beforeShowForm: function (e) { var form = $(e[0]); form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar') .wrapInner('<div class="widget-header" />') style_edit_form(form); } }, { //delete record form recreateForm: true, beforeShowForm: function (e) { var form = $(e[0]); if (form.data('styled')) return false; form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />') style_delete_form(form); form.data('styled', true); }, onClick: function (e) { alert(1); } }, { //search form recreateForm: true, afterShowSearch: function (e) { var form = $(e[0]); form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />') style_search_form(form); </script>
Instead of posting the entire code, please point out the code you are having problem.
Hi,
For this requirement, please refer to this links below:
# Jqgrid with dynamic colNames?
http://stackoverflow.com/questions/13452132/jqgrid-with-dynamic-colnames
# Dynamic column genrate jqgrid in asp.net mvc razor
http://feel-tech-evolution.blogspot.jp/2013/07/dynamic-column-genrate-jqgrid-in-aspnet.html
Best Regards
Starain