Flex split container


Usage

To begin use split control with Flexbox model, first of all the new flex container needs to be created:  To the main container add classes d-flex flex-row

  • d-flex - defines flex container.
  • flex-row or flex-column - defines the direction flex items are placed in flex container.

After that, create atleast two child elements. To the one child element add the data-flex-split="position" (available positions: top, bottom, right, left) attribute, which creates a splitter to the passed position. Other container size will be dynamic and grows/shrinks depending on space left.

Also after resize, container's last position is saved to local storage, so splitter will be at the same position for the next time the page is visited.

should be presented in template for this feature to work.
Make sure you add initial height/width property on a container, otherwise your container might be 0px height/width and not visible.

This container width is controlled...

This container width is auto sized with css.

This container width is controlled...

    
        <div class="d-flex flex-row" style="height:200px;">
            <div id="flexSplitLeft" data-flex-split="right" class="overflow-auto" style=" width: 100px;">
                <p>This container width is controlled...<p>
            </div>
            <div class="overflow-auto"> 
                <p>This container width is auto sized with css.<p>
            </div>
            <div id="flexSplitRight" data-flex-split="left" class="overflow-auto" style="width: 200px;"> 
                <p>This container width is controlled...<p>
            </div>
        </div>
    

Integration with data grid2

If data-grid2 grids are added to the containers, after horizontal splitter resizing they automatically be resized. If there are a problems for grid in top container, for grid try using data-resize="#topContainerID" attribute.

To properly resize grids with vertical splitter, on containers use overflow-auto class;

Name Artist i d
Name Members

Here you can add text or an image...

Example: Flex split control with containers
    
<div class="d-flex flex-row" style="height: 500px;">
    <div id="flexSplitLeft" data-flex-split="right" class="overflow-auto" style="width: 300px;">
        <table data-grid2="" class="table" id="gridSongs" data-object-id="dsSongs" data-layout-version="1" data-item-info-text="songs" data-header="Songs" data-resize="#flexSplitLeft" data-no-search="">
            <thead>
                <tr>
                    <th style="width:28px;"></th>
                    <th style="width:150px;" data-sort-by="Name" title="Name ">Name </th>
                    <th style="width:80px;" data-sort-by="ArtistID" title="Artist i d">Artist i d</th>
                    <th style="width:28px" data-column="Action"></th>
                </tr>
                <tr>
                    <td></td>
                    <td data-field-filter2="Name"></td>
                    <td data-field-filter2="ArtistID"></td>
                    <td></td>
                </tr>
            </thead>
            <tbody>
                <tr data-repeat="" data-show-new="">
                    <td data-selection-cell=""></td>
                    <td><input data-field="Name"></td>
                    <td><input data-field="ArtistID"></td>
                    <td data-action-cell=""></td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="d-flex flex-column overflow-auto h-100" >
        <div id="flexSplitBottom" class="overflow-auto;" style=" height: 300px" data-flex-split="bottom"> 
            <table data-grid2="" class="table" id="gridArtists" data-object-id="dsArtists" data-layout-version="1" data-item-info-text="artists" data-header="Artists" data-resize="#flexSplitBottom" data-no-search="">
                <thead>
                    <tr>
                        <th style="width:28px;"></th>
                        <th style="width:150px;" data-sort-by="Name" title="Name ">Name </th>
                        <th style="width:80px;" data-sort-by="Members" title="Members ">Members </th>
                        <th style="width:28px" data-column="Action"></th>
                    </tr>
                    <tr>
                        <td></td>
                        <td data-field-filter2="Name"></td>
                        <td data-field-filter2="Members"></td>
                        <td></td>
                    </tr>
                </thead>
                <tbody>
                    <tr data-repeat="" data-show-new="">
                        <td data-selection-cell=""></td>
                        <td><input data-field="Name"></td>
                        <td><input data-field="Members"></td>
                        <td data-action-cell=""></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="overflow-auto bg-white"> 
            <p>Here you can add text or an image...</p><p>
        </p></div>
    </div>
</div> 
    

Events:

splitID.attachEvent("onSplitResize",function(pParameters){...}); - fired after splitter position is changed.

splitID.attachEvent("onSplitResizeBegin",function(pParameters){...}); - fired before beginning resizing.

splitID.attachEvent("onSplitResizeEnd",function(pParameters){...}); - fired after mouse button is let down and resizing is completed.


Related articles

Placeholder "LocalizeWeb2016" failed