Declined
Last Updated: 19 Oct 2021 21:28 by ADMIN
Zaher
Created on: 19 Oct 2021 10:28
Category: UI for Blazor
Type: Feature Request
0
Is it possible to show handle filtering before apply? Show pop-up modal, and when Confirm, start filtering, othewise cancel!!

Is it possible to show (modal confirmation) handle filtering before apply? Show pop-up modal, and when Confirm, start filtering, othewise cancel!!

3 comments
ADMIN
Marin Bratanov
Posted on: 19 Oct 2021 21:28

Hello Zaher,

To achieve this, you need to:

  1. use the filter template to add your custom button and additional logic
  2. use the grid state to set the desired filtering when the action is confirmed by the user (see the SetState method)
  3. optionally, wait for this feature to be implemented to get control over the built-in filter and cancel buttons (if you are interested in seeing it implemented, click the Vote and Follow buttons)

With this in mind, I am marking this as Declined, because this is a highly specific application UX that is not something the grid can and should do out-of-the-box.

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/.

Zaher
Posted on: 19 Oct 2021 10:48
Only PatientId column has to show modal with confirm before start filtering
Zaher
Posted on: 19 Oct 2021 10:32

        public FilterDescriptor PatientIdFilterDescriptor
            => PatientIdFilterMenuTemplateContext.FilterDescriptor.FilterDescriptors[0] as FilterDescriptor;

        public string PatientDescriptor
        {
            get => (PatientIdFilterDescriptor).Value as string;
            set
            {
                (PatientIdFilterDescriptor).Value = value;
            }
        }

 

                <GridColumn Field="@(nameof(HealthCareClaimSpecificationDTO.PatientId))" Title="Patient Id" FilterMenuType="@FilterMenuType.Menu">
                    <Template>
                        @{
                            var row = context as HealthCareClaimSpecificationDTO;
                            var claimDueDate = row.MaskedPatientId;
                            <span>@row.MaskedPatientId</span>
                        }
                    </Template>
                    <FilterMenuTemplate>
                        @{
                            PatientIdFilterMenuTemplateContext = context;
                        }
                        <label class="filter-modal-margin" for="patientId">Sök:</label>
                        <TelerikTextBox Id="patientId" @bind-Value="@PatientDescriptor"></TelerikTextBox>
                    </FilterMenuTemplate>
                </GridColumn>

 

        protected async Task OnStateChangedHandler(GridStateEventArgs<HealthCareClaimSpecificationDTO> args)
        {
            var gridState = GridRef.GetState();

            if (args.PropertyName == "FilterDescriptors")
            {
                await LogUserAction(gridState);
            }

            await GridHelper.SaveState(HealthCareClaimsGridState, gridState);
        }

 

 

 

        private async Task LogUserAction(GridState<HealthCareClaimSpecificationDTO> gridState)
        {
            foreach (var filterItem in gridState.FilterDescriptors)
            {
                var descriptors = (filterItem as CompositeFilterDescriptor).FilterDescriptors;

                if (descriptors == null || !descriptors.Any())
                {
                    continue;
                }

                if (descriptors.Any())
                {
                    foreach (FilterDescriptor filterDescriptor in descriptors)
                    {

                        if (filterDescriptor.Member.Equals(nameof(HealthCareClaimSpecificationDTO.PatientId)) && filterDescriptor.Value != null)
                        {
                            CurrentPatientId = filterDescriptor.Value.ToString();
                            if (!string.IsNullOrEmpty(CurrentPatientId))
                            {
                                await PDLLogHelper.AddLogAsync(PDLLogActivityType.Read, PDLLogActivityLevel.Overview, filterDescriptor.Value.ToString());
                                Modal.SetVisibility(true);
                                CurrentPatientIdFilterDescriptor = filterDescriptor;
                                await JsInterop.InvokeAsync<object>("resetPatientIdFilterOnEscape", new object[] { DotNetObjectReference.Create(this) });
                            }
                        }
                    }
                }
            }
        }