Blazor Virtual Grid

If you like my blazor works and want to see more open sourced repos please support me with paypal donation

Please send email if you consider to hire me.

=================================================

Component is available on nuget

After installing package please add bellow script to your index.html

<script src="_content/BlazorVirtualGridComponent/BVirtualGridCJsInterop.js"></script>

Component is live here

In this repo there are component itself and consumer blazor app where you can see how component can be used.

Here I will also give some basic usage info.

Component can be downloaded from nuget, also we need four more nuget packages to install:

1. BlazorSpitter;
2. BlazorScrollbar;
3. Mono.WebAssembly.Interop;
4. System.Linq.Dynamic.Core.

Component can receive any list object in parameter SourceList, table name and configuration settings.

<CompBlazorVirtualGrid ref="Bvg1" SourceList="@list1" TableName="@TableName1" bvgSettings="@bvgSettings1"></CompBlazorVirtualGrid>

For BvgSettings you will provide TItem and all desired configurations.

public BvgSettings<MyItem> bvgSettings1 { get; set; } = new BvgSettings<MyItem>();

You can configure styles and global properties:

  bvgSettings1.NonFrozenCellStyle = new BvgStyle
    {
        BackgroundColor = "#cccccc",
        ForeColor = "#00008B",
        BorderColor = "#000000",
        BorderWidth = 1,
    };

    bvgSettings1.RowHeight = 40;
    bvgSettings1.HeaderHeight = 50;
    bvgSettings1.ColWidthMin = 220;
    bvgSettings1.ColWidthMax = 400;

    bvgSettings1.VerticalScrollStyle = new BvgStyleScroll
    {
        ButtonColor = "#008000",
        ThumbColor = "#FF0000",
        ThumbWayColor = "#90EE90",
    };

Set frozen columns if any:

bvgSettings1.FrozenColumnsListOrdered = new ValuesContainer<string>();
   bvgSettings1.FrozenColumnsListOrdered
       .Add(nameof(MyItem.C3))
       .Add(nameof(MyItem.Date));

Hide columns:

    bvgSettings1.HiddenColumns
        .Add(nameof(MyItem.C1))
        .Add(nameof(MyItem.C2));

Set columns order, code will organize columns by provided order, after this by default:

bvgSettings1.NonFrozenColumnsListOrdered = new ValuesContainer<string>();
            bvgSettings1.NonFrozenColumnsListOrdered
                .Add(nameof(MyItem.C1))
                .Add(nameof(MyItem.C2));

Set column widths if you like any of them to have individual width:

  bvgSettings1.ColumnWidthsDictionary = new ValuesContainer<Tuple<string, ushort>>();
  bvgSettings1.ColumnWidthsDictionary
      .Add(Tuple.Create(nameof(MyItem.C3), (ushort)200))
      .Add(Tuple.Create(nameof(MyItem.Date), (ushort)200));

Please also check this youtube video about BlazorVirtualGrid.

You can always open new issue or make PR, also ask questions at [email protected] or reach me out in twitter @lupusa1

Thank you for your interest and happy coding with blazor.