Telerik grid filter option for dropdown with blazor

Question

Hello I'm working on blazor server side application, I've displayed data into GRID. and I've provided filter for columns wherever needed. We can show/hide filter option with Filterable="true/false" value.

My concern is quite different. I'm having tables named Invoice, Client and ClientGroup

Here Client and ClientGroup tables contains Id/value fields, say dropdown data. And Invoice table have reference of ClientId and ClientGroupId having foreign key reference

I'm displaying Invoice table data into Telerik Grid with blazor

Below is my sample code to display ClientGroup data into Grid but filter option is not working because model have int property.

<GridColumn Field="@(nameof(InvoiceModel.ClientGroupId))" Title="ClientGroup" Width="300px" Filterable="true">

            <Template>
                @{
                    var data = context as InvoiceModel;
                    var clientGroup = StaticData.GetClientGroupName(data.AffilatedGroup);

                    if (data.IsDisplayClientGroupDropdown)
                    {
                        <select class="form-control small-input-financial-view drp-finanz w-100"
                                id="Medienart">
                            @foreach (var item in ClientList)
                            {
                                if (item.ClienGrouptName == clientGroup)
                                {
                                    <option selected value="@item.ClientGroupId">
                                        @item.ClienGrouptName
                                    </option>
                                }
                                else
                                {
                                    <option value="@item.ClientGroupId">
                                        @item.ClienGrouptName
                                    </option>
                                }
                            }
                        </select>
                    }
                    else
                    {
                        if (string.IsNullOrEmpty(clientGroup))
                        {
                            <a href="javascript:;"
                               title="No clientGroup data found"
                               class="maximum-cher-div">
                                No clientGroup data found
                            </a>
                        }
                        else
                        {
                            <a href="javascript:;"
                               title="@clientGroup"
                               class="maximum-cher-div">
                                @clientGroup
                            </a>
                        }

                    }

                }
            </Template>
        </GridColumn>

I did some research for dropdown values filter but I didn't get any appropriate solution. any type of the help would be appreciated.

René René · Accepted Answer · 2020-10-13T06:24:58

If your ClientGroup table does not change at runtime, the easiest way would be to create an enum equivalent for your ClientGroups:

public enum ClientGroupEnum
{
   Group1 = 1,
   Group2 = 2,
   ...
}

In your InvoiceModel you can then use a ClientGroupEnum Property instead of the ClientGroupId Property.

In the grid you can then add the following column:

<GridColumn Field="@(nameof(InvoiceModel.ClientGroupEnum))" Title="ClientGroup" Width="300px" Filterable="true"/>

Then you don't need a Template at all. In the column you will then see the textual representation of the enum value (e.g. Group1) and in the filter you will be able to select a value from a dropdown containing all textual representations of your enum.

If you can't (or don't want to) change the Property of your InvoiceModel you can still make use of the ClientGroupEnum by using the following GridColumn:

<GridColumn Field="@(nameof(InvoiceModel.ClientGroupId))" FieldType="@(typeof(ClientGroupEnum))" Title="ClientGroup" Width="300px" Filterable="true"/>

With the FieldType Parameter you are telling the Grid that the int values shall be treated as Enum values.

If your ClientGroup table does change at runtime you could use a ClientGroupName Property instead of ClientGroupId Property in your InvoiceModel. This means that you can't use the same Invoice Class that represents your Invoice Database Table but you have to use an InvoiceViewModel Class instead and fill it with the appropriate data at runtime. With an InvoiceViewModel class with an ClientGroupName Property you could use the following Column:

<GridColumn Field="@(nameof(InvoiceViewModel.ClientGroupName))" Title="ClientGroup" Width="300px" Filterable="true"/>

You can then use the build in filters such as "contains" or "startsWith" but you won't have a dropdown with valid values.

If you don't want to create a separate ViewModel class or you really need a dropdown, you will have to use Filter Templates as described here. In the Filter Template you could place a dropdown filled with the values of your ClientGroup table.

Telerik grid filter option for dropdown with blazor

1 Answers