Autocomplete cutoff in DataGrid

Blazor WASM
1

If you place an autocomplete control in a grid, the overflow of the grid cuts it off. What is the easiest way to address this?

image
image1811×887 52.9 KB

I have a repro if you want but all I did was download the blazor wasm project set the auto query grid max size to 2 and then add an auto complete to a column.

Short version, in Coupons.razor:

@page "/secure/coupons"
@attribute [Authorize(Roles = "Employee")]

<Breadcrumbs class="mb-8">
    <Breadcrumb>
        Coupons
    </Breadcrumb>
</Breadcrumbs>

<AutoQueryGrid Model="Coupon" Apis="Apis.AutoQuery<QueryCoupons>()" >
    <Columns>
        <Column Field="(Coupon x)=>x.Id" ></Column>
        <Column Field="(Coupon x)=>x.Description" ></Column>
        <Column Field="(Coupon x)=>x.Discount" ></Column>
        <Column Field="(Coupon x)=>x.ExpiryDate"></Column>
        <Column Field="(Coupon x)=>x.Id">
            <Template>
                   <Autocomplete T="String" Options="contacts" @bind-Value="contact" Label="Single Contact"
                        Match="(x, value) => x.Contains(value, StringComparison.OrdinalIgnoreCase)"
                        placeholder="Select Contact">
                        <Item Context="item">
                            <span class="block truncate">@item</span>
                        </Item>
                    </Autocomplete>
            </Template>

        </Column>
    </Columns>    
</AutoQueryGrid>

@code {
    String? contact;
    List<String> contacts = new() { "One", "Two", "Three", "Four", "five", "Six", "Seven", "EIGHT", "Nine" };
}
2

The clipping is part of Tailwind’s DataGrid style, you can try changing the TableStyles to Full With, e.g:

<DataGrid Model="Track" Items=@Track.Results TableStyle="TableStyle.FullWidth" />

Otherwise you can override the Grid4Class property to not include overflow-hidden which will change its appearance, the default Grid styles are in CssDefaults.cs.

1 Like
3

The DataGrid has those Parameters exposed but the AutoQuery does not. Can you expose the GridClass’s up as well?

4

This is now available on the latest v6.5.1+ on MyGet.

1 Like