0

I'm newer to Blazor controls and SyncFusion. I'm trying to style a grid in an EditForm to allow autocomplete/typeahead.

               <div class="row">
                <div class="col-lg-12">
                    <SfGrid AllowResizing="true"
                            DataSource="@myRequestClass.Items">
                        <GridColumns>
                            <GridColumn Field=@nameof(MyObject.ItemNumber)
                                        HeaderText="Item Number"
                                        Type="ColumnType.String">
                                <Template Context="requestItemNumber">
                                    <BlazoredTypeahead SearchMethod="@SearchResources"
                                                       TValue="Item"
                                                       TItem="Item"
                                                       MinimumLength="2"
                                                       MaximumSuggestions="10"
                                                       Value="selectedResult"
                                                       ValueChanged="SelectedResultChanged"
                                                       ValueExpression="@(() => selectedResult)">
                                        <SelectedTemplate Context="item">
                                            <span>@(item.ItemNumber)</span>
                                        </SelectedTemplate>
                                        <ResultTemplate Context="item">
                                            <span>@(item.ItemNumber)</span>
                                        </ResultTemplate>
                                        <NotFoundTemplate Context="notFoundContext">
                                            Sorry, there weren't any search results.
                                        </NotFoundTemplate>
                                    </BlazoredTypeahead>
                                </Template>
                            </GridColumn>
                        </GridColumns>
                    </SfGrid>
                </div>
            </div>

It comes out looking like this with the results div under or ending at the end of the cell:

Default behaviour

enter image description here

Using inspect, I can change the position of the results div from absolute to relative, and it displays the records I want, but expands the underlying e-gridcontent div.

I'd like to get the result div to float over any other elements below the text box.

M Kenyon II
  • 4,136
  • 4
  • 46
  • 94

0 Answers0