san
san

Reputation: 333

Telerik Blazor MultiSelect FooterTemplate click prevent options popup closing down

I've a telerik multiselect component with FooterTemplate. I need to prevent the dropdown options popup from closing when I click on FooterTemplate. I tried StopPropogation and PreventDefault. None of them are working.. Is there any workaround? Even I tried with FooterClicked event with a boolean variable in the state.. but the problem is, OnMultiSelectClose is being called first before FooterClicked.

<TelerikMultiSelect TItem="string" TValue="string"
                    Class="multiselect-with-data"
                    @bind-Value="@SelectedItems"
                    @ref="@MultiSelectRef"
                    AutoClose="false"
                    Placeholder="Select..."
                    Id="companies"
                    Width="300px"
                    OnRead="@ReadItems"
                    OnOpen="@OnMultiSelectOpen"
                    OnClose="@OnMultiSelectClose"
                    ScrollMode="@DropDownScrollMode.Virtual"
                    ItemHeight="40"
                    PageSize="20"
                    Filterable="true"
                    FilterOperator="@StringFilterOperator.Contains">
    <MultiSelectSettings>
        <MultiSelectPopupSettings Height="300px" />
        
    </MultiSelectSettings>        

    <FooterTemplate>
        @* <div class="multiselect-footer" @onclick="((e)=> FooterClicked(e))">  *@
        <div class="multiselect-footer" @onclick:stopPropagation> 
            <TelerikCheckBox Id="enableGlobalSearch"
                             Value="@IsCheckboxChecked"
                             ValueChanged="@((bool value) => EnableGlobalCheckboxChanged(value))">
            </TelerikCheckBox>
            <label for="enableGlobalSearch" @onclick:stopPropagation>Enable Global Search</label>
        </div>
        
    </FooterTemplate>
</TelerikMultiSelect>
<TelerikCheckBox Id="enableGlobalSearchHidden" Class="hidden"
                 Value="@IsCheckboxCheckedHidden">
</TelerikCheckBox>


private void FooterClicked(MouseEventArgs args)
{
    IsFooterClicked = true;
    Console.WriteLine("FooterClicked");
}    

void OnMultiSelectClose(MultiSelectCloseEventArgs args)
{
    Console.WriteLine(IsFooterClicked);
    if (IsFooterClicked) {      
        args.IsCancelled = true;      
        IsFooterClicked = false;
    }
}  

Upvotes: 0

Views: 81

Answers (0)

Related Questions