How to find which splitter I'm resizing

[rajParticipant]

Hi,

In my page, I used both horizontal and vertical splitter for sectioning. Where I do trigger one function to adjust few UI element positions in custom grid pager when vertical splitter resized.

Following is the approach,

HTML Structure
—————-

<div id="vertSplitter">
    <div id="leftPane">
        <div id="summaryGrid01">
              <!-- Grid comes here  -->
        </div>        
    </div>
    <div id="rightPane">

        <div id="horzSplitter">
             <div id="topPane">
                   <div id="summaryGrid02">
                        <!-- Grid comes here  -->
                   </div> 
             </div>
             <div id="bottomPane">
                  //Details Comes here
             </div>
        </div>

    </div>
</div>

Java Script Code
—————–

$("#vertSplitter").on('resize',function(event){
   customFn(this, event);
});

function customFn(splitterObj, jQXEvent){
    if($(".jqx-splitter-panel:eq(0)", splitterObj).find(".jqx-grid:visible").length>0)
    {
       //Code goes here
    }
    if($(".jqx-splitter-panel:eq(1)", splitterObj).find(".jqx-grid:visible").length>0)
    {
       //Code goes here
    }
}

This re-size event is creating an impact for both the custom paging elements inside the grids.

To resolve this, I want an identifier or an even or a property saying I’m re-sizing the horizontal splitter / vertical splitter.

Can anyone provide me an solution to overcome this issue.

Looking for a reply.

Regards,
Raj

[ivailoParticipant]

Hi raj,

Try to get information about resized elements of each splitter this way:

$('#jqxSplitter').on('resize', 
function (event) {       
    var panels = event.args.panels;
    // get first panel.
    var panel1 = panels[0];
    // get second panel.
    var panel2 = panels[1];
});

Here is the demo.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts