jqGrid - Problems opening in jquery tabs (on Firefox and Google Chrome)
- by Ben Hargreaves
I have developed a very simple MVC app to test out trirand's jqGrid for MVC.
The app opens a jqgrid in a jquery tab group and everything is ok with IE. However when I use Firefox jqgrid only opens occasionaly in the first tab (but not under any other tab), and in Chrome my jqgrids dont appear to open under any tab of the group.
I'm a bit of an MVC newbie (and have only been testing jqgrid out for a few days), but I know my users will want to use different browsers. Trirand have not come back with any answer so wondered if anyone else had had a similar issue.
I have really just implemented jqgrid as per the controllers and model in the sample application on the Trirand site, and then combined it with a straightforward jquery tab group.
My MVC Details Page is as follows;
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<PRAMSAPP.Models.Family>" %>
<%@ Import Namespace="Trirand.Web.Mvc" %>
<%@ Import Namespace="PRAMSAPP.Controllers" %>
<%@ Import Namespace="PRAMSAPP.Models" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Details
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="/scripts/jquery-ui-1.7.2.custom.css" />
<script type="text/javascript" src="/scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/scripts/jquery-ui-1.7.2.custom.min.js"></script>
<fieldset>
<legend>Family</legend>
<div class="display-field"><%= Html.Encode(Model.FamilyID) %></div>
<div class="display-field"><%= Html.Encode(Model.FamilySurname) %></div>
</fieldset>
<div id="tabs">
<ul>
<li>
<%= Html.ActionLink("GridChildren", "GridDemo", new { controller = "Grid", id = Model.FamilyID })%>
</li>
<li>
<%= Html.ActionLink("Children", "ShowFamiliesChildren", new { famid = Model.FamilyID, page = Page})%>
</li>
</ul>
</div>
<p>
<%= Html.ActionLink("Edit", "Edit", new { id=Model.FamilyID }) %> |
<%= Html.ActionLink("Back to List", "Index") %>
</p>
<script type="text/javascript">
$(function() { $('#tabs').tabs(); });
</script>
</asp:Content>
And My Controller page is as follows;
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<PRAMSAPP.Models.FamiliesChildrenJqGridModel>" %>
<%@ Import Namespace="Trirand.Web.Mvc" %>
<%@ Import Namespace="PRAMSAPP.Controllers" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- The jQuery UI theme that will be used by the grid -->
<link rel="stylesheet" type="text/css" media="screen" href="/Content/themes/redmond/jquery-ui-1.7.1.custom.css" />
<!-- The Css UI theme extension of jqGrid -->
<link rel="stylesheet" type="text/css" media="screen" href="/Content/themes/ui.jqgrid.css" />
<!-- jQuery library is a prerequisite for jqGrid -->
<script type="text/javascript" src="/Scripts/jquery-1.3.2.min.js"></script>
<!-- language pack - MUST be included before the jqGrid javascript -->
<script type="text/javascript" src="/Scripts/grid.locale-en.js"></script>
<script type="text/javascript" src="/Scripts/jqgrid/jquery.jqGrid.min.js"></script>
</head>
<body>
<div>
<%= Html.Trirand().JQGrid(Model.FamiliesChildrenGrid, "JQGrid1") %>
</div>
</body>
