Welcome Guest Search | Active Topics | Sign In | Register

Essential Objects Product Support Forum » All Products » Support » Combobox inside Grid header

Combobox inside Grid header Options
Previous Topic · Next Topic
Software Administrator
Posted: Friday, January 10, 2014 2:21:11 PM
Rank: Newbie
Groups: Member

Joined: 12/25/2008
Posts: 8
Hi, am trying to insert a java combobox inside the header of the grid, the combobox work find but I have an issue with the dropdown list not overlapping the grid rows. I manage to track it down to the header div generated by the grid that set overflow: hidden style preventing the dropdown to overlap the rows container. Is there a way to change the style use by this div or prevent the grid from setting the this css value?


<div style="position: absolute; left: 1586px; top: 0px; width: 100px; height: 70px; z-index: 1006; overflow: hidden; -moz-user-select: none; cursor: pointer;" id="Grid2_c6">
<div class="ColumnHeaderStyle" eo_position="absolute" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;" id="Grid2_c6_i">
Invoice Date<br>
<div class="FilterBox">
<div style="width: 88px; position: relative; z-index: 10000;" id="selectBox0" class="selectBox">
<input type="text" selectboxoptions="All;Today;Tomorrow;Yesterday;This Week;;Next 7 Days;This Mounth;Last 30 Days;Last 60 Days;Last 90 Days" value="" name="cbInvoiceDateFilter" class="selectBoxInput" style="width: 71px;"><img src="./images/arrow.png" class="selectBoxArrow" id="arrowSelectBox0"><div id="selectBoxOptions0" class="selectBoxOptionContainer" style="width: 88px; display: none; visibility: visible;">
<div class="selectBoxAnOption" style="width: 66px;">All</div>
<div class="selectBoxAnOption" style="width: 66px;">Today</div>
<div class="selectBoxAnOption" style="width: 66px;">Tomorrow</div>
<div class="selectBoxAnOption" style="width: 66px;">Yesterday</div>
<div class="selectBoxAnOption" style="width: 66px;">This Week</div>
<div class="selectBoxAnOption" style="width: 66px;"></div>
<div class="selectBoxAnOption" style="width: 66px;">Next 7 Days</div>
<div class="selectBoxAnOption" style="width: 66px;">This Mounth</div>
<div class="selectBoxAnOption" style="width: 66px;">Last 30 Days</div>
<div class="selectBoxAnOption" style="width: 66px;">Last 60 Days</div>
<div class="selectBoxAnOption" style="width: 66px;">Last 90 Days</div>
</div>
</div>
</div>
</div>
</div>
Back to top
 
eo_support
Posted: Saturday, January 11, 2014 5:51:58 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,196
Hi,

We have looked into the source code and unfortunately the overflow:hidden is hard coded. So there is no way to turn that off. What you can do is to use a ContextMenu control instead of a ComboBox to do the selection it will be something like this:

Code: HTML/ASPX 
<!-- The options should be defined as context menu item -->
<eo:ContextMenu runat="server" id="Menu1" 
    ClientSideOnItemClick="filter_selected"
    ....>
    ....
</eo:ContextMenu>

<!-- The Grid -->
<eo:Grid ...>
    ....
    <Columns>
        ....
        <eo:StaticColumn HeaderText="&lt;div onclick='return select_filter(event);'&gt;header&lt;/div&gt;">
        </eo:StaticColumn>
        ....
    </Columns>
    ....
</eo:Grid>


Code: JavaScript 
//This function is being called when user clicks on the 
//header and it displays the context menu
function select_filter(event)
{
    return eo_ShowContextMenu(event, "Menu1");
}

//This function is being called when user selects an item
//from the context menu
function filter_selected(e, eventInfo)
{
    //Change this line to carry out your filtering process
    alert(eventInfo.getItem().getText());
}


The key is the GridColumn's HeaderText is set to:

<div onclick='return select_filter(event);'>header</div>

Which triggers select_filter JavaScript function when clicked, which displays the context menu.

Hope this helps. Please feel free to let us know if you still have any more questions.

Thanks!
Back to top
 


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.