@if (ShowDialog)
{
    <div class="modal fade show d-block" id="exampleModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="titleLabel">@Title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" @onclick="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">


                    <TelerikTreeList Data="@Groups"
                                     IdField="@nameof(SelectedGroup.Id)"
                                     ParentIdField="@nameof(SelectedGroup.ParentId)"
                                     SelectedItems="@SelectedGroups"
                                     FilterMode="@TreeListFilterMode.None">
                        <TreeListColumns>
                            <TreeListColumn Expandable="true" Field="Name" Title="Name" />
                        </TreeListColumns>
                    </TelerikTreeList>


                </div>
            </div>
        </div>
    </div>
}

<style>
    .modal-dialog, .modal-dialog img { /*same value to avoid overwidth*/
        width: 70%;
        height: 90%;
        margin: 15px auto;
        overflow-y: visible;
    }
</style>

<GridColumn Field="MoneyTransferCode" FieldType="@(typeof(int))" Title="نوع انتقال وجه" Width="200px" Groupable="true">
                    <GroupHeaderTemplate>
                        نوع انتقال وجه: @Data.Where(x => x.MoneyTransferCode == int.Parse(context.Value.ToString())).Select(x => x.MoneyTransferCodeName).FirstOrDefault()
                    </GroupHeaderTemplate>
                    <Template>
                        @{
                            var item = context as TermOfTransactionDto;
                            @item.MoneyTransferCodeName
                        }
                    </Template>
                    <EditorTemplate>
                        @{
                            var item = context as TermOfTransactionDto;
                            <TelerikDropDownList Data="@MoneyTransferCodeList"
                                                 ValueField="Value"
                                                 TextField="PersianDisplayName"
                                                 Width="100%"
                                                 @bind-Value="@item.MoneyTransferCode"/>
                        }
                    </EditorTemplate>
                </GridColumn>

<GridColumn Field="MoneyTransferCode" FieldType="@(typeof(int))" Title="نوع انتقال وجه" Width="200px" Groupable="true">
    <FilterMenuTemplate>
        @{
            <div class="filter-values-container">
                @foreach (var country in MoneyTransferCodeList.Select(x => x.PersianDisplayName))
                {
                    <div>
                        <TelerikCheckBox Value="@(GetFilterValues(context.FilterDescriptor).Contains(country))"
                                         ValueChanged="@((bool value) => ColumnValueChanged(value, country, nameof(TermOfTransactionDto.MoneyTransferCode), context.FilterDescriptor))"
                                         Id="@($"country_{country}")">
                        </TelerikCheckBox>
                        <label for="@($"country_{country}")">
                            @country
                        </label>
                    </div>
                }
            </div>
        }
    </FilterMenuTemplate>
    
    
    

    
    <GroupHeaderTemplate>
        نوع انتقال وجه: @Data.Where(x => x.MoneyTransferCode == int.Parse(context.Value.ToString())).Select(x => x.MoneyTransferCodeName).FirstOrDefault()
    </GroupHeaderTemplate>
    <Template>
        @{
            var item = context as TermOfTransactionDto;
            @item.MoneyTransferCodeName
        }
    </Template>
    <EditorTemplate>
        @{
            var item = context as TermOfTransactionDto;
            <TelerikDropDownList Data="@MoneyTransferCodeList"
                                 ValueField="Value"
                                 TextField="PersianDisplayName"
                                 Width="100%"
                                 @bind-Value="@item.MoneyTransferCode"/>
        }
    </EditorTemplate>
</GridColumn> 

public void ColumnValueChanged(bool value, string itemValue, string columnName, CompositeFilterDescriptor filterDescriptor)
{
    var filter = filterDescriptor.FilterDescriptors.FirstOrDefault(f => (f as FilterDescriptor).Value?.ToString() == itemValue);

    int itemValueNumber = MoneyTransferCodeList.First(x => x.PersianDisplayName == itemValue).Value;
    
    filterDescriptor.LogicalOperator = FilterCompositionLogicalOperator.Or;

    if (value && filter == null)
    {
        // var filterDescriptor1 = new FilterDescriptor(columnName, FilterOperator.IsEqualTo, itemValue);
        // filterDescriptor.FilterDescriptors.Add(filterDescriptor1);
        filterDescriptor.FilterDescriptors.Add(new FilterDescriptor(columnName, FilterOperator.IsEqualTo, itemValueNumber));
        
        
    }
    else if (!value && filter != null)
    {
        filterDescriptor.FilterDescriptors.Remove(filter);
    }
}