Grid and List<string>

[curtic00]

Hi, is it possible to use client side filtering on your grid if you data source is a simple String list? ( List )

[gvreddy04]

@curtic00 Filtering is not supported at the moment. However, sorting and paging are supported.

<Grid TItem="string"
      Class="table table-hover table-bordered table-striped"
      DataProvider="EmployeesDataProvider"
      AllowPaging="true"
      PageSize="5"
      AllowSorting="true"
      Responsive="true">

    <GridColumns>
        <GridColumn TItem="string"
                    HeaderText="Customer Name"
                    SortKeySelector="item => item">
            @context
        </GridColumn>
    </GridColumns>

</Grid>

@code {
    private IEnumerable<string> employees = default!;

    private async Task<GridDataProviderResult<string>> EmployeesDataProvider(GridDataProviderRequest<string> request)
    {
        if (employees is null) // pull employees only one time for client-side sorting, and paging
            employees = GetEmployees(); // call a service or an API to pull the employees

        return await Task.FromResult(request.ApplyTo(employees));
    }

    private IEnumerable<string> GetEmployees()
    {
        return new List<string>
        {
            "Alice",
            "Bob",
            "John",
            "Pop",
            "Ronald",
            "Line",
            "Daniel",
            "Merlin",
            "Sharna",
            "Zayne",
            "Isha",
            "Glenda",
        };
    }
}

[curtic00]

Hi Vikram.Thanks for the quick reply...I suppose that I could create a class with a single string property and make a list of them?Regards Charlie Charlie *************** On 14 Mar 2025, at 15:48, Vikram Reddy ***@***.***> wrote: @curtic00 Filtering is not supported at the moment. However, sorting and paging are supported. image.png (view on web) <Grid TItem="string" Class="table table-hover table-bordered table-striped" DataProvider="EmployeesDataProvider" AllowPaging="true" PageSize="5" AllowSorting="true" Responsive="true"> <GridColumns> <GridColumn TItem="string" HeaderText="Customer Name" SortKeySelector="item => item"> @context </GridColumn> </GridColumns> </Grid> @code { private IEnumerable<string> employees = default!; private async Task<GridDataProviderResult<string>> EmployeesDataProvider(GridDataProviderRequest<string> request) { if (employees is null) // pull employees only one time for client-side sorting, and paging employees = GetEmployees(); // call a service or an API to pull the employees return await Task.FromResult(request.ApplyTo(employees)); } private IEnumerable<string> GetEmployees() { return new List<string> { "Alice", "Bob", "John", "Pop", "Ronald", "Line", "Daniel", "Merlin", "Sharna", "Zayne", "Isha", "Glenda", }; } } —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: ***@***.***>

[gvreddy04]

@curtic00 Class with one property will work.

[curtic00]

Hi Vikram Sorry to bother you again.. Filters don’t’ seem to be working What Am I doing wrong? Is it because it’s a component not a page..? @using Simpson.Data.Interfaces @Inject IJobData data @Inject NavigationManager NavMan <h3>Job Documents</h3> @if ***@***.***)) { <Alert ***@***.***</Alert> } <Spinner Type="SpinnerType.Dots" Color="SpinnerColor.Primary" ***@***.***" /> <Grid Responsive="true" TItem="JobDocsModel" DataProvider="DocumentsDataProvider" Class="table table-hover table-bordered table-striped" AllowPaging="true" PageSizeSelectorVisible="true" PageSizeSelectorItems="@(new int[] { 5,10,20 })" PageSize="20" AllowFiltering="true"> <GridColumns> <GridColumn TItem="JobDocsModel" HeaderText="Filename" PropertyName="filePath"> <span ***@***.***</span> </GridColumn> @* <GridColumn TItem="JobDocsModel" HeaderText="Copy path" Filterable="false"> <span data-testid="DTIDDocumentCopy">Copy path</span> <Icon Name="IconName.Copy" Color="IconColor.Primary" /> </GridColumn> *@ </GridColumns> </Grid> @code { [Parameter] public int jobId { get; set; } public List<JobDocsModel> docs = default!; private string errorMessage = string.Empty; private bool spinnerVisible = false; private async Task<GridDataProviderResult<JobDocsModel>> DocumentsDataProvider(GridDataProviderRequest<JobDocsModel> request) { if (docs is null) { docs = new List<JobDocsModel>(); // Get the Job documents for job spinnerVisible = true; errorMessage = string.Empty; try { // Get a list of files with their full path and name.. var documents = await data.JobDocumentsListAsync(jobId); foreach (string doc in documents) { var builder = new UriBuilder(NavMan.BaseUri); builder.Path += doc; var jdm = new JobDocsModel { filePath = doc, docUrl = builder.Uri.AbsoluteUri }; docs.Add(jdm); } } catch (Exception err) { errorMessage = err.Message; StateHasChanged(); } finally { spinnerVisible = false; } } return await Task.FromResult(request.ApplyTo(docs)); } /// <summary> /// Used to store document information. /// </summary> public record class JobDocsModel { public string filePath = string.Empty; public string docUrl = string.Empty; } } JobDocumentsListAsync Data looks like this: "JobFiles\10011_(Sussex Ventilation)\100_TR_5.xls" "JobFiles\10011_(Sussex Ventilation)\100_TR_6.xls" "JobFiles\10011_(Sussex Ventilation)\32482 philips job sheet.docx" "JobFiles\10011_(Sussex Ventilation)\Blazor-for-ASP-NET-Web-Forms-Developers.pdf" "JobFiles\10011_(Sussex Ventilation)\CEASTFSIMP1Light outside flat 4 .msg" "JobFiles\10011_(Sussex Ventilation)\Exising Friday, March 14, 2025 100_TR_6.xls" "JobFiles\10011_(Sussex Ventilation)\Foxley_lane_paint_plan.docx" "JobFiles\10011_(Sussex Ventilation)\Invoice.txt" "JobFiles\10011_(Sussex Ventilation)\JobDetails.pdf" "JobFiles\10011_(Sussex Ventilation)\photo 2.jpg" "JobFiles\10011_(Sussex Ventilation)\SimJobMangerDictionary.txt" Many thanks in advance, Charlie From: Vikram Reddy ***@***.***> Sent: 14 March 2025 16:12 To: vikramlearning/blazorbootstrap ***@***.***> Cc: curtic00 ***@***.***>; Mention ***@***.***> Subject: Re: [vikramlearning/blazorbootstrap] Grid and List<string> (Discussion #1064) @curtic00 <https://github.com/curtic00> Class with one property will work. — Reply to this email directly, view it on GitHub <#1064 (reply in thread)> , or unsubscribe <https://github.com/notifications/unsubscribe-auth/AUSOJFT3CQFBD6LZ5GYKPO32UL5WRAVCNFSM6AAAAABZAQQLPKVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTENJQGMYDOMA> . You are receiving this because you were mentioned. <https://github.com/notifications/beacon/AUSOJFVPVDQMJWRRBDGUFM32UL5WRA5CNFSM6AAAAABZAQQLPKWGG33NNVSW45C7OR4XAZNRIRUXGY3VONZWS33OINXW23LFNZ2KUY3PNVWWK3TUL5UWJTQAX3EB4.gif> Message ID: ***@***.*** ***@***.***> >