Hierarchical GridView within Tabs

by Manish Gupta

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20173.128.min.css">
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20173.128.min.js"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20173.128.min.js"></script>
<script src="http://cdn.wijmo.com/interop/wijmo.data.ajax.3.20173.128.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css">

<div class="container">
  <h2>GridView with Tabs (Bootstrap)</h2>
  <p>To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a div element with class .tab-content.</p>

  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#tab1">Grid 1</a></li>
    <li><a data-toggle="tab" href="#tab2">Grid 2</a></li>
      
  </ul>

  <div class="tab-content">
    <div id="tab1" class="tab-pane fade in active">
      <h3>GridView 1</h3>			
       <table id="grid1"></table>  	  
    </div>
    <div id="tab2" class="tab-pane fade">
       <h3>GridView 2</h3>
       <table id="grid2"></table> 
			 
    </div>
  </div>
</div>

JavaScript

$(function () {
            localStorage.clear();
            $('.nav-tabs a').on('shown.bs.tab', function (e) {
                var tabIndex = e.target.hash.match(/\d+$/);
                $("#grid" + tabIndex).wijgrid('doRefresh');
                var details = $("#grid" + tabIndex).wijgrid('details');                
                var expandedDetails = JSON.parse(localStorage.getItem("details" + tabIndex));
                for (var i = 0; i < details.length; i++) {
                    if (expandedDetails[i]) {
                        details[i].expand();
                    }
                }
            });
            $('.nav-tabs a').on('hide.bs.tab', function (e) {
                var tabIndex = e.target.hash.match(/\d+$/);
                var details = $("#grid" + tabIndex).wijgrid('details');                
                var expandedDetails = [];
                for (var i = 0; i < details.length; i++) {                 
                    expandedDetails[i] = details[i].mIsExpanded;
                }
                localStorage.setItem("details" + tabIndex, JSON.stringify(expandedDetails));
            });
            $("#grid1").wijgrid({                
                data: new wijmo.data.ODataView("http://services.odata.org/V2/Northwind/Northwind.svc/Customers", {
                    ajax: { dataType: "jsonp" }
                }),
                columnsAutogenerationMode: "none",
                columns: [
                    { dataKey: "CompanyName", headerText: "Company name" },
                    { dataKey: "ContactName", headerText: "Contact name" }
                ],
                detail: {
                    data: new wijmo.data.ODataView("http://services.odata.org/V2/Northwind/Northwind.svc/Orders", {
                        ajax: { dataType: "jsonp" }
                    }),
                    columnsAutogenerationMode: "none",
                    columns: [
                        { dataKey: "OrderDate", headerText: "Order...