Inserting a menu button in the DataTable Column header

[mesken]

I want to have after each column heder of my DataTable a small button in the form of a downward arrow, and each time a user click on this button, a menu will appear with submenus on which I will be able to do some action (like putting inputext on it, checkboxes, commandLink and so on, for advanced filtering purposes performed on each column).

I have been trying for some days with the components provided by PrimeFaces to cook up something that will look like it. But I could not make it.

Can someone help with some ideas please ?

[mesken]

I tried puting a small menu bar on the column header, but it appears to big and doesn't nice at all. I want something that will be at the same level with the column header and in such a way that on Mouseover, the arrow will appear ready to open the menu.

[porthos]

Have you tried using a MenuButton instead?

[mesken]

Thanks porthos for your answer.
Yes I have tried it. It doesn't appear good at all. Just image a MenuButton with on top of a datatable column header and you know menubutton works only inside a form. It is not manageable at all.

Just to give you a clue of what I want to do, please follow up this link and put the mouse on any column of the Datatable that will appear, you will see a downward arrow, just click on that arrow (But it is not from PrimeFaces, this is Ext Js) http://dev.sencha.com/deploy/ext-4.0.0/ ... local.html

NB: When the link opens, you may wait for few seconds before the grid appears depending on your connection speed

Thanks

[porthos]

Functionally, I think MenuButton does what you need. Yes, you will need to have a form element around it, probably around your entire dataTable.

If you're not happy with the way it looks, why not just copy the styling from the example you gave?

For instance, if you use firebug to look at the styles for the column menu button in your example, you'll see something like the following:

Code: Select all

.x-column-header-over .x-column-header-trigger, .x-column-header-open .x-column-header-trigger {
    display: block;
}
ext-all.css (line 1)
.x-border-box .x-reset, .x-border-box .x-reset * {
    -moz-box-sizing: border-box;
}
ext-all.css (line 1)
.x-column-header-trigger {
    background: url("../../resources/themes/images/default/grid/grid3-hd-btn.gif") no-repeat scroll left center #C3DAF9;
    cursor: pointer;
    display: none;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 14px;
    z-index: 2;
}
ext-all.css (line 1)
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0;
}
ext-all.css (line 1)
Inherited fromdiv#ext-gen1111.x-column-header-inner
.x-column-header-inner {
    line-height: 22px;
    white-space: nowrap;
}
ext-all.css (line 1)
Inherited fromdiv#company.x-unselectable
.x-column-header-align-left {
    text-align: left;
}
ext-all.css (line 1)
.x-column-header {
    border-style: none solid none none;
    font: 11px tahoma,arial,verdana,sans-serif;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

You'll have to look at the styles of its containing element as well to copy the look. It will take a bit of work to integrate with the PF css files, but no reason why you shouldn't if that's the way you like it.

[mesken]

Thanks for your help
Sincerely I don't see from where to start if I have to integrate those style in my application. I want all my app to be the same everywhere. All I know is that it is possible with PrimeFaces also and that is what I want to perform.


Thanks