FlexGrid within Tabs

by Manish Gupta

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.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/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.detail.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.odata.min.js"></script>

<div class="container">
  <h2>FlexGrid 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>FlexGrid 1</h3>
      <div id="grid1">	  
	  </div>
    </div>
    <div id="tab2" class="tab-pane fade">
       <h3>FlexGrid 2</h3>
      <div id="grid2">	  
	  </div>
    </div>
  </div>
</div>

JavaScript

$(function(){
$('.nav-tabs a').on('shown.bs.tab', function(e){
        var tabIndex=e.target.hash.match(/\d+$/);
				var grid= wijmo.grid.FlexGrid.getControl('#grid'+tabIndex);				
				grid.invalidate();
    });
	var grid1= new wijmo.grid.FlexGrid("#grid1",{
		isReadOnly: true,
		autoGenerateColumns: false,
		itemsSource: getCategories(),
		columns:[
			{binding:'CategoryName',header:'Category' ,width:'*'},
			{binding:'Description',header:'Description' ,width:'*'}
		]
	});
	var dp1= new wijmo.grid.detail.FlexGridDetailProvider(grid1,{
		isAnimated:true,
		maxHeight:250,
		createDetailCell:function(row){
			var cell= document.createElement('div');
			var detailGrid= new wijmo.grid.FlexGrid(cell,{
				headersVisibility:'Column',
				isReadOnly:true,
				itemsSource:getProducts(row.dataItem.CategoryID),
				loadedRows: function(s, e) {
                    if (s.rows.length) {
                 		  grid1.rows[row.index + 1].height = 250;
                    }
                }
			});
			return cell;
		}
	});
	var grid2= new wijmo.grid.FlexGrid("#grid2",{
		isReadOnly: true,
		autoGenerateColumns: false,
		itemsSource: getCategories(),
		columns:[
			{binding:'CategoryName',header:'Category' ,width:'*'},
			{binding:'Description',header:'Description' ,width:'*'}
		]
	});
	var dp1= new wijmo.grid.detail.FlexGridDetailProvider(grid2,{
		isAnimated:true,
		maxHeight:250,
		createDetailCell:function(row){
			var cell= document.createElement('div');
			var detailGrid= new wijmo.grid.FlexGrid(cell,{
				headersVisibility:'Column',
				isReadOnly:true,
				itemsSource:getProducts(row.dataItem.CategoryID),
				loadedRows: function(s, e) {
                    if (s.rows.length) {
                 		  grid2.rows[row.index + 1].height = 250;
                    }
                }
			});
			return cell;
		}
	});
	function getCategories() {
        var url = 'http://services.odata.org/V4/Northwind/Northwind.svc/';
        return new wijmo.odata.ODataCollectionView(url,...