HxListLayout - Override NamedViewsTemplate

[nironixon]

Hi,
First thanks for an awesome library, just started to play with it and so far I think it is great.

I'm wondering if you can guide me how to solve the following problem. I'm using the HxListLayout component and are trying to
override the rendering of the NamedViewsTemplate since I have a very specific design to follow for filtering data.
My approach is to override the rendering as below where I add to switches in the namedviewstemplate. Doing so produces almost
what I want but unfortunately the component renders a drop down icon on top of everything. Please see the screenshot.

1. Is my approach the way to go or should I go down a different route?
2. How can I get rid of the icon?

Best Regards Nicals

<HxListLayout TFilterModel="FilterModelDto" FilterModel="filterModel" FilterModelChanged="HandleFilterModelChanged">
                            <SearchTemplate>
                                <HxInputText Placeholder="Sök efter kontor eller fastighetsmäklare" Type="InputType.Search" @bind-Value="SearchText" CssClass="col-3" />
                            </SearchTemplate>

                            <NamedViewsTemplate>
                                <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
                                    <div class="btn-group" role="group" aria-label="Third group">
                                        <HxInputSwitch Label="Kontor" @bind-Value="filterModel.ShowOffices" CssClass="me-2" />
                                        <HxInputSwitch Label="Fastighetsmäklare" @bind-Value="@filterModel.ShowBrokers" />
                                    </div>
                                </div>                               
                            </NamedViewsTemplate>

                            <DataTemplate>
                                <HxGrid @ref="gridComponent"
                                        ContentNavigationMode="GridContentNavigationMode.Pagination"
                                        Responsive="true"
                                        TItem="EditableCultureInfo"
                                        PageSize="10"
                                        DataProvider="LoadDataItems"
                                        SelectedDataItemChanged="HandleSelectedDataItemChanged">
                                    <Columns>
                                        <HxGridColumn TItem="EditableCultureInfo" HeaderText="ID" ItemTextSelector="@(item => item.LCID.ToString())" SortKeySelector="@(item => item.LCID)" IsDefaultSortColumn="true" />
                                        <HxGridColumn TItem="EditableCultureInfo" HeaderText="Varumärke / Kontor" ItemTextSelector="@(item => item.DisplayName)" SortKeySelector="@(item => item.DisplayName)" />
                                        <HxGridColumn TItem="EditableCultureInfo" HeaderText="Namn" ItemTextSelector="@(item => item.Name)" SortKeySelector="@(item => item.Name)" />
                                    </Columns>
                                </HxGrid>
                            </DataTemplate>
                        </HxListLayout>

[nironixon]

Hi again,
I solved my problem going a different route;
I think I perhaps miss used the NamedViewsTemplate trying to make it do things it wasn't intended for.
Instead I used a much simpler solution as:

<h1>Profiler</h1>

<fieldset class="form-group border p-3">
    <div class="row">
        <div class="col d-flex justify-content-end">
            <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
                <div class="btn-group" role="group" aria-label="Third group">
                    <HxInputSwitch Label="Offices" @bind-Value="ShowOffices" CssClass="me-2"/>
                    <HxInputSwitch Label="Brokers" @bind-Value="ShowBrokers" CssClass="me-5"/>
                </div>
                <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-outline-secondary">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16">
                            <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"></path>
                        </svg>
                        <span class="visually-hidden">Button</span>
                    </button>
                    <button type="button" class="btn btn-sm btn-outline-secondary">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-grid" viewBox="0 0 16 16">
                            <path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/>
                        </svg>
                        <span class="visually-hidden">Button</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <HxGrid @ref="gridComponent"
                    ContentNavigationMode="GridContentNavigationMode.Pagination"
                    Responsive="true"
                    TItem="ProfileViewModel"
                    PageSize="10"
                    DataProvider="GetProfiles"
                    SelectedDataItemChanged="HandleSelectedDataItemChanged">
                <Columns>
                    <HxGridColumn TItem="ProfileViewModel" HeaderText="#" SortKeySelector="@(item => item.ProfileType)">
                        <ItemTemplate>
                            @if (@context.ProfileType == ProfileType.Broker)
                            {
                                <i class="bi bi-person"></i>
                            }
                            else
                            {
                                <i class="bi bi-building"></i>
                            }
                        </ItemTemplate>
                    </HxGridColumn>
                    <HxGridColumn TItem="ProfileViewModel" HeaderText="Varumärke / Kontor" ItemTextSelector="@(item => item.Trademark)" SortKeySelector="@(item => item.Trademark)" IsDefaultSortColumn="true"/>
                    <HxGridColumn TItem="ProfileViewModel" HeaderText="Namn" ItemTextSelector="@(item => item.Name)" SortKeySelector="@(item => item.Name)"/>
                </Columns>
            </HxGrid>
        </div>
    </div>
</fieldset>

@code {
    [Inject]
    protected NavigationManager NavigationManager { get; set; }

    [Inject]
    protected BrokerServiceClient BrokerServiceClient { get; set; }

    HxGrid<ProfileViewModel> gridComponent;

    private string _searchText = string.Empty;
    private bool _showOffices = true;
    private bool _showBrokers = true;

    string SearchText
    {
        get { return _searchText; }
        set
        {
            _searchText = value;
            gridComponent.RefreshDataAsync();
        }
    }

    bool ShowOffices
    {
        get { return _showOffices; }
        set
        {
            _showOffices = value;
            gridComponent.RefreshDataAsync();
        }
    }

    bool ShowBrokers
    {
        get { return _showBrokers; }
        set
        {
            _showBrokers = value;
            gridComponent.RefreshDataAsync();
        }
    }

    private Task HandleSelectedDataItemChanged(ProfileViewModel viewModel)
    {
        if(viewModel.ProfileType == ProfileType.Broker)
        {
            NavigationManager.NavigateTo($"maklarsok/maklare/{viewModel.Id}");
        }
        else
        {
             NavigationManager.NavigateTo($"maklarsok/kontor/{viewModel.Id}");
        }

        return Task.CompletedTask;
    }

    private async Task<GridDataProviderResult<ProfileViewModel>> GetProfiles(GridDataProviderRequest<ProfileViewModel> request)
    {
        var data = await this.BrokerServiceClient.GetProfilesAsync(
            this.SearchText,
            this.ShowOffices,
            this.ShowBrokers,
            CancellationToken.None);

        return request.ApplyTo(data);
    }
}

[hakenr]

Hi,
NamedViews are intended to be used as predefined filters, such as "My items", "All items", "Archived items", etc. In reality, most of the UIs we already implemented are not using NamedViews et al. (https://havit.blazor.eu/components/HxListLayout#NamedViews)

Use SearchTemplate or ActionsTemplate for the other UI components you want to place in the HxListLayout top section.

You might need to adjust the alignment with CSS...