aiska / jq.grid Goto Github PK
View Code? Open in Web Editor NEWASP.NET MVC JQGrid
ASP.NET MVC JQGrid
Hi Aiska,
I picked up the latest version 1.1.3 and most of it seems to work except for Sub-Grids. The sub-grid Json DataURL method in NOT invoked, when a row is expanded the subgrid is not displayed (no table, header or rows).
I modified your Jq.Grid.Sample retaining the InvoiceHeader model as follows, any help to get this working would be appreciated.
Thanks
MODEL:
public class SubGridExample
{
public JQGrid Grid { get; set; }
public JQGrid SubGrid { get; set; }
public SubGridExample()
{
Grid = new JQGrid()
{
ID = "MainGrid",
Columns = new List<JQGridColumn>()
{
new JQGridColumn()
{
DataField = "id", PrimaryKey = true, Visible = false,
},
new JQGridColumn()
{
DataField = "invdate", HeaderText = "Invoice Date",
DataFormatString = "{0:MM/dd/yyyy}",
},
new JQGridColumn()
{
DataField = "name", HeaderText = "Customer Name",
},
},
};
Grid.ClientSideEvents.SubGridRowExpanded = "OnSubGridRowExpanded";
Grid.HierarchySettings.HierarchyMode = HierarchyMode.Parent;
SubGrid = new JQGrid()
{
ID = "SubGrid",
Columns = new List<JQGridColumn>()
{
new JQGridColumn()
{
DataField = "amount", DataFormatString = "{0:C}",
},
new JQGridColumn()
{
DataField = "tax", DataFormatString = "{0:0.00\\%}",
},
new JQGridColumn()
{
DataField = "total", DataFormatString = "{0:C}",
},
},
};
SubGrid.HierarchySettings.HierarchyMode = HierarchyMode.Child;
}
}
CONTROLLER:
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
JQGridModel<invheader> model = new JQGridModel<invheader>("JsonExample");
model.Grid.DataUrl = Url.Action("Data");
return View(model);
}
[HttpPost]
public JsonResult Data()
{
JQGridModel<invheader> model = new JQGridModel<invheader>();
using (DataContext ctx = new DataContext())
{
return model.Grid.DataBind(ctx.InvoiceHeader.AsQueryable());
}
}
public ActionResult SubGrid()
{
SubGridExample model = new SubGridExample();
model.Grid.DataUrl = Url.Action("MainGridData");
model.SubGrid.DataUrl = Url.Action("SubGridData");
return View(model);
}
[HttpPost]
public JsonResult MainGridData()
{
SubGridExample model = new SubGridExample();
model.Grid.DataUrl = Url.Action("MainGridData");
model.SubGrid.DataUrl = Url.Action("SubGridData");
using (DataContext ctx = new DataContext())
{
return model.Grid.DataBind(ctx.InvoiceHeader.AsQueryable());
}
}
[HttpPost]
public JsonResult SubGridData(string parentRowID)
{
int id = Convert.ToInt32(parentRowID);
SubGridExample model = new SubGridExample();
model.Grid.DataUrl = Url.Action("MainGridData");
model.SubGrid.DataUrl = Url.Action("SubGridData");
using (DataContext ctx = new DataContext())
{
return model.Grid.DataBind(ctx.InvoiceHeader.AsQueryable());
}
}
}
VIEW:
@model Jq.Grid.Sample.Models.SubGridExample
@section Scripts {
@Styles.Render("~/Content/themes/base/css")
@Styles.Render("~/Content/ui.jqgrid.css")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/Scripts/i18n/grid.locale-en.js")
@Scripts.Render("~/Scripts/jquery.jqGrid.src.js")
<!-- The Grid Script client-side javascript -->
@Html.Grid().JQGridScript(Model.Grid)
@Html.Grid().JQGridScript(Model.SubGrid)
}
@{ ViewBag.Title = "SubGrid"; }
@Html.Grid().JQGridPartial(Model.Grid)
@Html.Grid().JQGridPartial(Model.SubGrid)
<p>
@Html.ActionLink("MainGrid Example", "Index")
</p>
<script type="text/javascript">
function OnSubGridRowExpanded(subgrid_id, row_id) {
showSubGrid_SubGrid(subgrid_id, row_id);
}
</script>
RESULT: On expanding first row the sub-grid is empty and Json method
public JsonResult SubGridData(string parentRowID)
is not invoked in debugger
Firebug Subgrid Script
<!-- The Grid Script client-side javascript -->
<script type="text/javascript">
$(document).ready(function() {$('#MainGrid').jqGrid({url: '/Home/MainGridData?jqGridID=MainGrid',mtype: 'POST',datatype: 'json',page: 1,colNames: ["id","Invoice Date","Customer Name"],colModel: [{"searchoptions":{"searchhidden":true},"index":"id","hidden":true,"key":true,"name":"id"},{"width":75,"index":"invdate","searchoptions":{},"name":"invdate"},{"index":"name","searchoptions":{},"name":"name"}],viewrecords: true,scrollrows: false,prmNames: { id: "id" },headertitles: true,autowidth: true,pager: $('#MainGrid_pager'),subGrid: true,subGridOptions: {},subGridRowExpanded: OnSubGridRowExpanded,loadError: jqGrid_aspnet_loadErrorHandler,hoverrows: false,rowNum: 10,rowList: [10,20,30],editDialogOptions: {"recreateForm":true,errorTextFormat:function(data) { return 'Error: ' + data.responseText },editData:{ __RequestVerificationToken: $('input[name=__RequestVerificationToken]').val() }},addDialogOptions: {"recreateForm":true,errorTextFormat:function(data) { return 'Error: ' + data.responseText },editData:{ __RequestVerificationToken: $('input[name=__RequestVerificationToken]').val() }},delDialogOptions: {"recreateForm":true,errorTextFormat:function(data) { return 'Error: ' + data.responseText },delData:{ __RequestVerificationToken: $('input[name=__RequestVerificationToken]').val() }},searchDialogOptions: {"resize":false,"recreateForm":true},jsonReader: { id: "id" },sortorder: 'asc',height: '100%',viewsortcols: [false,'vertical',true]})
.bindKeys();
function jqGrid_aspnet_loadErrorHandler(xht, st, handler) {$(document.body).css('font-size','100%'); $(document.body).html(xht.responseText);};});</script>
<script type="text/javascript">
function showSubGrid_SubGrid(subgrid_id, row_id, message, suffix) {var subgrid_table_id, pager_id;
subgrid_table_id = subgrid_id+'_t';
pager_id = 'p_'+ subgrid_table_id;
if (suffix) { subgrid_table_id += suffix; pager_id += suffix; }
if (message) $('#'+subgrid_id).append(message);
$('#'+subgrid_id).append('<table id=" + subgrid_table_id + " class=scroll></table><div id=" + pager_id + " class=scroll></div>');
$('#' + subgrid_table_id).jqGrid({url: '/Home/SubGridData?jqGridID=SubGrid&parentRowID=' + row_id + '',mtype: 'POST',datatype: 'json',page: 1,colNames: ["amount","tax","total"],colModel: [{"index":"amount","searchoptions":{},"name":"amount"},{"index":"tax","searchoptions":{},"name":"tax"},{"index":"total","searchoptions":{},"name":"total"}],viewrecords: true,scrollrows: false,prmNames: { id: "amount" },headertitles: true,pager: $('#' + pager_id),loadError: jqGrid_aspnet_loadErrorHandler,hoverrows: false,rowNum: 10,rowList: [10,20,30],editDialogOptions: {"recreateForm":true,errorTextFormat:function(data) { return 'Error: ' + data.responseText },editData:{ __RequestVerificationToken: $('input[name=__RequestVerificationToken]').val() }},addDialogOptions: {"recreateForm":true,errorTextFormat:function(data) { return 'Error: ' + data.responseText },editData:{ __RequestVerificationToken: $('input[name=__RequestVerificationToken]').val() }},delDialogOptions: {"recreateForm":true,errorTextFormat:function(data) { return 'Error: ' + data.responseText },delData:{ __RequestVerificationToken: $('input[name=__RequestVerificationToken]').val() }},searchDialogOptions: {"resize":false,"recreateForm":true},jsonReader: { id: "amount" },sortorder: 'asc',viewsortcols: [false,'vertical',true]})
.bindKeys();
function jqGrid_aspnet_loadErrorHandler(xht, st, handler) {$(document.body).css('font-size','100%'); $(document.body).html(xht.responseText);};}</script>
When I download and build the project I get this error:
Error 6 The type or namespace name 'GridColumn' could not be found (are you missing a using directive or an assembly reference?) C:\Temp\VS10 Web\Jq.Grid.Sample\Jq.Grid.Sample\Models\invheader.cs 8 15 Jq.Grid.Sample
It seems to have an issue with "GridColumn"
What am I missing? Jq.Grid.dll?? is that the commercial version?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.