.Net Problem: Searching in .net table goes slow-CodePudding

I am working on a Blazor Wasm project, and I have a problem in the performance of searching in a table (my table now has 3500 elements, but in production it can have 10000). I have to increase performance and I don't know how to do it. whether to approach it from C# or Javascript.

Iam using MudBlazor Components.

The Table in question:

<Virtualize Context="item" OverscanCount="50" TItem="ArticuloDto" Items="lArticulos">
  @if(FilterArticuloFunc(item))
  {
    <tr  style="border-bottom: 1px solid var(--mud-palette-tertiary);">
      <div >
        <MudText Typo="Typo.body1" Style="word-break: break-all;">@item.Descripcion</MudText>
        <MudText Typo="Typo.body2" Color="Color.Secondary">Codigo: @item.Codigo</MudText>
      </div>
      <div >
        <MudText Typo="Typo.h1" Align="Align.Right">[email protected]</MudText>
        <MudText Typo="Typo.body2" Align="Align.Right" Color="@StockToColor(item.ExistenciaActual)">Stock: @item.Existencia</MudText>
      </div>
    </tr>
  }
</Virtualize>

The FilterFunc in question:

private bool FilterArticuloFunc(ArticuloDto element)
{
  if (string.IsNullOrWhiteSpace(searchProductText))
    return true;
  if (element.Codigo.Contains(searchProductText, StringComparison.OrdinalIgnoreCase))
    return true;
  if (element.Descripcion.Contains(searchProductText, StringComparison.OrdinalIgnoreCase))
    return true;
  return false;
}

CodePudding user response：

I guess you have all the 3500 items loaded in memory. You fine with that?

50 overscan items is maybe too much. But your problem is somewhere else.

You do the filtering only on visible items, thus breaking the rule of same height of all items in virtualize component. If the height is different, it cannot count height of scroller properly. And it does a lot of rendering there.

I would suggest to create second list of ArticuloDto (lArticulosFiltered) and plug that into the virtualize component (Items="lArticulosFiltered") and do the filtering like this:

lArticulosFiltered = lArticulos.Where(x=>x.Codigo.Contains(searchProductText, StringComparison.OrdinalIgnoreCase) && x.Descripcion.Contains(searchProductText, StringComparison.OrdinalIgnoreCase))

(on the beginning you have to assign ArticuloDto to lArticulosFiltered )

You may hit another performance issues (for example you are doubling amount of memory needed to hold all items).

CodePudding user response：

May be you can use Datatable side-server processing to solve these problem

CodePudding user response：

It's unclear from your description if the problem only happens while searching (like your title implies) or even at start up.

Because if it's only a searching problem it should be trivial to just dump the entire dataset in HTML and then do your searching in JavaScript, simply hiding or showing rows as needed.