Hi I’m using the trirand examples for jqgrid subgrid (Trirand example Hierarchy 2 level). In my case the subgrid behaviour is inside a autogenerated javascript function.
When I ‘translated’ the example to my solution (mvc3+razor+entity framework Cf), I get the error ‘object doesn’t support property or method’ in the autogenerated subgrid function. I’m sure this is a simple mistake but i can’t save it… and I hope you can help me.
This is my static View:
@{
ViewBag.Title = "Index";
}
<script type="text/javascript">
function showRolesSubGrid(subgrid_id, row_id) {
// the "showSubGrid_OrdersGrid" function is autogenerated and available globally on the page by the second child grid.
// Calling it will place the child grid below the parent expanded row and will call the action specified by the DaraUrl property
// of the child grid, with ID equal to the ID of the parent expanded row
showSubGrid_RolesSubGrid(subgrid_id, row_id);
}
</script>
<div class="bloque">
<div class="ui-widget">
<h2>Index</h2>
<p>
@Html.ActionLink("Create New", "Create")
</p>
@Html.AntiForgeryToken()
<div>
@Html.Trirand().JQGrid(Model.MenuGrid, "MenuGrid")
@Html.Trirand().JQGrid(Model.RolesSubGrid, "RolesSubGrid")
</div>
@Html.Trirand().JQAutoComplete(
new JQAutoComplete
{
DisplayMode = AutoCompleteDisplayMode.ControlEditor,
DataUrl = Url.Action("AutoCompleteName", "MenuItem")
}, "AutoCompleteName")
@Html.Trirand().JQAutoComplete(
new JQAutoComplete
{
DisplayMode = AutoCompleteDisplayMode.ControlEditor,
DataUrl = Url.Action("AutoCompletePadre", "MenuItem")
}, "AutoCompletePadre")
</div>
</div>
This is my ModelGrid:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Trirand.Web.Mvc;
using System.Web.UI.WebControls;
namespace MVC.Models.Grids
{
public class MenuGridModel
{
public JQGrid MenuGrid { get; set; }
public JQGrid RolesSubGrid { get; set; }
public MenuGridModel()
{
RolesSubGrid = new JQGrid
{
Columns = new List<JQGridColumn>
{
new JQGridColumn { DataField = "RoleID",
HeaderText = "ID",
PrimaryKey = true,
Width = 50 },
new JQGridColumn { DataField = "RoleName" }
},
Width = Unit.Pixel(650),
Height = Unit.Pixel(350)
};
MenuGrid = new JQGrid
{
Columns = new List<JQGridColumn>()
{
new JQGridColumn { DataField = "ID",
// always set PrimaryKey for Add,Edit,Delete operations
// if not set, the first column will be assumed as primary key
PrimaryKey = true,
Editable = false,
Width = 20 },
new JQGridColumn { DataField = "Name",
Editable = true,
Width = 100 },
new JQGridColumn { DataField = "ActionName",
Editable = true,
Width = 100},
new JQGridColumn { DataField = "ControllerName",
Editable = true,
Width = 100 },
new JQGridColumn { DataField = "Url",
Editable = true
},
new JQGridColumn { DataField = "Padre",
Editable = true
}
},
Width = Unit.Percentage(100),
Height = Unit.Percentage(100)
};
MenuGrid.ToolBarSettings.ShowRefreshButton = true;
}
}
}
This is part of my Controller:
...
...
public JsonResult Datos()
{
// instanciar el modelo
var gridModel = new MenuGridModel();
JsonResult verresul;
ConfigGrid(gridModel);
JQGridState gridState = gridModel.MenuGrid.GetState();
Session["gridState"] = gridState;
// devolver un databind según EF
var prueba = GetMenuItem().AsQueryable();
verresul = gridModel.MenuGrid.DataBind(prueba);
return gridModel.MenuGrid.DataBind(GetMenuItem().AsQueryable());
}
// Este método se llama cuando la SUBgrilla requiere datos
public JsonResult DatosRoles(string parentRowID)
{
int menu_padre_id = Convert.ToInt32(parentRowID);
// instanciar el modelo
var gridModel = new MenuGridModel();
ConfigGrid(gridModel);
// devolver un databind según EF
//var Roles = from o in db.aspnetdb_Roles_vw
// where o.RoleId == menu_padre
// select o;
List<List<aspnetdb_Roles_vw>> roles;
//MenuItem pmenu;
roles = (from pmenu in db.MenuItems
where pmenu.Id == menu_padre_id
select pmenu)
.Select(rr => rr.aspnetdb_Roles_vw.ToList()).ToList();
return gridModel.RolesSubGrid.DataBind(roles);
}
...
...
public void ConfigGrid(MenuGridModel modeloGrid)
{
var entidadGrid = modeloGrid.MenuGrid;
var sub1Grid = modeloGrid.RolesSubGrid;
// Personalizar o cambiar algunos comportamientos del modelo
// ID de la grilla, por si hay varias
entidadGrid.ID = "MenuGrid";
// DataUrl mapea el método que devuelve los datos
entidadGrid.DataUrl = Url.Action("Datos");
// EditUrl mapea el método que hace ABM
entidadGrid.EditUrl = Url.Action("ABM");
entidadGrid.ToolBarSettings.ShowEditButton = true;
entidadGrid.ToolBarSettings.ShowAddButton = true;
entidadGrid.ToolBarSettings.ShowDeleteButton = true;
entidadGrid.EditDialogSettings.CloseAfterEditing = true;
entidadGrid.AddDialogSettings.CloseAfterAdding = true;
entidadGrid.MultiSelect = true;
entidadGrid.MultiSelectMode = MultiSelectMode.SelectOnCheckBoxClickOnly;
// SUBgrilla
#region SubGrilla
entidadGrid.ClientSideEvents.SubGridRowExpanded = "showRolesSubGrid";
entidadGrid.HierarchySettings.HierarchyMode = HierarchyMode.Parent;
entidadGrid.HierarchySettings.ReloadOnExpand = Convert.ToBoolean(ViewData["reloadOnExpand"]);
entidadGrid.HierarchySettings.SelectOnExpand = Convert.ToBoolean(ViewData["selectOnExpand"]);
entidadGrid.HierarchySettings.ExpandOnLoad = Convert.ToBoolean(ViewData["expandOnLoad"]);
entidadGrid.HierarchySettings.PlusIcon = Convert.ToString(ViewData["plusIcon"]);
entidadGrid.HierarchySettings.MinusIcon = Convert.ToString(ViewData["minusIcon"]);
entidadGrid.HierarchySettings.OpenIcon = Convert.ToString(ViewData["openIcon"]);
sub1Grid.ID = "RolesGrid";
sub1Grid.DataUrl = Url.Action("DatosRoles");
sub1Grid.HierarchySettings.HierarchyMode = HierarchyMode.Child;
#endregion
...
...
And this is my dynamic generated View with the autogenerated subgrid function:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta charset="utf-8" />
<title>Index</title>
<link href="../../Content/notificaciones.css" rel="stylesheet" type="text/css" />
<script src="../../Content/jquery-ui/js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="../../Content/jquery-ui/js/jquery-ui-1.8.22.custom.min.js" type="text/javascript"></script>
<link href="../../Content/jquery-ui/css/redmond/jquery-ui-1.8.22.custom.css" rel="stylesheet" type="text/css" />
<link href="/Content/openid-shadow.css" rel="stylesheet" type="text/css" />
<link href="/Content/openid.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/openid-jquery.js" type="text/javascript"></script>
<script src="/Scripts/openid-en.js" type="text/javascript"></script>
<script type="text/javascript"> $(document).ready(function () {openid.init('openid_identifier'); }); </script>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<script src="../../Content/jquery-vertical-accordion-menu/js/jquery.cookie.js" type="text/javascript"></script>
<script src="../../Content/jquery-vertical-accordion-menu/js/jquery.hoverIntent.minified.js" type="text/javascript"></script>
<script src="../../Content/jquery-vertical-accordion-menu/js/jquery.dcjqaccordion.2.7.js" type="text/javascript"></script>
<script src="../../Content/jquery-vertical-accordion-menu/js/jquery.dcjqaccordion.2.7.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="../../Content/jquery-vertical-accordion-menu/css/skins/black.css" />
<link rel="stylesheet" type="text/css" href="../../Content/jquery-vertical-accordion-menu/css/dcaccordion.css" />
<link rel="stylesheet" type="text/css" href="../../Content/jquery-vertical-accordion-menu/css/skins/blue.css" />
<link rel="stylesheet" type="text/css" href="../../Content/jquery-vertical-accordion-menu/css/skins/clean.css" />
<link rel="stylesheet" type="text/css" href="../../Content/jquery-vertical-accordion-menu/css/skins/demo.css" />
<link rel="stylesheet" type="text/css" href="../../Content/jquery-vertical-accordion-menu/css/skins/graphite.css" />
<link rel="stylesheet" type="text/css" href="../../Content/jquery-vertical-accordion-menu/css/skins/grey.css" />
<link href="../../Content/jqGrid/css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script src="../../Content/jqGrid/js/i18n/grid.locale-es.js" type="text/javascript"></script>
<script src="../../Content/jqGrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.jqAutoComplete.min.js" type="text/javascript"></script>
<script type="text/javascript" src="../../Content/Flexigrid/js/flexigrid.js"></script>
<link href="../../Content/Flexigrid/css/flexigrid.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/wiltel.js" type="text/javascript"></script>
<script type="text/javascript">
var menuLoaded = false;
$(document).ready(function () {
$.ajax({
url: "/Home/MenuLayout",
type: "GET",
success: function (response, status, xhr)
{
var nvContainer = $('#navcontainer');
nvContainer.html(response);
menuLoaded = true;
},
error: function (XMLHttpRequest, textStatus, errorThrown)
{
var nvContainer = $('#navcontainer');
nvContainer.html(errorThrown);
}
});
});
</script>
</head>
<body>
<div class="container-fluid">
<div id="header" class="row-fluid">
<div class="content-wrapper">
<p class="site-title"><img src="../../Content/images/LOGO1.png" align ="middle" />
WILTEL COMUNICACIONES S.A </p>
</div>
<div class="login" >
<p>
Hola, <a class="username" href="/Account/ChangePassword" title="Change password">WILTEL01\eallasino</a>!
<a href="/Account/LogOff">Log off</a>
</p>
</div>
</div>
</div>
<div id="body">
<div class= "menu1">
<div >
<div id="navcontainer">
</div>
</div>
</div>
<script type="text/javascript">
function showRolesSubGrid(subgrid_id, row_id) {
// the "showSubGrid_OrdersGrid" function is autogenerated and available globally on the page by the second child grid.
// Calling it will place the child grid below the parent expanded row and will call the action specified by the DaraUrl property
// of the child grid, with ID equal to the ID of the parent expanded row
showSubGrid_RolesSubGrid(subgrid_id, row_id);
}
</script>
<div class="bloque">
<div class="ui-widget">
<h2>Index</h2>
<p>
<a href="/MenuItem/Create">Create New</a>
</p>
<input name="__RequestVerificationToken" type="hidden" value="1kCOOa9WHClxCC_hs3GU_kmTYaRTvE2iB1Wk5SLCNp18j3CJv15Kvu9sUrA92qUP-nC9DnXoqx7LoIvMPJMfUoXMFjWjcz0tdZV2VN78MhY4Hcwhv1mv5LXZ58zroMVIX7oXaBsvJFI77wRBC_zs8zP1XpY1" />
<div>
<table id='MenuGrid'></table><div id='MenuGrid_pager'></div><script type='text/javascript'>
jQuery(document).ready(function() {jQuery('#MenuGrid').jqGrid({url: '/MenuItem/Datos?jqGridID=MenuGrid',editurl: '/MenuItem/ABM?jqGridID=MenuGrid&editMode=1',mtype: 'GET',datatype: 'json',page: 1,colNames: ["ID","Name","ActionName","ControllerName","Url","Padre"],colModel: [{"key":true,"searchoptions":{},"index":"ID","width":20,"name":"ID"},{"editable":true,"searchoptions":{dataInit:function(el) {setTimeout(function() {var ec = 'AutoCompleteName';if (typeof(jQuery(el).autocomplete) !== 'function')alert('JQAutoComplete javascript not present on the page. Please, include jquery.jqAutoComplete.min.js');jQuery(el).autocomplete( eval(ec + '_acid') );},200);}},"index":"Name","width":100,"name":"Name"},{"editable":true,"searchoptions":{},"index":"ActionName","width":100,"name":"ActionName"},{"editable":true,"searchoptions":{},"index":"ControllerName","width":100,"name":"ControllerName"},{"editable":true,"index":"Url","searchoptions":{},"name":"Url"},{"editoptions":{"value":"Inicio:Inicio;Acerca de...:Acerca de...;Tipos de Problemas:Tipos de Problemas;Menus:Menus;Usuarios:Usuarios;Áreas:Áreas;Workflow:Workflow;Interfaces:Interfaces;ERP:ERP;Administración:Administración;Prueba2:Prueba2;SubP1:SubP1;Roles:Roles"},"searchoptions":{dataInit:function(el) {setTimeout(function() {var ec = 'AutoCompletePadre';if (typeof(jQuery(el).autocomplete) !== 'function')alert('JQAutoComplete javascript not present on the page. Please, include jquery.jqAutoComplete.min.js');jQuery(el).autocomplete( eval(ec + '_acid') );},200);}},"editable":true,"index":"Padre","name":"Padre","edittype":"select"}],viewrecords: true,scrollrows: false,prmNames: { id: "ID" },headertitles: true,pager: jQuery('#MenuGrid_pager'),subGrid: true,subGridOptions: {},subGridRowExpanded: showRolesSubGrid,loadError: jqGrid_aspnet_loadErrorHandler,hoverrows: false,rowNum: 10,rowList: [10,20,30],editDialogOptions: {"closeAfterEdit":true,"recreateForm":true,errorTextFormat:function(data) { return 'Error: ' + data.responseText },editData:{ __RequestVerificationToken: jQuery('input[name=__RequestVerificationToken]').val() }},addDialogOptions: {"closeAfterAdd":true,"recreateForm":true,errorTextFormat:function(data) { return 'Error: ' + data.responseText },editData:{ __RequestVerificationToken: jQuery('input[name=__RequestVerificationToken]').val() }},delDialogOptions: {"recreateForm":true,errorTextFormat:function(data) { return 'Error: ' + data.responseText },delData:{ __RequestVerificationToken: jQuery('input[name=__RequestVerificationToken]').val() }},searchDialogOptions: {"resize":false,"recreateForm":true},jsonReader: { id: "ID" },sortorder: 'asc',multiselect: true,multiboxonly: true,width: '100%',height: '100%',viewsortcols: [false,'vertical',true]})
.navGrid('#MenuGrid_pager',{"edit":true,"add":true,"del":true,"search":true,"refresh":true,"view":false,"position":"left","cloneToTop":true},jQuery('#MenuGrid').getGridParam('editDialogOptions'),jQuery('#MenuGrid').getGridParam('addDialogOptions'),jQuery('#MenuGrid').getGridParam('delDialogOptions'),jQuery('#MenuGrid').getGridParam('searchDialogOptions') ).bindKeys();
function jqGrid_aspnet_loadErrorHandler(xht, st, handler) {jQuery(document.body).css('font-size','100%'); jQuery(document.body).html(xht.responseText);};jQuery('#MenuGrid').filterToolbar({});});</script>
<table id='RolesSubGrid'></table><div id='RolesSubGrid_pager'></div><script type='text/javascript'>
function showSubGrid_RolesSubGrid(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) jQuery('#'+subgrid_id).append(message);
jQuery('#'+subgrid_id).append('<table id=' + subgrid_table_id + ' class=scroll></table><div id=' + pager_id + ' class=scroll></div>');
jQuery('#' + subgrid_table_id).jqGrid({url: '/MenuItem/DatosRoles?jqGridID=RolesSubGrid&parentRowID=' + row_id + '',editurl: '?jqGridID=RolesSubGrid&editMode=1&parentRowID=' + row_id + '',mtype: 'GET',datatype: 'json',page: 1,colNames: ["ID","RoleName"],colModel: [{"key":true,"searchoptions":{},"index":"RoleID","width":50,"name":"RoleID"},{"index":"RoleName","searchoptions":{},"name":"RoleName"}],viewrecords: true,scrollrows: false,prmNames: { id: "RoleID" },headertitles: true,pager: jQuery('#' + 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: jQuery('input[name=__RequestVerificationToken]').val() }},addDialogOptions: {"recreateForm":true,errorTextFormat:function(data) { return 'Error: ' + data.responseText },editData:{ __RequestVerificationToken: jQuery('input[name=__RequestVerificationToken]').val() }},delDialogOptions: {"recreateForm":true,errorTextFormat:function(data) { return 'Error: ' + data.responseText },delData:{ __RequestVerificationToken: jQuery('input[name=__RequestVerificationToken]').val() }},searchDialogOptions: {"resize":false,"recreateForm":true},jsonReader: { id: "RoleID" },sortorder: 'asc',width: '650',height: '350',viewsortcols: [false,'vertical',true]})
.bindKeys();
function jqGrid_aspnet_loadErrorHandler(xht, st, handler) {jQuery(document.body).css('font-size','100%'); jQuery(document.body).html(xht.responseText);};}</script>
</div>
<script type='text/javascript'>var AutoCompleteName_acid = { id: 'AutoCompleteName',source: '/MenuItem/AutoCompleteName' };</script>
<script type='text/javascript'>var AutoCompletePadre_acid = { id: 'AutoCompletePadre',source: '/MenuItem/AutoCompletePadre' };</script>
</div>
</div>
</div>
<footer>
<div class ="Info">
<h3>INFO/NOVEDADES:</h3>
</div>
</footer>
</body>
</html>
Here is where I get the error:
jQuery('#' + subgrid_table_id).jqGrid({
url: '/MenuItem/DatosRoles?jqGridID=RolesSubGrid&parentRowID=' + row_id + '',
editurl: '?jqGridID=RolesSubGrid&editMode=1&parentRowID=' + row_id + '',
mtype: 'GET',
datatype: 'json',
page: 1,
colNames: ["ID", "RoleName"],
colModel: [{
"key": true,
"searchoptions": {},
"index": "RoleID",
"width": 50,
"name": "RoleID"
}, {
"index": "RoleName",
"searchoptions": {},
"name": "RoleName"
}],
viewrecords: true,
scrollrows: false,
prmNames: {
id: "RoleID"
},
headertitles: true,
pager: jQuery('#' + 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: jQuery('input[name=__RequestVerificationToken]').val()
}
},
addDialogOptions: {
"recreateForm": true,
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
},
editData: {
__RequestVerificationToken: jQuery('input[name=__RequestVerificationToken]').val()
}
},
delDialogOptions: {
"recreateForm": true,
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
},
delData: {
__RequestVerificationToken: jQuery('input[name=__RequestVerificationToken]').val()
}
},
searchDialogOptions: {
"resize": false,
"recreateForm": true
},
jsonReader: {
id: "RoleID"
},
sortorder: 'asc',
width: '650',
height: '350',
viewsortcols: [false, 'vertical', true]
}).bindKeys();
I’ll apreciate any solve direction…
I found the problem, it’s in the javascript set I use to show an accordion menu:
Removing this block from the script then the subgrid shows fine… It seems to be that part of this javascript is resetting the jquery function.