This is a migrated thread and some comments may be shown as answers.

Clear FilterCellTemplate TelerikComboBox value on Button click

6 Answers 845 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ben
Top achievements
Rank 1
Ben asked on 23 Apr 2021, 06:40 AM

I have a Blazor Telerik Grid with FilterCellTemplate and a TelerikComboBox inside it, I would like to clear the selected value inside the ComboBox on button click

I am trying to create functionality to clear all the filters for a Telerik Grid on a button click event.

TelerikGrid has GridColumn that has FilterCellTemplate which is contains a TelerikComboBox.

 

6 Answers, 1 is accepted

Sort by
0
Accepted
Marin Bratanov
Telerik team
answered on 23 Apr 2021, 06:47 AM

Hi Ben,

The easiest way to reset a grid is to call its .SetState(null) method. You can read more about the grid state in its dedicated article, it opens up a lot of possibilities for your app: https://docs.telerik.com/blazor-ui/components/grid/state.

The combo box itself (or any element in the filter template) will usually have its Value bound to a field in the view-model. If that is not tied directly to the filter descriptors the grid gives you, resetting the state will not reset the input. In such a case, you will need to reset that field in the view-model with your own code, like you would clear any other input that is not in a template.

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Ben
Top achievements
Rank 1
answered on 23 Apr 2021, 04:45 PM

The Combobox is not bound to a view model, I am using the ValueChanged event to update the grids content when the user select the value from the ComboBox.

I was able to reset the grid , but the value inside the combobox does not clear. I am adding a button to the grid toolbar "Clear Filters" , that should clear all the applied filters and clear all the filter values.

 

Here it the definition of the column 

<GridColumn Field="@(nameof(SearchResult.StateName))" Title="State" Filterable="true" Width="100px">
                            <FilterCellTemplate>
                                <TelerikComboBox Data="@Filter.StateFilters"
                                                 Filterable="true"
                                                 FilterOperator="@StringFilterOperator.Contains"
                                                 Width="100%"
                                                 AllowCustom="false"
                                                 
                                                 ValueChanged="@(async (string val) =>
                                                 {
                                                     var filter = context.FilterDescriptor.FilterDescriptors[0] as FilterDescriptor;
                                                     filter.Value = val;

                                                     if (string.IsNullOrEmpty(val))
                                                     {
                                                         await context.ClearFilterAsync();
                                                     }
                                                     else
                                                     {
                                                        await context.FilterAsync();
                                                     }
                                                 })">
                                </TelerikComboBox>
                            </FilterCellTemplate>

                            <Template>
                                @{
                                    var sr = context as SearchResult;
                                    <div class="align-content-center" title="@sr.StateName">
                                        <img class="rounded" width="20" height="20" src="@($"~/../../images/{sr.StateName}.png")" />
                                    </div>
                                }
                            </Template>

                        </GridColumn>

 

 

0
Accepted
Marin Bratanov
Telerik team
answered on 23 Apr 2021, 04:55 PM

Hi Ben,

If you want to control the Value of the combobox programmatically, you must use that parameter and point it to a field in your view-model, so you can change that field and affect the component. This is the way such things are done in Blazor.

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Ben
Top achievements
Rank 1
answered on 23 Apr 2021, 05:07 PM

Thanks for the quick reply,

So I would now have to apply the filters from code , and I would have to do this for other columns as well that have regular filters  ? is there an example for it that I can refer to ?

0
Accepted
Marin Bratanov
Telerik team
answered on 23 Apr 2021, 05:10 PM

Hello Ben,

All you need to do is to use the Value parameter of the combobox, see the third example in the docs of the ValueChanged event: https://docs.telerik.com/blazor-ui/components/combobox/events#valuechanged.

You only need such "extra" code where you want to control the filters through templates, columns that us the built-in filters already have their Value bound to their corresponding filter descriptor in our code so you don't have to do this anywhere else but in places where you want to control the Value.

Regards,
Marin Bratanov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

0
Accepted
Ben
Top achievements
Rank 1
answered on 23 Apr 2021, 06:41 PM

So this is the solution I got.

 

I added a new property string StateFilter {get;set}

The Modified the combobox to  Value="@StateFilter"

and then update theValueChanged Method I have to set the StateFilter to val

ValueChanged="@(async (string val) =>
                                                                 {
                                                                     var filter = context.FilterDescriptor.FilterDescriptors[0] as FilterDescriptor;
                                                                     filter.Value = val;

                                                                     StateFilter = val;
                                                                     if (string.IsNullOrEmpty(val))
                                                                     {
                                                                         await context.ClearFilterAsync();
                                                                     }
                                                                     else
                                                                     {
                                                                         await context.FilterAsync();
                                                                     }
                                                                 })"

 

and then in my code I update the StateFilter = String.Empty; to clear the value in combo box.

 

Thank you

Tags
Grid
Asked by
Ben
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Ben
Top achievements
Rank 1
Share this question
or