All geek questions in one place

JqGrid - Issues opening on jquery tabs (in Firefox and Google Chrome)

I developed a very simple MVC application for testing trirand jqGrid for MVC.

The application opens jqgrid in the jquery tab group, and everything is fine with IE. However, when I use Firefox, jqgrid opens only on the first tab (but not under any other tab), and in Chrome my jqgrids do not appear on any tab of the group.

I'm a little new to MVC (and only tested jqgrid for a few days), but I know that my users will want to use different browsers. Trirand did not return with any answer, so he wondered if anyone else had a similar problem.

I really just implemented jqgrid according to the controllers and model in the sample application on the Trirand site, and then combined it with the jQuery direct tab.

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>
+3
source share
1 answer

This is a bit of a blow in the dark since I did not use jqGrid-ASP.NET, but you can try to initialize your grid when the tab is ready, from the showevent tab :

$('#tabs').tabs({
    show: function(event, ui) {
        // Initialize your jqGrid in here
    }
});
0
source

Source: https://habr.com/ru/post/1739317/

More articles:


All Articles