[Blazor] Telerik Grid Filter Customizing (1) - Data 컬럼에 최근 1일, 1주, 1달 필터 추가하기

 

이런 식으로 최근 하루, 최근 1주, 최근1달의 필터를 만드는 것이 이번 포스팅의 목표.

최근 1일을 체크하고 Filter를 적용하면 최근 하루 이내에 만들어진 데이터만 필터되고,

최근 1주는 1주일 이내, 최근 1달은 1달 이내의 데이터만 필터돼야 한다.

 

<Telerik Grid 코드>

<TelerikGrid Data="@SourceData">
	<GridColumns>
    	<GridColumn Field="@nameof(V_PART.C_LASTMOD)" Title="LMOD Date" Lockable="true">
            <FilterMenuTemplate>
                @{
                    LMODFilterMenuTemplateContext = context;
                    ExtendLMODFilterDescriptor();
                }
                <label class="filter-label" for="afterDate"> Is After:</label>
                <TelerikDatePicker Id="afterDate" @bind-Value="@LMODAfterRangeDescriptor"></TelerikDatePicker>
                <TelerikDropDownList @bind-Value="@LMODRangeDescriptor.LogicalOperator"
                                     Width="75px" PopupHeight="auto"
                                     TextField="@nameof(FilterLogicalOperatorDescriptor.Text)"
                                     ValueField="@nameof(FilterLogicalOperatorDescriptor.Operator)"
                                     Data="@FilterLogicalOperators">
                </TelerikDropDownList> 
                <label class="filter-label" for="beforeDate"> Is Before:</label>
                <TelerikDatePicker Id="beforeDate" @bind-Value="@LMODBeforeRangeDescriptor"></TelerikDatePicker>
				// 날짜 직접 지정
                
                @foreach (var recentfilterdata in GetFilterList()) //최근 1 day/week/month list
                {
                    <label class="checkbox-label">
                        @if (recentfilterdata.Type == "day") { IsRecentDate = IsRecentDate_day; }
                        else if (recentfilterdata.Type == "week") { IsRecentDate = IsRecentDate_week; }
                        else if (recentfilterdata.Type == "month") { IsRecentDate = IsRecentDate_month; }
                        <TelerikCheckBox Value="@IsRecentDate"
                                         ValueChanged="@((bool value) =>
                                                         {
                                                             if (value)
                                                             {
                                                                 LMODStartDayDescriptor.Value = recentfilterdata.StartDate; //filter 시작날짜
                                                                 currType = recentfilterdata.Type;
                                                                 LMODEndCurrentDayDescriptor.Value = DateTime.Now.Date; //filter 끝날짜
                                                             }
                                                             else
                                                             {
                                                                 LMODStartDayDescriptor.Value = LMODEndCurrentDayDescriptor.Value = null;
                                                             }
                                                         })">
                        </TelerikCheckBox>
                        Recent 1 @recentfilterdata.Type
                    </label>
                }
            </FilterMenuTemplate>
        </GridColumn>
    </GridColumns>
</TelerikGrid>

 

<C# 코드>

@code
{
	public List<FilterLogicalOperatorDescriptor> FilterLogicalOperators { get; set; }
    public FilterMenuTemplateContext LMODFilterMenuTemplateContext { get; set; }
    public CompositeFilterDescriptor LMODCompositeFilterDescriptor => LMODFilterMenuTemplateContext.FilterDescriptor;
    public CompositeFilterDescriptor LMODRangeDescriptor => LMODCompositeFilterDescriptor.FilterDescriptors[0] as CompositeFilterDescriptor;
    public DateTime? LMODBeforeRangeDescriptor
    {
        get => (LMODRangeDescriptor.FilterDescriptors[1] as FilterDescriptor).Value as DateTime?;
        set
        {
            (LMODRangeDescriptor.FilterDescriptors[1] as FilterDescriptor).Value = value;
        }
    }
    public DateTime? LMODAfterRangeDescriptor
    {
        get => (LMODRangeDescriptor.FilterDescriptors[0] as FilterDescriptor).Value as DateTime?;
        set
        {
            (LMODRangeDescriptor.FilterDescriptors[0] as FilterDescriptor).Value = value;
        }
    }

    public List<RecentFilterData> RecentFilterDataList { get; set; }
    public CompositeFilterDescriptor LMODCurrentDayDescriptor => LMODCompositeFilterDescriptor.FilterDescriptors[1] as CompositeFilterDescriptor;
    public FilterDescriptor LMODStartDayDescriptor => LMODCurrentDayDescriptor.FilterDescriptors[0] as FilterDescriptor;
    public FilterDescriptor LMODEndCurrentDayDescriptor => LMODCurrentDayDescriptor.FilterDescriptors[1] as FilterDescriptor;

    public string currType; //최근 1 day/week/month 중 check된 filter의 종류
    public bool IsRecentDate; //최근 며칠 filter check 여부
    public bool IsRecentDate_day => LMODStartDayDescriptor.Value != null && currType == "day";
    //시작날짜가 null이 아니고, currtype이 day일 때 IsRecentDate_day는 true
   	public bool IsRecentDate_week => LMODStartDayDescriptor.Value != null && currType == "week";
    //시작날짜가 null이 아니고, currtype이 week일 때 IsRecentDate_week는 true
    public bool IsRecentDate_month => LMODStartDayDescriptor.Value != null && currType == "month";
    //시작날짜가 null이 아니고, currtype이 month일 때 IsRecentDate_month는 true
    
    
    protected async override void OnInitialized() //초기화 함수
    {
        SourceData = await EnvironmentService.GetPart(); // Get 그리드 data
        FilterLogicalOperators = GetFilterLogicalOperators(); // Get Filter 연산자
    }

    public void ExtendLMODFilterDescriptor()
    {
        if (LMODCompositeFilterDescriptor.FilterDescriptors.Count > 0 && LMODCompositeFilterDescriptor.FilterDescriptors[0] is CompositeFilterDescriptor)
        {
            return;
        }

        LMODCompositeFilterDescriptor.FilterDescriptors.Clear();
        LMODCompositeFilterDescriptor.FilterDescriptors.Add(GetCompositeFilterForDateRange(null, null));
        LMODCompositeFilterDescriptor.FilterDescriptors.Add(GetCompositeFilterForDateRange(null, null));
    }

    public CompositeFilterDescriptor GetCompositeFilterForDateRange(DateTime? start, DateTime? end)
    {
        var firstFilter = new FilterDescriptor(nameof(V_PART.C_LASTMOD), FilterOperator.IsGreaterThanOrEqualTo, start);
        //firstFilter = 시작날짜보다 크거나 같아야 한다
        var secondFilter = new FilterDescriptor(nameof(V_PART.C_LASTMOD), FilterOperator.IsLessThanOrEqualTo, end);
		//secendFilter = 끝날짜보다 작거나 같아야 한다

        var filterDescriptors = new FilterDescriptorCollection();
        filterDescriptors.Add(firstFilter);
        filterDescriptors.Add(secondFilter);
        //filterDescriptors에 시작날짜보다 크거나 같고 끝날짜보다 작거나 같아야 한다는 필터 추가

        return new CompositeFilterDescriptor
        {
            FilterDescriptors = filterDescriptors,
            LogicalOperator = FilterCompositionLogicalOperator.And
            //frilterDescriptors에 추가한 두가지의 필터를 And 연산자로 연결
        };
    }

    public class FilterLogicalOperatorDescriptor
    {
        public string Text { get; set; }
        public FilterCompositionLogicalOperator Operator { get; set; }
    }

    public List<FilterLogicalOperatorDescriptor>
        GetFilterLogicalOperators()
    {
        var data = new List<FilterLogicalOperatorDescriptor>
            ();

        data.Add(new FilterLogicalOperatorDescriptor()
        {
            Text = "Or",
            Operator = FilterCompositionLogicalOperator.Or
        });
        data.Add(new FilterLogicalOperatorDescriptor()
        {
            Text = "And",
            Operator = FilterCompositionLogicalOperator.And
        });

        return data;
    }

    public class RecentFilterData
    {
        public bool IsRecentDate { get; set; }
        public string Type { get; set; }
        public DateTime StartDate { get; set; }

        public RecentFilterData(bool isrecentdata, string type, DateTime startdate)
        {
            IsRecentDate = isrecentdata;
            Type = type;
            StartDate = startdate;
        }
    }

    public List<RecentFilterData> GetFilterList()
    {
        RecentFilterDataList = new List<RecentFilterData>
                    {
                    new RecentFilterData(IsRecentDate, "day", DateTime.Now.Date.AddDays(-1)),
                    new RecentFilterData(IsRecentDate, "week", DateTime.Now.Date.AddDays(-7)),
                    new RecentFilterData(IsRecentDate, "month", DateTime.Now.Date.AddMonths(-1))
                    };

        return RecentFilterDataList;
    }
}
}

 

 

<Reference>

Blazor DataGrid Demos - Custom Filter Menu | Telerik UI for Blazor

reference에는 recent 1 year밖에 없어서

나름 수정에 수정을 거쳐 코드를 완성했다.