Filter for Grid in AdaptiveUI Not Working

[Smith, Miriah]

Hello!

I am trying to use the AdaptiveUI, but the filtering doesn't seem to work properly. We are currently using version 25.1.42. I DID try to set the filtering to a specific type (Excel, Checkbox, etc.), but that made it stop working on desktop mode, so hopefully you have some insight. As you can see, the filtering does show up and the menu is correct. 

However, when I click on these items, nothing happens. The sorting works fine. Here is my code: 

<SfGrid DataSource="@_packages.Items" AllowSorting="true" RowRenderingMode="RowDirection.Vertical" AllowPaging="true" AllowFiltering="true" EnableAdaptiveUI="true" AdaptiveUIMode="AdaptiveMode.Mobile" Toolbar="@ToolbarItems">
	<GridSortSettings>
		<GridSortColumns>
			<GridSortColumn Field="ArrivedDateSnapshot" Direction="SortDirection.Descending" />
		</GridSortColumns>
	</GridSortSettings>
	<GridColumns>
		<GridColumn Field="@nameof(PackageDto.ArrivedDateSnapshot)" HeaderText="Arrived Date" Format="MM/dd/yyyy" Type="ColumnType.Date" Width="150" />
		<GridColumn Field="@nameof(PackageDto.CarrierTrackingNumber)" HeaderText="Tracking #" Width="150">
			<Template>
				@{
					var package = (context as PackageDto);

					@if (package is not null)
					{
						<a class="tracking-link" @onclick="@(() => ViewPackageDetails(package.Id))">@package.CarrierTrackingNumber</a>
					}
				}
			</Template>
		</GridColumn>
		<GridColumn HeaderText="" Width="40" AllowSorting="false" AllowFiltering="false" TextAlign="TextAlign.Center">
			<HeaderTemplate>
				<i class="bi bi-stack" title="Pallet package"></i>
			</HeaderTemplate>
			<Template>
				@{
					var package = (context as PackageDto);

					@if (package?.ParentPackageID > 0)
					{
						<span class="pallet-icon" title="Part of a pallet">
							<i class="bi bi-stack"></i>
						</span>
					}
				}
			</Template>
		</GridColumn>
		<GridColumn Field="@nameof(PackageDto.OwnerPersonName)" HeaderText="To" Width="180" />
		<GridColumn Field="@nameof(PackageDto.VendorName)" HeaderText="From" Width="180" />
		<GridColumn Field="@nameof(PackageDto.PONumber)" HeaderText="PO#" Width="140" />
		<GridColumn HeaderText="Handling" Width="140" AllowSorting="false">
			<Template>
				@{
					var package = (context as PackageDto);
				}

				@if (package != null)
				{
					<div class="handling-icons-container">

						@if (package.IsUrgentDelivery)
						{
							<span class="handling-icon urgent" data-bs-toggle="tooltip" title="Urgent Delivery Required">
								<i class="bi bi-exclamation-triangle"></i>
							</span>
						}

						@switch (package.StorageTemperature)
						{
							case StorageTemperature.Refrigerated:
								<span class="handling-icon refrigerated" data-bs-toggle="tooltip" title="Refrigerated Storage Required">
									<i class="bi bi-thermometer"></i>
								</span>
								break;

							case StorageTemperature.Frozen:
								<span class="handling-icon frozen" data-bs-toggle="tooltip" title="Frozen Storage Required">
									<i class="bi bi-thermometer-snow"></i>
								</span>
								break;
						}
					</div>
				}
			</Template>
		</GridColumn>
		<GridColumn HeaderText="Broken?" Width="80">
			<Template>
				@{
					var package = (context as PackageDto);
				}

				@if (package?.IsBroken == true)
				{
					<span class="text-danger fw-bold">Yes</span>
				}
				else
				{
					<span>No</span>
				}
			</Template>
		</GridColumn>
		<GridColumn Field="@nameof(PackageDto.Status)" HeaderText="Status" Width="140" />
		<GridColumn Field="@nameof(PackageDto.StatusDate)" HeaderText="Status Date" Format="MM/dd/yyyy" Type="ColumnType.Date" Width="150" />
	</GridColumns>
</SfGrid>
​<PackageDetailSlider @ref="_detailSlider" />
​@code {

	private PaginatedData<PackageDto>? _packages;
	private bool _isLoading = true;
	public List<string> ToolbarItems = new List<string>() { "Search" };
	private PackageDetailSlider? _detailSlider;

	protected override async Task OnInitializedAsync()
	{
		await LoadPackagesAsync();
	}

	private async Task LoadPackagesAsync()
	{
		_isLoading = true;

		var query = new PackagesPaginationQuery
		{
			PageNumber = 1,
			PageSize = 20,
			ListView = PackageListView.All,
			OrderBy = nameof(PackageDto.ArrivedDateSnapshot),
			SortDirection = "Descending",
			IsPallet = false
		};

		_packages = await Mediator.Send(query);
		_isLoading = false;
	}

	private async Task ViewPackageDetails(int id)
	{
		if (_detailSlider is not null)
		{
			await _detailSlider.OpenAsync(id);
		}
	}
}

And this is what works for mobile, but on desktop, I can open the filter, and I can change the filter, but I can't click cancel or okay, so the pop up stays, and I cannot remove it. 

		<SfGrid DataSource="@_packages.Items" AllowSorting="true" RowRenderingMode="RowDirection.Vertical" AllowPaging="true" AllowFiltering="true" EnableAdaptiveUI="true" AdaptiveUIMode="AdaptiveMode.Mobile" Toolbar="@ToolbarItems">
			<GridFilterSettings Type="FilterType.Excel"></GridFilterSettings>
			<GridSortSettings>
				<GridSortColumns>
					<GridSortColumn Field="ArrivedDateSnapshot" Direction="SortDirection.Descending" />
				</GridSortColumns>
			</GridSortSettings>
			<GridColumns>
				<GridColumn Field="@nameof(PackageDto.ArrivedDateSnapshot)" HeaderText="Arrived Date" Format="MM/dd/yyyy" Type="ColumnType.Date" Width="150" />
				<GridColumn Field="@nameof(PackageDto.CarrierTrackingNumber)" HeaderText="Tracking #" Width="150">
					<Template>
						@{
							var package = (context as PackageDto);

							@if (package is not null)
							{
								<a class="tracking-link" @onclick="@(() => ViewPackageDetails(package.Id))">@package.CarrierTrackingNumber</a>
							}
						}
					</Template>
				</GridColumn>
				<GridColumn HeaderText="" Width="40" AllowSorting="false" AllowFiltering="false" TextAlign="TextAlign.Center">
					<HeaderTemplate>
						<i class="bi bi-stack" title="Pallet package"></i>
					</HeaderTemplate>
					<Template>
						@{
							var package = (context as PackageDto);

							@if (package?.ParentPackageID > 0)
							{
								<span class="pallet-icon" title="Part of a pallet">
									<i class="bi bi-stack"></i>
								</span>
							}
						}
					</Template>
				</GridColumn>
				<GridColumn Field="@nameof(PackageDto.OwnerPersonName)" HeaderText="To" Width="180" />
				<GridColumn Field="@nameof(PackageDto.VendorName)" HeaderText="From" Width="180" />
				<GridColumn Field="@nameof(PackageDto.PONumber)" HeaderText="PO#" Width="140" />
				<GridColumn HeaderText="Handling" Width="140" AllowSorting="false">
					<Template>
						@{
							var package = (context as PackageDto);
						}

						@if (package != null)
						{
							<div class="handling-icons-container">

								@if (package.IsUrgentDelivery)
								{
									<span class="handling-icon urgent" data-bs-toggle="tooltip" title="Urgent Delivery Required">
										<i class="bi bi-exclamation-triangle"></i>
									</span>
								}

								@switch (package.StorageTemperature)
								{
									case StorageTemperature.Refrigerated:
										<span class="handling-icon refrigerated" data-bs-toggle="tooltip" title="Refrigerated Storage Required">
											<i class="bi bi-thermometer"></i>
										</span>
										break;

									case StorageTemperature.Frozen:
										<span class="handling-icon frozen" data-bs-toggle="tooltip" title="Frozen Storage Required">
											<i class="bi bi-thermometer-snow"></i>
										</span>
										break;
								}
							</div>
						}
					</Template>
				</GridColumn>
				<GridColumn HeaderText="Broken?" Width="80">
					<Template>
						@{
							var package = (context as PackageDto);
						}

						@if (package?.IsBroken == true)
						{
							<span class="text-danger fw-bold">Yes</span>
						}
						else
						{
							<span>No</span>
						}
					</Template>
				</GridColumn>
				<GridColumn Field="@nameof(PackageDto.Status)" HeaderText="Status" Width="140" />
				<GridColumn Field="@nameof(PackageDto.StatusDate)" HeaderText="Status Date" Format="MM/dd/yyyy" Type="ColumnType.Date" Width="150" />
			</GridColumns>
		</SfGrid>
	</div>
}
<PackageDetailSlider @ref="_detailSlider" />
@code {
	private PaginatedData<PackageDto>? _packages;
	private bool _isLoading = true;
	public List<string> ToolbarItems = new List<string>() { "Search" };
	private PackageDetailSlider? _detailSlider;

	protected override async Task OnInitializedAsync()
	{
		await LoadPackagesAsync();
	}

	private async Task LoadPackagesAsync()
	{
		_isLoading = true;

		var query = new PackagesPaginationQuery
		{
			PageNumber = 1,
			PageSize = 20,
			ListView = PackageListView.All,
			OrderBy = nameof(PackageDto.ArrivedDateSnapshot),
			SortDirection = "Descending",
			IsPallet = false
		};

		_packages = await Mediator.Send(query);
		_isLoading = false;
	}

	private async Task ViewPackageDetails(int id)
	{
		if (_detailSlider is not null)
		{
			await _detailSlider.OpenAsync(id);
		}
	}
}

[Guhanathan Ramanathan]

Hi Smith ,

Greetings from Syncfusion support,

Based on your query, we understand that the filtering in the Blazor Grid (v25.1.42) does not work correctly in desktop mode. We created a sample using the code snippet you provided and tested it in version 25.1.42. In our testing, the filtering works fine, and the OK and Cancel buttons function correctly. Please refer to the attached sample and video demonstration for your reference.

Sample: Check the attachment

Video: Check the attachment.

Before proceeding with the reported issue, we need some additional clarification from your end. Kindly provide the following details so we can move forward:

1. Please provide a simple issue replicating sample or try to modify the above-mentioned sample.
2. Share us the video demonstration of the reported issue.
3. How do you refer to the script and theme reference on your project ?

The above-requested details will be very helpful for us to validate the reported query at our end and provide the solution as early as possible.

Regards,

Guhanathan R

Attachment: GridToolbarProblem_3563eff9.zip

[Smith, Miriah]

Good morning!

The issue is actually the mobile UI when using an adaptive layout. On mobile, when the grid is in vertical mode, the Filter does not work. It works great in desktop view. 

[Guhanathan Ramanathan]

Hi Smith,

Thanks for the update,

We understand that you are facing an issue in mobile mode where filtering in the Blazor Grid (v25.1.42) does not work correctly. However, we created a sample using the code snippet you provided and tested it in version 25.1.42 in mobile mode. In our testing, the filtering feature worked as expected. Please refer to the attached sample and video demonstration for your reference.

Sample: Check the attachment

Video: Check the attachment.

Before proceeding with the reported issue, we need some additional clarification from your end. Kindly provide the following details so we can move forward:

1. Please provide a simple issue replicating sample or try to modify the above-mentioned sample.
2. Share us the video demonstration of the reported issue.
3. How do you refer to the script and theme reference on your project ?
4. Kindly provide the details of the mobile device on which you are experiencing the issue.

The above-requested details will be very helpful for us to validate the reported query at our end and provide the solution as early as possible.

Regards,

Guhanathan R

Attachment: GridToolbarProblem_22519cb4.zip