Button dropdown in column header

joe_bernardes

Hi,
Is possible add button dropdown with any options to column header ?

Thanks,
Joe Bernardes

kthorngren

Yes you can do this. Datatables adds a sorting event handler to the th so you might need to use event.stopPropagation in your event handler to keep from sorting when the button is clicked. Just add the button as you would for a standard table.

If you are having a problem with the options being behind the rows then you might need to use something like z-index to move it to the top. If you need help with this then post a simple test case showing what you have so we can offer specific suggestions.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

joe_bernardes

Hi,
I did as instructed, but I still have a small problem. Menu items still lag behind the grid lines even when changing the display positions to the top.
I disabled the sorting function with the code below.

        $(document).ready(function () {

            var elem = this.getElementById("thEvent");

            var dtTable = $('#tabBody').DataTable({
                paging: false,
                search: false,
                searching: false,
                ordering: false,
                info: false,
                scrollY: (screen.height * 0.6),
                scrollX: true,
                language: {
                    lengthMenu: 'Mostrar _MENU_ registro por pagina',
                    zeroRecords: 'Nenhum registro encontrado, desculpe',
                    info: 'Mostrar pag. _PAGE_ até _PAGES_',
                    infoEmpty: 'Sem qualquer informação',
                    infoFiltered: '(filtrado _MAX_ de um total)',
                }
            });
      });

DotNet Core, part code.

<table id="tabBody" class="table table-sm table-striped table-bordered display nowrap" style="width:100%">

    <thead style="position: sticky;top: 0px;" class="bg-primary text-white">
        <tr>
            <th scope="col" class="bg-primary text-white text-center align-middle"></th>
            <th scope="col" class="bg-primary text-white text-center align-middle">MODAL</th>
            <th scope="col" class="bg-primary text-white text-center align-middle">PE.LAY</th>

            @{
                foreach (var item in Model.fstColumnList.Select((Value, n) => new { n, Value }))
                {
                    <th class="bg-primary text-white text-center" id="thEvent">
                        <div class="form-group col-2">

                                @(item.Value.ColumnLabel)
                                <div class="btn-group dropleft" id="dropdown-menu-@item.n.ToString()">
                                    <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i class="fa fa-cogs" aria-hidden="true"></i>
                                    </button>
                                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                        @if (Model.SectionType == 2)
                                        {
                                            <a class="dropdown-item" asp-controller="FinancialStatementModelSectionAlterColumn" asp-action="AddColumnBefore" asp-route-Section="@item.Value.FinancialStatementSectionID" asp-route-ColumnNumber="@item.Value.ColumnNumber"
                                               asp-route-ModelID="@Model.ModelID" asp-route-SectionType="@Model.SectionType">Adicionar coluna antes</a>
                                            <a class="dropdown-item" asp-controller="FinancialStatementModelSectionAlterColumn" asp-action="AddColumnAfter" asp-route-Section="@item.Value.FinancialStatementSectionID" asp-route-ColumnNumber="@item.Value.ColumnNumber"
                                               asp-route-ModelID="@Model.ModelID" asp-route-SectionType="@Model.SectionType">Adicionar coluna depois</a>
                                            <a class="dropdown-item" asp-controller="FinancialStatementModelSectionAlterColumn" asp-action="DeleteColumn" asp-route-Section="@item.Value.FinancialStatementSectionID" asp-route-ColumnNumber="@item.Value.ColumnNumber"
                                               asp-route-ModelID="@Model.ModelID" asp-route-SectionType="@Model.SectionType">Excluir coluna</a>
                                        }
                                        <a class="dropdown-item" asp-controller="FinancialStatementModelSectionAlterColumn" asp-action="AlterColumnLabel" asp-route-Section="@item.Value.FinancialStatementSectionID" asp-route-ColumnNumber="@item.Value.ColumnNumber"
                                           asp-route-ModelID="@Model.ModelID" asp-route-SectionType="@Model.SectionType">Alterar título</a>
                                    </div>
                                </div>

                        </div>
                    </th>
                }
            }

        </tr>
    </thead>
    .
    .
    .
</table>

Image show the problem.

![](https://datatables.net/forums/uploads/editor/j8/jl4zr6hr12z1.png "")

Could you give me a tip please.
Best regards,
Joe Bernardes

kthorngren

Menu items still lag behind the grid lines even when changing the display positions to the top.

What do you mean by "changing the display positions to the top"?

Maybe you need to use z-index to move the element forward.

Can you post a test case showing the issue so we can help debug?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

joe_bernardes

"What do you mean by "changing the display positions to the top"?"

I meant about the dropdown controls "top, right, bottom and left" item of menu.
I used z-index too and not success.
Let me see how I can show the problem in test case because the page is behind a firewall and cannot be accessed without being authenticated.

kthorngren

We don't care about the data. The problem is with the styling on the page. Start here:
http://live.datatables.net/

Include the styling framework you are using and style the table in the example to show what you have.

Kevin

joe_bernardes

Hi,
Follow an example of a problem.
http://live.datatables.net/debuzeha/2/edit
http://live.datatables.net/debuzeha/2/edit?html,css,js,output

Thank you.

kthorngren

The problem sounds like this same as discussed in this thread. If you remove the scrolling features the dropdown works here:
http://live.datatables.net/debuzeha/2/edit

Allan might be able to provide more details if you still have questions.

Kevin

joe_bernardes

OK,
Thank you Kevin