ImGuiSelectableFlags_SpanAllColumns column separator not draggable

[aswerw]

Branch: docking (latest)

The column separator can only be dragged with the very few pixels at the top/bottom of the table.

void
RenderExample()
{
    ImGui::Begin("Foo");

    ImGui::Columns(4, "Bar"); // 4-ways, with border
    ImGui::Separator();
    
    static int selected = -1;

    i32 NumRows = 100;
    for(i32 RowIndex = 0; RowIndex < NumRows; ++RowIndex)
    {
        char CellText[256];
        
        // NOTE: Column #1
        sprintf(CellText, "Cell %02d", (RowIndex * 4) + 0);
        if(ImGui::Selectable(CellText, selected == RowIndex, ImGuiSelectableFlags_SpanAllColumns))
        {
            selected = RowIndex;
        }
        
        ImGui::NextColumn();

        // NOTE: Column #2
        sprintf(CellText, "Cell %02d", (RowIndex * 4) + 1);
        ImGui::Text(CellText, RowIndex); ImGui::NextColumn();

        
        // NOTE: Column #3
        sprintf(CellText, "Cell %02d", (RowIndex * 4) + 2);
        ImGui::Text(CellText, RowIndex); ImGui::NextColumn();

        
        // NOTE: Column #4
        sprintf(CellText, "Cell %02d", (RowIndex * 4) + 3);
        ImGui::Text(CellText, RowIndex); ImGui::NextColumn();
    }

    ImGui::Columns(1);
    ImGui::Separator();

    ImGui::End();
}

[ocornut]

Hello,

I'll try to provide a more detailed answer later, but you should be able to use ImGui::SetAllowOverlap() after the Selectable() item to allow other items (overlapping the selectable) to be interacted with. It would be the same pattern you would use if you had e.g. regular Button() calls instead your columns.

(At the moment I am considering changing the hovering system to actually make this the default behavior in particular for selectable and tree nodes.)

[aswerw]

ImGui::SetItemAllowOverlap() works great, thank you.

[aswerw]

Is there a better way to create a table where each cell can be double clicked but still have the hover and selection rectangles be drawn as a single rectangle (like the code in my first post)?

Not sure if this is related to BeginSelectable and EndSelectable in TODO.txt.

Here is what I have came up with:

void
RenderExample2()
{
    ImGui::Begin("Foo");

    ImGui::Columns(4, "Bar");
    ImGui::Separator();

    static int SelectedRow = -1;
    for(int RowIndex = 0; RowIndex < 100; ++RowIndex)
    {
        char CellText[256];
        
        // NOTE: Column #1
        sprintf(CellText, "Cell %02d", RowIndex*4 + 0);
        if(ImGui::Selectable(CellText, SelectedRow == RowIndex, ImGuiSelectableFlags_SpanAllColumns|ImGuiSelectableFlags_AllowDoubleClick))
        {
            SelectedRow = RowIndex;

            if(ImGui::IsMouseDoubleClicked(0))
            {
                printf("Double click #1\n");
            }
        }
        ImGui::SetItemAllowOverlap();
        ImGui::NextColumn();

        // NOTE: Column #2
        sprintf(CellText, "Cell %02d", RowIndex*4 + 1);
        if(ImGui::Selectable(CellText, false, ImGuiSelectableFlags_AllowDoubleClick))
        {
            SelectedRow = RowIndex;
            
            if(ImGui::IsMouseDoubleClicked(0))
            {
                printf("Double click #2\n");
            }
        }
        ImGui::SetItemAllowOverlap();
        ImGui::NextColumn();
        
        // NOTE: Column #3
        sprintf(CellText, "Cell %02d", RowIndex*4 + 2);
        if(ImGui::Selectable(CellText, false, ImGuiSelectableFlags_AllowDoubleClick))
        {
            SelectedRow = RowIndex;

            if(ImGui::IsMouseDoubleClicked(0))
            {
                printf("Double click #3\n");
            }
        }
        ImGui::SetItemAllowOverlap();
        ImGui::NextColumn();

        // NOTE: Column #4
        sprintf(CellText, "Cell %02d", RowIndex*4 + 3);
        if(ImGui::Selectable(CellText, false, ImGuiSelectableFlags_AllowDoubleClick))
        {
            SelectedRow = RowIndex;
            
            if(ImGui::IsMouseDoubleClicked(0))
            {
                printf("Double click #4\n");
            }
        }
        ImGui::SetItemAllowOverlap();
        ImGui::NextColumn();
    }

    ImGui::Columns(1);
    ImGui::Separator();

    ImGui::End();
}

but there are a couple issues with it: (which I could work around if there is no other way)

1). Seemingly, when hovering a cell a second hover rectangle is drawn on top with a different alpha value. I would be fine with that, but the first column doesn't get that second hover rectangle drawn on top.

Can work around this by doing colors[ImGuiCol_HeaderHovered].w = 1.0f;, which causes them to blend together.

2). Whenever a cell is double clicked, because of ImGuiSelectableFlags_SpanAllColumns, the first column will always be reported as double clicked as well as the cell that was actually double clicked.

[ocornut]

Is there a better way to create a table where each cell can be double clicked but still have the hover and selection rectangles be drawn as a single rectangle (like the code in my first post)?

I'm actually working on columns/table at the moment and took note of this specific request. I believe one way to tackle that is to consider them as different Selectables but manually draw a rectangle covering the whole column. The new system would allow things such as displaying alternating background colors per row (odd/even) so we may as well provide the user will some controls to display selection information on a row-basis.

[ocornut]

Closing this as obsoleted by tables without should have no problem with this.