Wijmo 5 - FlexGrid in a Wijmo 3 Splitter

by Troy Taylor

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20142.48.min.css">
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20142.48.min.js"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20142.48.min.js"></script>
<script src="http://cdn.wijmo.com/5.20142.15/controls/wijmo.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20142.15/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.20142.15/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.20142.15/interop/angular/wijmo.angular.min.js"></script>
<script src="http://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<body>
     <h1>
        FlexGrid in a Wijmo 3 Splitter</h1>


    <div> 
                <input type="button" value="Hide Dialog" onclick="$('#dialog').wijdialog('close')" /> 
                <input type="button" value="Show Dialog" onclick="$('#dialog').wijdialog('open')" /> 
                <div id="dialog" title="Basic dialog"> 
                    <p> 
                        This is the default dialog which is useful for displaying information. The dialog 
                        window can be moved, resized and closed with the 'x' icon. 
                    </p> 
                    <div id="comboBox"></div>
                    <input type='text'/>
                </div> 
            </div> 
    <div id="vsplitter" style="height:300px">
        <div id="flex"></div>
        <div>
            <!– second pane in vsplitter–>
            <div id="hsplitter" style="height:100%">
                <div>panel1</div>
                <div>panel2</div>
            </div>
        </div>
    </div>
        
    <h1>
        And in a Wijmo 3 Accordion</h1>
    <div...

JavaScript

$(document).ready(function () {
    
    // create vertical splitter
    $("#vsplitter").wijsplitter({
        orientation: "vertical",
        splitterDistance: 400,
        sized: function () {
            invalidateWijmoControls();
        }
    });

    // create horizontal with panel1 collapsed.
    $("#hsplitter").wijsplitter({
        orientation: "horizontal"
    });

    /* $("#dialog").wijdialog({
        autoOpen: true,
        captionButtons: {
          refresh: { visible: false }
        }
    }); */
		var theData = [
      { name: 'Zero', value: 0 },
      { name: 'Low', value: 10 },
      { name: 'Medium', value: 50 },
      { name: 'High', value: 100 },
      { name: 'Maximum', value: 150 },
    ];

		var combo = new wijmo.input.ComboBox("#comboBox", {
      displayMemberPath: 'name',
      selectedValuePath: 'value',
      itemsSource: theData
    });
    
    
    // create and initialize the FlexGrid in the splitter
    new wijmo.grid.FlexGrid("#flex", {
        autoGenerateColumns: false,
        childItemsPath: "assets",
        allowResizing: "None",
        selectionMode: "Row",
        headersVisibility: "None",
        itemsSource: getAssets(),
        columns: [{
            binding: "description",
            width: "*",
            align: "left"
        }]
    });

    // create the accordion
    $("#accordion").wijaccordion({ 
        header: "h3",
        beforeSelectedIndexChanged : function () {
            invalidateWijmoControls();
        }        
    });
    
    // create FlexGrid controls in the accordion
    var data = [
        {name: 'Joe', age: 12},
        {name: 'Sam', age: 15},
        {name: 'Sue', age: 14}
        ];
    for (var i = 1; i <= 3; i++) {
        var f = new wijmo.grid.FlexGrid("#flex" + i);
        f.itemsSource = data;
    }
    
    // invalidate Wijmo controls on the page
    function invalidateWijmoControls(e) {
        if (!e) e = document.body;
        var ctl = wijmo.Control.getControl(e);
    ...