DataJuggler.Blazor.Components 8.9.1

dotnet add package DataJuggler.Blazor.Components --version 8.9.1                
NuGet\Install-Package DataJuggler.Blazor.Components -Version 8.9.1                
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="DataJuggler.Blazor.Components" Version="8.9.1" />                
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add DataJuggler.Blazor.Components --version 8.9.1                
#r "nuget: DataJuggler.Blazor.Components, 8.9.1"                
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
// Install DataJuggler.Blazor.Components as a Cake Addin
#addin nuget:?package=DataJuggler.Blazor.Components&version=8.9.1

// Install DataJuggler.Blazor.Components as a Cake Tool
#tool nuget:?package=DataJuggler.Blazor.Components&version=8.9.1                


5.30.2024: I created a new component called an InformationBox. This component is used for creating dashboards or reports.

<img src= height=215 width=356>

<InformationBox Parent="this" Title="Summary" Height="204" Width="340"
    Column1Width="180" Column2Width="152" Column1Left="0" Gap="8"
    Left="256" Theme="@ThemeEnum.Blue" BorderColor="Color.Gray" HeaderHeight="32"
    HeaderTextVerticalOffset="3" Name="Summary">

The InformationBox is loaded via code. Here is a sample for how to load an InformationBox

I create a private variable for the InformationBox

private InformationBox infoBox;

And from this I create a property. It's optional, but I use Visual Studio package Regionizer2022


Make sure your code file has a Properties region, and select one or more private variables - Click the Create Properties button

A property is created

#region InfoBox
/// <summary>
/// This property gets or sets the value for 'InfoBox'.
/// </summary>
public InformationBox InfoBox
    get { return infoBox; }
    set { infoBox = value; }

To create a HasProperty, I select the word InfoBox, in the line public InformationBox InfoBox and in Regionizer 2022, I click 'Create Has Property'.

This creates a read only property that is a simple method of testing for null

#region HasInfoBox
/// <summary>
/// This property returns true if this object has an 'InfoBox'.
/// </summary>
public bool HasInfoBox
        // initial value
        bool hasInfoBox = (this.InfoBox != null);
        // return value
        return hasInfoBox;

Then in the Register method of the page or component hosting the InformationBox, make sure the component implements IBlazorComponentParent. If you have more than one InformationBox on a page or component, you can refer to them by name to store each component. The example below only has one InformationBox on the page.

In the register method, store the object

if (component is InformationBox)
    // Store
    InfoBox = component as InformationBox;
    // test only
    List<Item> items = CreateSampleInfoBoxItems();
    // if the value for HasInfoBox is true
    if (HasInfoBox)
        // Set the Items
        // Update the UI

And this method CreateSampleInfoBoxItems demonstrates how to load a list of items

Tip: Notice the code for the image for the first item. You can place an image on the left or right of text, by selecting the ImageAlignment.

#region CreateSampleInfoBoxItems()
/// <summary>
/// returns a list of Sample Info Box Items
/// </summary>
public List<Item> CreateSampleInfoBoxItems()
    // initial value
    List<Item> items = new List<Item>();
    // Create a new instance of an 'Item' object.
    Item item = new Item();
    item.Caption = "Acceptable Pressure Test?";
    item.Text = "Yes";
    // image
    item.IncludeImage = true;
    item.ImageAlignment = ImageAlignmentEnum.ImageOnLeftOfText;
    item.ImageWidth = 16;
    item.ImageHeight = 16;
    item.ImageUrl = "../Images/GreenCircle.png";
    // Add this item
    // Create a new instance of an 'Item' object.
    item = new Item();
    item.Caption = "PSI Loss to Leak?";
    item.Text = "30.1 psi";
    // Add this item
    // Create a new instance of an 'Item' object.
    item = new Item();
    item.Caption = "Total Test Time";
    item.Text = "8 Hours 0 Minutes";
    // Add this item
    // Create a new instance of an 'Item' object.
    item = new Item();
    item.Caption = "Min Test Duration Met?";
    item.Text = "Yes";
    // Add this item
    // Create a new instance of an 'Item' object.
    item = new Item();
    item.Caption = "Min Test Pressure Met?";
    item.Text = "Yes";
    // Add this item
    // Create a new instance of an 'Item' object.
    item = new Item();
    item.Caption = "MAOP Verified By Test";
    item.Text = "452 psi";
    // Add this item
    // Create a new instance of an 'Item' object.
    item = new Item();
    item.Caption = "Desired MAOP";
    item.Text = "400 psi";
    // Add this item
    // Create a new instance of an 'Item' object.
    item = new Item();
    item.Caption = "Test Within Pressure Bounds?";
    item.Text = "Yes";
    // Add this item
    // return value
    return items;

5.24.2024 8.8.8: New Properties were added to the ComboBox to control the height of the TextBox for the CalendarComponent

Update 5.18.2024

New Video:

First Ever Opensource Saturday - Sunday Edition

5.8.2024: I spent a week refactoring the Combo Box. I realized my first combobox wasn't a standard combobox. Now, if you are in regular mode (not checklist mode), you can type T twice for Texas in a States list, for example. I have a new sample project called 'NTouch', that demonstrates the ComboBox and the Calendar.


Example using the Combobox in regular mode (not CheckListMode)

<ComboBox Name="StateComboBox" Theme=ThemeEnum.Blue Unit="px" HeightUnit="px" Height="32" ZIndex="80"
    LabelText="State:" Width="224" Parent="this" ButtonHeight=24 ButtonWidth=24 ControlHeight="32"
    DropdownClassName="container2 border1gray textdonotwrap" TextBoxLeft="0" ButtonTop=-5 ButtonLeft=-26
    ListItemWidth="120" ListZIndex=80 ListItemTop=24
    Column2Width="128" Position="relative" Top="0" LabelClassName="down4 right2" TextBoxWidth="124">

Notice the attribute Parent=this on Line 2. This is how the ComboBox registers with its parent. To use this feature, you probably have to supress the warning BL0007 in the project properties. Microsoft doesn't like code in Setters, but this is how all IBlazorComponents and IBlazorComponentParents talk to each other.

New video coming soon.

Here is the css you must put in the client project that uses the ComboBox. Notice line 3 DropDownClassName

    position: absolute;
    width: 120px;
    height: 80px;        

Feel free to adjust the height and width as needed. The position absolute is the key to the Drop Down showing, without moving other content (spent a while on this). Border1Gray is shown below.

Example using the Combobox in CheckListMode

<ComboBox Name="TargetFrameworkComboBox" Theme=ThemeEnum.Blue Unit="px" HeightUnit="px" Height="32"
    LabelText="Target:" Width="224" Parent="this" ButtonHeight=24 ButtonWidth=24 
    CheckedListClassName="container border1gray textdonotwrap" TextBoxLeft="1" ButtonTop=-5 ButtonLeft=-4
    Column2Width="128" Position="relative" Top="4" LabelClassName="down4 right2" TextBoxWidth="124" 
    CheckListMode=true CheckedListUnit="vw" CheckedListHeightUnit="vh" CheckedListheight="4" ListItemHeight="2.4"
    CheckedListItemLeft="2" CheckedListItemTop=1 ListItemBackgroundColor=Color.White
    CheckBoxXPosition="-3.2" CheckBoxYPosition=".4" CheckBoxTextXPosition="-3"  CheckBoxTextYPosition="0" 
    CheckedListWidth=8 CheckedListTop="24" CheckedListLeft="48" ListItemWidth=10>

It is important to note the CheckedListClassName on line 3. I have two CSS classes set in an External project, that are the key to making the Z-Index work. I tried using an internal CSS Class, and haven't had much luck. Will try again later.

    border-width: 1px;
    border-style: solid;
    border-color: black;
    border-width: 1px;
    border-style: solid;
    border-color: gray;
    display: inline-block;
    height: 16vh;
    min-height: 16vh;
    max-height: 16vh;
    width: 16vw  !important;
    max-width: 16vw  !important;
    min-width: 16vw !important; 
    position: relative;
    left: 0vw;
    overflow: visible !important;
    z-index: 200 !important;
    background-color: white;

5.1.2024: I added a ZIndex property to the Calendar. If you have two calendar components near each other, the first one can't type. Will work on a solution later, but the ZIndex should allow a fix.

4.30.2024: Version 8.6.22 fixes the textbox and button jumping around when the calendar showed, by adding min-height and max-height properties to the ContainerStyle BlazorStyled class.

4.29.2024: I added few more tweaks to the CalendarComponent, to make it easier to use. I think a good future feature might be if you click on the Year label, a combobox opens with a selection of years. For things like Birthday, scrolling dozens of years isn't worth it. You can always type it, but a year selector might be worth exploring.

4.27.2024: Eureka! I have done it. I built a working CalendarComponent, and being it has been tested by all of 1 person in all of 1 project(s), I am pretty excited. If this doesn't make it worth the price, and make you willing to leave a star on GitHub or Subscribe to my YouTube channel, nothing will.

<img src= height=219 width=336>

Calendar Example

<CalendarComponent Name="FollowUpDateControl" Unit="px" HeightUnit="px" Height="146" Position="relative"
    ButtonHeight=24 ButtonWidth=24 CalendarTop="-116" CalendarLeft="64" Caption="Follow Up Date:" 
    Parent="this" ButtonTop="-4" Width="224" Column2Width="128" ControlHeight="32" 
    Top="0" LabelClassName="down4 right2" TextBoxWidth="124">

I created a new repository for a project called NTouch. You can run NTouch now and see an example.


4.24.2024: To celebrate the coming milestone of 200,000 installs coming up this summer, I am working on a Calendar Component. The Calendar Component is in this release (8.5.0), but it is far from being to use. What I am testing now is the text box shows up, the button shows up, and if you click the button, the pop up calendar div shows and goes away as you toggle the button. Soon I will add buttons for the calendar. Baby steps.

4.23.2024: I had some problems running the Blazor Server App projects in .NET 8. The problem was browsers (Chrome) are depreciating Page Unload events, and blazor.server.js is the culprit. I switched to a web app and things work. The one important thing I noticed, linking to a CSS class like this seems to not work in a Blazor Web Project (not Blazor Server App Template)

<link href="~/_content/DataJuggler.Blazor.Components/css/DataJuggler.Blazor.Components.css" rel="stylesheet" />

Removing the Tilde seems to work.

<link href="/_content/DataJuggler.Blazor.Components/css/DataJuggler.Blazor.Components.css" rel="stylesheet" />

4.18.2024: The conversion to using BlazorStyled again has completed. Testing in progress, but seems to work.

4.17.2024: I added back BlazorStyled, but I forked the project and created a NuGet package DataJuggler.BlazorStyled. I didn't make any code changes, all I did was upgrade the component to .NET 8 and the dependencies.

4.8.2024: I modified the grid with a new property 'NotifyParentOnDoubleClick'. You can set an ExternalId and ExternalIdDescription when you create the rows. I also added an EnableClick function for a Grid row. The Click does work. Testing the DoubleClick now. the parent object will receive a message. Optionally, Set the ExternalId and ExternalId Description.

4.5.2024: ImageButton does not have a ClassName property.

4.4.2024: I removed the dependency on Blazor Styled. Blazor Styled hasn't been updated since .NET Core 3.1, and I found you can create a Style section on any razor page and do the same thing without Blazor Styled, and with better results it seems of late.

12.30.2023: I updated the CheckBox to send a message to its Parent when it's value changes. I added SetLabelColor method to the ValidationComponent.

I created a new project that uses these controls.

Snow Creator

Live Demo:

12.28.2023: I fixed a bug with the CheckedListBox where the ListItemHeight was wrong.

12.27.2023: I added the !important attribute to the ListItemZIndex CSS and ListItemHeight and CheckedListHeight.

12.26.2023: I updated DataJuggler.NET8 and DataJuggler.Excelerate Nuget packages.

12.18.2023 I fixed a bug with the ValidationComponent If is valid is true, I set the label to the invalid label color. This is now fixed.

11.15.2023 I updated the project to .NET 8

For .NET 7, use a 7.x version.

11.10.2023: I added a Label

The Label provides a simple way to display text.

11.8.2023 New Video For 100,000 Installs

Version 7.13.7

How To Use DataJuggler.Blazor.Components Grid

Version 7.13.5 Novermber 7, 2023: DataJuggler.Blazor.Components passed 100,000 Downloads I updated the Grid and created a new sample project to demo the Grid.

The sample project is called BubbleReportWeb

Version 7.12.8 November 2, 2023: I added a ClassName parameter to the Grid

August 29, 2023:

New Video: DataJuggler.Blazor.Components reaches 75,000 Installs In this short video I show a demo of code generating classes from Blazor Excelerate.

August 26, 2023: In celebration of 75,000 NuGet installs, I added two new features. First, I created a CheckedListBox component. I also added a new feature to the ComboBox, and that new features is a CheckedListMode. The combobox now supports check boxes and multiple selections.

July 22, 2023: More updates to NuGet package DataJuggler.Excelerate, and I need this update for my project Blazor Excelerate

July 21, 2023: I updated NuGet package DataJuggler.Excelerate, and I need this update for my project Blazor Excelerate

July 18, 2023: I fixed the checkbox component. The binding wasn't working when I thought I fixed it last time.

July 9, 2023: I removed floats from the ComboBox component. I was having trouble "stacking" a ValidationComponent below a ComboBox, so hopefully this fixes it. I also added a ComboBoxWidth parameter property on the ComboBox.

July 6, 2023: I added an AutoComplete property, which defaults to false. The reason for this is browsers like to fill in values, and the browser is confusing Email Address and User Name fields.

July 2, 2023: I removed the floats from the ValidationComponent. This will probably break some existing users, but I am trying to make the control more consistant to work with. I also added a MarginBottom property. Use this in conjunction with the HeightUnit, which defaults to px (pixels) and the MarginBottom is set to 8 by default.

June 21, 2023: I updated DataJuggler.UltimateHelper.

June 3, 2023 B: I updated the Sprite component to have a SetVisible and optional parameter for Hide when you call Stop.

June 3, 2023: My first attempt at Disabled for the Validation Component was wrong. I think my fix will work. Testing now.

June 2, 2023: I added an Enabled property and a method SetEnabled to the validation component. If Enabled is false, disabled will appear in the input objects and be read only.

5.8.2023: Nuget package DataJuggler.Blazor.Components reached 50,000 installs today.

3.8.2023: Nuget package DataJuggler.Blazor.Components reached 40,000 installs today.

Sample Projects

I created a new project that uses the ValidationComponent.

Live Demo

Blazor Gallery<br>

Blazor Gallery Source<br>


Blazor Gallery Deserves A Star<br> Blazor Gallery Deserves A Star Video

Blazor Excelerate

Live Demo

Blazor Excelerate Code Generate C# Classes From Excel Header Rows

Blazor Excelerate Source

Getting Started:


This project has a dependency on DataJuggler.BlazorStyled (a port of BlazorStyled by chanan. Both will work, but the forked version has been upgraded for .NET8.)

Add the following to program.cs:

using DataJuggler.BlazorStyled;


New Video - 50,000 NuGet Installs


BuildCopy will copy the files from a Visual Studio solution to an output folder. In this case, the output folder is ProjectTemplates\Working\Templates. BuildCopy also allows you to set ignore folders, so I do not copy the .vs, .git, .bin, .obj, .templateconfig and a few others.

Here is a video showing you how to setup this project, build the data tier for Blazor Gallery, and build your own DataTier.Net projects.

How To Create A NuGet Package For A Blazor Site

Want To Help Contribute to this project? Volunteer to take the instructions from the video and write them out as step by step. Bonus with images and screen shots.

If you think this project is worth the price, please leave a star and / or subscribe to my YouTube channel:


One of my favorite parts of this project is the DataJuggler.Blazor.Componets.css file.

After adding nuget package DataJuggler.Blazor.Componets Nuget package, add the folloing line to your _layout.cshtml file in your Blazor project:

<link href="~/_content/DataJuggler.Blazor.Components/css/DataJuggler.Blazor.Components.css" rel="stylesheet" />

View the full CSS here:

The CSS file has values to make it easy to position and style components.

CSS classes can be combined using spaces like:

<div class="width16 backgroundcolorskyblue marginleft8 down12"></div>

background(color name) Example: backgroundlemonchiffon<br> Set the background color to a .NET named color.

Set Colors:

color(color name) Example: colormidnightblue. Set the forecolor to a .NET named color.

displayblock, displayinline, displaylineblock, displaynone.

down(0 - 1000) Example: down16 Move the element 16 pixels down. (CSS is top: 16px).

height(0 - 1000) Example: height18 Set the height, minheight and maxheight to 18 pixels.

left(0 - 1000) Example: left40 Move the element 40 pixels to the left (Css is right: 40px).

marginbottom(0 - 600) Example: marginbottom200 Give the element a bottom margin of 200 pixels.

marginleft(0 - 600) Example: marginleft24 Give the element a left margin of 24 pixels.

marginright(0 - 600) Example: marginright64 Give the element a right margin of 64 pixels.

margintop(0 - 600) Example: margintop90 Give the element a top margin of 90 pixels.

right(0 - 1000) Example: right128 Move the element 128 pixels to the right (Css is left: 128px).

up(0 - 1000) Example: up12 Move the element up 12 pixels. (Css is bottom: 12px)

width(0 - 1000) Example: width640 Set the width, min-width and max-width in pixels. In this example 640.



<ValidationComponent Name="ResultsControl" Caption="Results:" Parent="this" Unit="px" Column1Width="64" Column2Width="480" TextBoxWidth="480" 
    LabelClassName="down8" Left="0" MarginLeft="4" Multiline=true HeightUnit="vh" Height="20" Top=0 LabelFontSizeUnit="em" 

This componet can serve as a CheckBox, a TextBox or a TextArea.

Register the componet by setting the parent=this, and your parent needs to implement IBlazorComponentParent interface.

Add the following line in your parent component.

using DataJuggler.Blazer.Components.Interfaces;

Tip: Use partial classes for your components. To do this, in your project add a CS class with the same name as your component. Name your class such as this:

Example: Grid.razor Grid.razor.cs (partial class)

public partial class Grid : ComponentBase, IBlazorComponent, IBlazorComponentParent

As you can see above, the Grid implements IBlazorComponet and IBlazorComponentParent.

Visual Studio makes it easy to implement interfaces. Right click the interface name, and select Quick Actions and Refactoring > Implement Interface.

This will stub out the properties and methods needed to implement the interface.

To see an example of registering components, see the project Blazor Excelerate linked at the top of this document. Look for a method called Register. Once registered then your components can talk to each other using the ReceiveData method and by passing Message objects.

Update 11.7.2023: I just published a new project to Demo Grids

This is a sample mark up for a grid. The parent of the grid must implement DataJuggler.Blazor.IComponentParent

<Grid Name="TopStreaksStockGrid" ClassName="grid" Unit="px" Width="310" HeightUnit="px" Height=278
    ShowHeader="true" HeaderText = "Top Streak Stocks" HeaderClassName = "width320 textaligncenter"
    ShowColumnHeaders=true Parent="this" Left="40" Top=-24 FontSize="12"></Grid>

Notice the property Parent="this" on the bottom line. This is how the grid is registered with the parent.

View the code for the BubbleReportWeb above, and view the code for Index.razor.cs. The Register method has multiple grid properties.

private Grid topStreakGrid;

/// <summary>
/// This property gets or sets the value for 'TopStreakGrid'.
/// </summary>
public Grid TopStreakGrid
    get { return topStreakGrid; }
    set { topStreakGrid = value; }

One important thing to note, is the grid works best when you register DataJuggler.Blazor.Components.css in your project like this:

<link href="/_content/DataJuggler.Blazor.Components/css/DataJuggler.Blazor.Components.css" rel="stylesheet" />

Removing the tilde seems necessary for Blazor Web Apps (latest .NET8 Template). I will do more testing when I get a chance and confirm this works in both.

The above CSS class is included with NuGet package DataJuggler.Blazor.Components

The grid can be loaded via code in the OnAfterRenderAsync event:

protected async override Task OnAfterRenderAsync(bool firstRender)
    // if the TopStreakGrid exists
    if (HasTopStreakGrid)
        // create the rows
        List<Row> rows = CreateRowsForTopStreakStocks();
        // Set the Row
        TopStreakGrid.Rows = rows;
        // Refresh the Grid

Loading Grid Rows and Columns

In this example, I added two using statements to avoid the conflict between DataJuggler.Excelerate.Row and DataJuggler.Excelerate.Column OfficeOpenXml.Row and OfficeOpenXml.Column. DataJuggler.Blazor.Excelerate is installed when you add DataJuggler.Blazor.Components to a project via NuGet.

Note: The Gateway class listed below is created when you create a project via DataTier.Net. You can use EntityFramework or another ORM if you prefer. I like DataTier.Net because it uses all stored procedures.

DataTier.Net (Optional)

using Row = DataJuggler.Excelerate.Row;
using Column = DataJuggler.Excelerate.Column;

/// <summary>
/// returns a list of Rows For Top Streak Stocks
/// </summary>
public List<Row> CreateRowsForTopStreakStocks()
    // initial value
    List<Row> rows = new List<Row>();
    // Load the Gateway
    Gateway gateway = new Gateway(Connection.Name);
    // Load the topStocks
    List<TopStreakStocks> topStocks = gateway.LoadTopStreakStocks();
    // If the topStocks collection exists and has one or more items
    if (ListHelper.HasOneOrMoreItems(topStocks))
        // Create Column and set properties
        Column column = new Column();
        column.Caption = "Symbol";
        column.ColumnName = "Symbol";
        column.Index = 0;
        column.ColumnNumber = 1;
        column.ColumnText = "Symbol";
        column.Width = 48;
        column.Height = 16;
        column.ClassName = "displayinlineblock width48 colorwhite textalignleft down4 right16 fontsize12";
        // Add this column
        // Create Column and set properties
        Column column2 = new Column();
        column2.Caption = "Name";
        column2.ColumnName = "Name";
        column2.Index = 1;
        column2.ColumnNumber = 2;
        column2.ColumnText = column2.Caption;
        column2.Width = 140;
        column2.Height = 16;
        column2.ClassName = "displayinlineblock width140 colorwhite textalignleft down4 right16 fontsize12";
        // Add Column 2 to the header row
        // Create Column and set properties
        Column column3 = new Column();
        column3.Caption = "Last";
        column3.ColumnName = "LastClose";
        column3.Index = 2;
        column3.ColumnNumber = 3;
        column3.ColumnText = column3.Caption;
        column3.Width = 48;
        column3.Height = 16;
        column3.ClassName = "displayinlineblock width48 colorwhite textalignleft down4 right30 fontsize12";
        // Add this column
        // Create Column and set properties
        Column column4 = new Column();
        column4.Caption = "Streak";
        column4.ColumnName = "Streak";
        column4.Index = 3;
        column4.ColumnNumber = 4;
        column4.ColumnText = column4.Caption;
        column4.Width = 48;
        column4.Height = 16;
        column4.ClassName = "displayinlineblock width48 colorwhite textalignleft down4 right16 fontsize12";
        // Add this column
        foreach (TopStreakStocks topStock in topStocks)
            // Create a row
            DataJuggler.Excelerate.Row row = new DataJuggler.Excelerate.Row();
            row.ClassName = "textdonotwrap width448 height16 marginbottom0 down8";
            // Create Column and set properties
            column = new Column();
            column.Caption = "Symbol";
            column.ColumnName = "Symbol";
            column.Index = 0;
            column.ColumnNumber = 1;
            column.ColumnText = topStock.Symbol;
            column.Unit = "px";
            column.Width = 48;
            column.Height = 16;
            column.ClassName = "displayinlineblock width48 colorwhite textalignleft right16 fontsize12";
            // Add this column
            // Create Column and set properties
            column2 = new Column();
            column2.Caption = "Name";
            column2.ColumnName = "Name";
            column2.Index = 1;
            column2.ColumnNumber = 2;
            column2.ColumnText = topStock.ShortName.ToString();
            column2.Width = 140;
            column2.Height = 16;
            column2.ClassName = "displayinlineblock width140 colorwhite textalignleft right16 fontsize12";
            // Add this column
            // Create Column and set properties
            column3 = new Column();
            column3.Caption = "Last Close";
            column3.ColumnName = "LastPrice";
            column3.Index = 2;
            column3.ColumnNumber = 3;
            column3.ColumnText = topStock.LastClose.ToString("C");
            column3.Width = 48;
            column3.Height = 16;
            column3.ClassName = "displayinlineblock width48 colorwhite textalignright right8 fontsize12";
            // Add this column
            // Create Column and set properties
            column4 = new Column();
            column4.Caption = "Streak";
            column4.ColumnName = "Streak";
            column4.Index = 3;
            column4.ColumnNumber = 4;
            column4.ColumnValue = topStock.Streak;
            column4.ColumnText = topStock.Streak.ToString();
            column4.Width = 48;
            column4.Height = 16;
            column4.ClassName = "displayinlineblock width48 colorwhite textaligncenter right16 fontsize12";
            // Add this column
            // Add this row
    // return value
    return rows;

If you have any questions, please feel free to ask on Git Hub:


This class consists of an ImageButton, ProgressBar, Sprite, ValidationComponent, ComboBox, CheckedListBox and a Grid.


Update 8.26.2023: If you need to hide the CheckedListBox, before hiding you need to store the selections. Look at the code for the ComboBox.ButtonClickedEvent to see an example where it calls StoreSelections. This checks the Items in memory if the checkboxes have been checked. I have tried doing this dynamically as the items are checked, and had numeroius problems.

Update 11.8.2022: This project has been updated to .NET 7.

DataJuggler.Excelerate has been added to add Rows and Columns for the Grid.

I also added a new CSS file:


DataJuggler.Blazor.Components.css has classes that I find useful in styling blazor components.

To use this file, after adding Nuget package DataJuggler.Blazor.Components, add the following link to your _layout.cshtml file:

<link href="~/_content/DataJuggler.Blazor.Components/css/DataJuggler.Blazor.Components.css" rel="stylesheet" />

This will make all the classes in the file available to your project.


Background Color

Background color is in the format backgroundcolor + the known color name.

    background-color: skyblue;

Foreground Color

Background color is in the format color + the known color name.

    color: forestgreen;


Height is in the format height + the height value in pixels

Height values range from 0 - 1,000.

    height: 75px;
    min-height: 75px;
    max-height: 75px;


Width is in the format width + the width value in pixels

Width values range from 0 - 1,000.

    width: 596px;
    min-width: 596px;
    max-width: 596px;


Margin is in the format margin + direction (top, left, bottom, right) + the margin value in pixels:

Margin ranges from 0 - 600

    margin-left: 200px;

    margin-right: 12px;

A few extras:

    text-align: left;
    text-align: right;
    text-align: center;
    white-space: nowrap !important;

I find these classes useful for Blazor components, because you can combine them and it saves creating inline styles.

# Excample of multiple classes applied to an element.
column2.ClassName = "width120 textalignleft marginleft4 colorwhite";

Update 10.22.2021:

I just released a full working sample here:

And a live example is here:

Blazor Excelerate is used to code generate C# classes from an Excel header row.


The ValidationComponent is a multi-use component that allows you to build data entry screens quickly.

Below is a quick sample to get you started using it.

Install Package DataJuggler.Blazor.Components

Directly on a .razor page or component:

@using DataJuggler.Blazor.Components @using DataJuggler.Blazor.Components.Interfaces;

Partial Class (code behind)

using Microsoft.AspNetCore.Components;<br> using DataJuggler.Blazor.Components;<br> using DataJuggler.Blazor.Components.Interfaces;<br>

Component in a razor app

<ProgressBar Subscriber=this Increment="5" Interval="50" Continuous="false" HideWhenFinished="true"></ProgressBar>

The hosting page or component must implement the IProgressSubscriber interface.

Implementing IProgressSubscriber Interface

This interface contains two simple methods and one property.

public partial class Index : IProgressSubscriber { ... }

IProgressSubscriber Interface Methods


/// <summary>
/// This method is called by the ProgressBar when as it refreshes.
/// </summary>
public void Refresh(string message)
    // Update the UI
    InvokeAsync(() =>


/// <summary>
/// This method Registers the ProgressBar with this app.
/// </summary>
public void Register(ProgressBar progressBar)
    // store the ProgressBar
    this.ProgressBar = progressBar;

Blazor Styled Has Been Removed

Use Cases

For now, the progress bar is meant to show the user something is happening during a long running process.

The sample project demonstrates using a Timer and on every refresh the progress bar increases the fill width by the increment value in pixels, up to the Max value. To use the timer, call the Start method on the Progress bar. In theory, and I will update this once I know it works, you should also be able to manually increase the FillWidth value, which in turn sets the FillWidthPixels string value

Example: FillWidth = 100 FillWidthPixels = 100px

The FillWidthPixels is used by the CSS for the inner graph.

Progress Bar Events

private void Timer_Elapsed(object sender, ElapsedEventArgs e)

This is the Tick event the Timer calls on every cycle. This method increments the FillWidth by the Increment value. If the value for Max is encountered, either the app will close if HideWhenFinished is true or reset if continuous is true.

ProgressBar Methods


This method is called by the Constructor of the ProgressBar and sets the DefaultValues.


Call this method to Start the timer. This is used where the graph increments on a regular basis based upon the interval set.

public void Start(int startAtValue = 0)


This method stops the timer and all future events (already in progress events may finish before stopping)

ProgressBar Properties


public int CurrentValue { get; set; }

The CurrentValue also sets the FillWidth. This property might be removed as FillWidth controls FillWidthPixels, and is what the display goes by.


public string Display { get; set; }

The display is managed by the ProgressBar.Visible property, but you can change it if needed (I think).

Visible = true - Display = inline-block Visible = false - Display = none

From Progressbar.razor: display: @Display;


public int FillWidth { get; set; }

The FillWidth is the number of pixels displayed up to the Max value.

Setting the FillWidth sets the FillWidthPixels CSS Property.

FillWidth = 90; FillWidthPixels = 90px


public int FillWidthPixeels { get; set; }

As described above, a property that is the CSS value for how many pixels to display. Set this property by setting the FilWidth integer value else you are in uncharted waters.


public bool HasSubscriber { get; }

This read only property returns true if the ProgressBar has a Subscriber.


public bool Increment { get; set; }

This value sets how many pixels left the next bubble will be.

This value is set by the Increment times the number of times Refresh was called.


public int Interval { get; set; }

This is the value in milliseconds for how often the Timer event will fire. The default value is 100 if not set.


public int Max { get; set; }

This is the maximum value the ProgressBar inner fill can go to. The Default Value is 552.


public bool NotificationInProgress { get; set; }

This property is used internally by the ProgressBar to make sure only one thread of notifications is sent to the Client at a time. This is also useful for debugging as it keeps the message chain down to single threads.


public string Position { get; set; }

This property is set on the CSS Class for position. Fixed, Absolute and Relative are the 3 I know, there may be more.


public string ProgressBackground { get; set; }

This is the string property bound to the CSS styles for the ProgressBar div. In future versions I imagine themes or other styles, or even an option to display the innter graph without the background.

<img src="">


I added a double value for Scale that allows to control how big the ProgressBar displays. The default is .5.


public bool Started { get; set; }

This property is managed internally the by the ProgressBar when Start and Stop are called.


public IProgressSubscriber Subscriber

This property registers the parent with the ProgressBar, which enables the ProgressBar to register with the host.

<ProgressBar Subscriber=this></ProgressBar>


public Timer Timer { get; set; }

The System.Timer Timer that is started when the Start method is called.


public bool Visible { get; set; }

This property sets the @Display value to either inline-block if true (visible), or none if false (invisible).

Sprite Component

I created a new Sprite component that allows you to set properties for images.

Sprite Methods

# Init

The Init method sets the Default values for the control

# Start

The Start method starts the Timer and sets the Elapsed event.

# Stop

Stops the timer and future messages.

I have another project planned for Animation called DataJuggler.Blazor.Animation. In that class I have speced out an AnimationManager in my mind, but for now I only create a Timer on one Sprite, and I use the Refresh messages to move Sprites around.

Eventually I would like this to be more automated where you give it a Start X,Y and an End X,Y position and a path could be firued out, but baby steps.

Sprite Properties

Many of the properties are identical to the ProgressBar, only the differences are listed here.


public int Height { get; set; }

The height in pixels.


public string HeightPixels { get; set; }

This value is set by the setter for Height. The string px is appended to the end.

Example: Height: 80 HeightPixels: 80px.


public string ImageUrl

This value is set as the background image for the Div.


public string Name

The name helps distinquish Sprites from other Sprites.


public int Width { get; set; }

This property sets the WidthPixels property, which in turns sets the Width of the component.


public string WidthPixels { get; set; }

This value is set when you set the Width property.

Example: <br> Width: 900 WidthPixels: 900px;

ComboBox Example

<ComboBox Name="ComboBoxControl" Parent="this" Unit="px" Width="160" HeightUnit="vh" Height="3.6" LabelText="Select:" LabelWidth=54 ZIndex=20
    Left="10" Theme="ThemeEnum.Brown" LabelLeft="-16" LabelColor="Color.Black" ButtonTextColor="Color.LemonChiffon" ButtonLeft=36 ButtonTop=-2.8
    TextSize="TextSizeEnum.SmallMedium" ListItemLeft="56" ListItemTop="0"></ComboBox>


It took me 3 attempts to get a progress bar I actually like, and I owe to Percentage Circle CSS:

CSS Percentage Circle
Author: Andre Firchow
Product Compatible and additional computed target framework versions.
.NET net8.0 is compatible.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages (3)

Showing the top 3 NuGet packages that depend on DataJuggler.Blazor.Components:

Package Downloads

A project template for creating a Blazor Image Gallery project that uses SQL Server for a backend. You will need SQL Server or SQL Server Express to run this project. See the Read Me for more info. Watch this video to see a demo


BlazorFileUpload makes it easy to upload files in Blazor projects. The 8.0 version is only for .NET8. Use 7.x version for .NET7, 6.x for .NET6. All new features / bug fixes are for .NET8 version onward. BlazorFileUpload now supports multiple file uploads!


This is for testing a thing

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
8.9.1 88 5/31/2024
8.9.0 89 5/30/2024
8.8.11 100 5/24/2024
8.8.10 91 5/24/2024
8.8.9 95 5/24/2024
8.8.8 95 5/24/2024
8.8.7 283 5/19/2024
8.8.6 94 5/19/2024
8.8.5 91 5/13/2024
8.8.4 82 5/13/2024
8.8.3 74 5/13/2024
8.8.2 70 5/13/2024
8.8.1 82 5/9/2024
8.8.0 85 5/9/2024
8.7.0 86 5/9/2024
8.6.26 86 5/1/2024
8.6.25 74 5/1/2024
8.6.24 79 5/1/2024
8.6.23 78 5/1/2024
8.6.22 87 4/30/2024
8.6.21 87 4/29/2024
8.6.20 84 4/28/2024
8.6.19 98 4/27/2024
8.6.18 100 4/27/2024
8.6.14 99 4/27/2024
8.6.12 86 4/27/2024
8.6.10 97 4/27/2024
8.6.9 88 4/27/2024
8.6.8 93 4/27/2024
8.6.7 91 4/27/2024
8.6.5 95 4/27/2024
8.6.4 94 4/27/2024
8.6.3 103 4/27/2024
8.6.2 103 4/27/2024
8.6.1 94 4/27/2024
8.6.0 97 4/27/2024
8.5.9 96 4/25/2024
8.5.8 90 4/25/2024
8.5.7 85 4/25/2024
8.5.6 92 4/25/2024
8.5.5 96 4/25/2024
8.5.4 89 4/25/2024
8.5.3 96 4/25/2024
8.5.2 94 4/25/2024
8.5.1 93 4/25/2024
8.5.0 98 4/24/2024
8.4.1 96 4/18/2024
8.4.0 83 4/17/2024
8.3.5 87 4/16/2024
8.3.4 92 4/16/2024
8.3.3 97 4/16/2024
8.3.2 81 4/9/2024
8.3.1 93 4/9/2024
8.3.0 87 4/8/2024
8.2.3 98 4/8/2024
8.2.2 91 4/8/2024
8.2.1 99 4/6/2024
8.2.0 89 4/5/2024
8.1.5 435 12/30/2023
8.1.4 357 12/30/2023
8.1.3 329 12/30/2023
8.1.2 353 12/29/2023
8.1.1 331 12/29/2023
8.1.0 359 12/29/2023
8.0.16 332 12/28/2023
8.0.15 355 12/28/2023
8.0.14 314 12/28/2023
8.0.13 337 12/28/2023
8.0.12 353 12/28/2023
8.0.11 344 12/28/2023
8.0.10 348 12/28/2023
8.0.9 347 12/28/2023
8.0.8 342 12/28/2023
8.0.7 346 12/28/2023
8.0.6 327 12/28/2023
8.0.5 337 12/28/2023
8.0.4 338 12/27/2023
8.0.3 344 12/27/2023
8.0.2 337 12/26/2023
8.0.1 369 12/18/2023
8.0.0 1,594 11/15/2023
7.14.0 379 11/10/2023
7.13.7 378 11/9/2023
7.13.6 408 11/7/2023
7.12.8 425 11/2/2023
7.12.7 535 8/28/2023
7.12.6 507 8/28/2023
7.12.5 949 8/27/2023
7.12.4 517 8/27/2023
7.12.3 524 8/26/2023
7.12.2 511 8/26/2023
7.12.1 503 8/26/2023
7.12.0 524 8/26/2023
7.10.1 583 8/14/2023
7.10.0 569 8/13/2023
7.9.22 656 7/22/2023
7.9.21 627 7/22/2023
7.9.6 608 7/19/2023
7.9.5 590 7/19/2023
7.9.3 642 7/12/2023
7.7.9 688 6/21/2023
7.7.8 624 6/4/2023
7.7.7 601 6/3/2023
7.7.6 588 6/2/2023
7.7.5 580 6/2/2023
7.7.4 640 5/14/2023
7.7.3 723 5/7/2023
7.7.2 721 3/11/2023
7.7.1 692 2/24/2023
7.7.0 708 2/24/2023
7.6.4 715 2/22/2023
7.6.3 724 2/22/2023
7.6.2 735 2/22/2023
7.6.1 740 2/7/2023
7.6.0 797 2/7/2023
7.5.15 733 2/7/2023
7.5.14 734 2/7/2023
7.5.12 717 2/7/2023
7.5.11 705 2/6/2023
7.5.10 724 2/6/2023
7.5.10-rc2 623 2/6/2023
7.5.10-rc1 572 2/6/2023
7.5.9-rc9 580 2/6/2023
7.5.9-rc8 622 2/5/2023
7.5.9-rc7 608 2/5/2023
7.5.9-rc6 549 2/5/2023
7.5.9-rc5 586 2/5/2023
7.5.9-rc4 567 2/5/2023
7.5.9-rc3 532 2/5/2023
7.5.9-rc2 568 2/5/2023
7.5.9-rc10 564 2/6/2023
7.5.9-rc1 595 2/5/2023
7.5.8 733 2/5/2023
7.5.7 734 2/2/2023
7.5.6 747 1/21/2023
7.5.5 772 1/20/2023
7.5.3 716 1/20/2023
7.5.2-rc1 588 1/20/2023
7.5.1-rc2 607 1/20/2023
7.5.1-rc1 571 1/20/2023
7.5.0 749 1/19/2023
7.4.25 803 12/28/2022
7.4.25-rc1 611 12/28/2022
7.4.24 786 12/28/2022
7.4.23 781 12/28/2022
7.4.22 738 12/28/2022
7.4.21 753 12/28/2022
7.4.20 787 12/28/2022
7.4.19 730 12/28/2022
7.4.19-rc2 578 12/28/2022
7.4.19-rc1 561 12/28/2022
7.4.18 769 12/27/2022
7.4.18-rc1 612 12/27/2022
7.4.17 766 12/27/2022
7.4.16 762 12/27/2022
7.4.15 793 12/27/2022
7.4.14 823 12/27/2022
7.4.12 763 12/27/2022
7.4.11 736 12/27/2022
7.4.10 755 12/27/2022
7.4.9 773 12/27/2022
7.4.8 757 12/27/2022
7.4.7 719 12/26/2022
7.4.6 686 12/26/2022
7.4.5 758 12/26/2022
7.4.4 774 12/26/2022
7.4.3 789 12/26/2022
7.4.0 755 12/24/2022
7.3.30 789 12/24/2022
7.3.29 766 12/24/2022
7.3.28 771 12/22/2022
7.3.27 757 12/22/2022
7.3.25 779 12/22/2022
7.3.24 729 12/21/2022
7.3.23 797 12/21/2022
7.3.22 788 12/21/2022
7.3.21 770 12/21/2022
7.3.20 726 12/21/2022
7.3.19 805 12/20/2022
7.3.18 784 12/20/2022
7.3.17 811 12/20/2022
7.3.16 786 12/20/2022
7.3.15 778 12/20/2022
7.3.14 767 12/19/2022
7.3.12 788 12/18/2022
7.3.10 800 12/18/2022
7.3.9 774 12/18/2022
7.3.8 776 12/18/2022
7.3.7 793 12/18/2022
7.3.6 795 12/18/2022
7.3.5 828 12/17/2022
7.3.4 810 12/17/2022
7.3.3 759 12/17/2022
7.3.2 766 12/17/2022
7.3.0 771 12/17/2022
7.2.35 737 12/17/2022
7.2.34 788 12/17/2022
7.2.33 775 12/17/2022
7.2.32 782 12/17/2022
7.2.30 770 12/17/2022
7.2.29 796 12/17/2022
7.2.28 801 12/16/2022
7.2.27 785 12/16/2022
7.2.25 848 12/16/2022
7.2.24 801 12/11/2022
7.2.23 774 12/11/2022
7.2.22 782 12/11/2022
7.2.21 818 12/11/2022
7.2.20 786 12/11/2022
7.2.19 786 12/11/2022
7.2.18 764 12/11/2022
7.2.17 796 12/11/2022
7.2.16 788 12/11/2022
7.2.15 782 12/11/2022
7.2.14 795 12/11/2022
7.2.12 769 12/11/2022
7.2.11 760 12/11/2022
7.2.10 781 12/11/2022
7.2.9 754 12/5/2022
7.2.8 759 12/5/2022
7.2.7 829 12/4/2022
7.2.6 771 12/4/2022
7.2.5 832 12/4/2022
7.2.4 784 12/3/2022
7.2.3 798 12/2/2022
7.2.2 760 12/2/2022
7.2.1 753 12/2/2022
7.2.0 759 12/1/2022
7.1.15 787 12/1/2022
7.1.14 794 11/30/2022
7.1.12 780 11/30/2022
7.1.11 775 11/30/2022
7.1.10 786 11/29/2022
7.1.9 808 11/29/2022
7.1.8 825 11/29/2022
7.1.7 786 11/28/2022
7.1.6 805 11/28/2022
7.1.5 813 11/21/2022
7.1.3 823 11/19/2022
7.1.2 803 11/19/2022
7.1.1 852 11/19/2022
7.1.0 789 11/19/2022
7.0.16 791 11/18/2022
7.0.15 794 11/18/2022
7.0.11 822 11/18/2022
7.0.10 808 11/16/2022
7.0.9 819 11/16/2022
7.0.8 795 11/16/2022
7.0.7 840 11/15/2022
7.0.6 852 11/15/2022
7.0.5 813 11/15/2022
7.0.4 861 11/10/2022
7.0.3 821 11/9/2022
7.0.3-rc1 564 11/7/2022
7.0.1-rc1 103 11/3/2022
7.0.0-rc1 119 10/20/2022
6.0.1 1,002 3/26/2022
6.0.0 985 1/23/2022
5.0.0 844 11/11/2021
2.0.0 803 11/11/2021
1.7.2 781 11/7/2021
1.7.1 825 11/2/2021
1.7.0 898 10/24/2021
1.6.7 793 10/23/2021
1.6.5 823 10/19/2021
1.6.4 821 10/16/2021
1.6.3 826 10/14/2021
1.6.2 757 10/14/2021
1.6.0 847 7/5/2021
1.5.14 822 5/27/2021
1.5.12 810 5/24/2021
1.5.11 789 5/24/2021
1.5.10 834 5/24/2021
1.5.9 785 5/24/2021
1.5.8 835 5/24/2021
1.5.7 829 5/24/2021
1.5.6 836 5/23/2021
1.5.5 877 5/23/2021
1.5.4 813 4/3/2021
1.5.2 993 11/30/2020
1.5.1 990 11/30/2020
1.5.0 1,358 11/13/2020
1.4.11 1,067 6/6/2020
1.4.10 1,029 6/6/2020
1.4.9 964 6/5/2020
1.4.8 1,038 6/5/2020
1.4.7 971 6/5/2020
1.4.6 1,000 5/30/2020
1.4.5 1,087 5/30/2020
1.4.4 1,056 5/29/2020
1.4.3 970 5/29/2020
1.4.2 968 5/1/2020
1.4.1 956 4/28/2020
1.3.5 1,060 4/13/2020
1.3.4 1,033 4/12/2020
1.3.3 939 4/12/2020
1.3.2 1,036 4/12/2020
1.3.1 987 4/12/2020
1.3.0 1,004 4/12/2020
1.2.1 970 4/10/2020
1.2.0 1,059 4/10/2020
1.1.2 1,542 2/8/2020
1.1.1 1,027 2/2/2020
1.1.0 1,069 2/2/2020
1.0.7 1,043 1/30/2020
1.0.6 942 1/30/2020
1.0.5 997 1/30/2020
1.0.4 1,025 1/29/2020
1.0.3 1,052 1/29/2020
1.0.2 1,031 1/22/2020
1.0.1 1,007 1/22/2020
1.0.0 1,046 1/20/2020

Version 8.0.0: This project has been updated to .NET 8.

Version 7.14.0: I added a Label component.

Version 7.13.7: Updated the Read Me with information about the new video.

Version 7.13.6:
New Video:

How To Use The Grid

Version 7.13.5
Novermber 7, 2023: DataJuggler.Blazor.Components passed 100,000 Downloads
I updated the Grid and created a new sample project to demo the Grid.

The sample project is called BubbleReportWeb

Version 7.12.8
November 2, 2023: I added a ClassName parameter to the Grid

August 26, 2023: In celebration of 75,000 NuGet installs, I added two new features.
First, I created a CheckedListBox component. I also added a new feature to the ComboBox,
and that new features is a CheckedListMode. The combobox now supports check boxes and
multiple selections.

August 13, 2023: DataJuggler.UltimateHelper and DataJuggler.Excelerate were updated.

July 22, 2023: More updates  to NuGet package DataJuggler.Excelerate, and I need this update for my project
Blazor Excelerate

July 21, 2023: I updated NuGet package DataJuggler.Excelerate, and I need this update for my project
Blazor Excelerate

July 18, 2023: I fixed the checkbox component. The binding wasn't working when I thought I fixed it last time.

July 9, 2023: I removed floats from the ComboBox component. I was having trouble "stacking" a ValidationComponent
below a ComboBox, so hopefully this fixes it. I also added a ComboBoxWidth parameter property on the ComboBox.

July 6, 2023: I added an AutoComplete property, which defaults to false.
The reason for this is browsers like to fill in values, and the browser is confusing Email Address and User Name fields.

July 2, 2023: I removed the floats from the ValidationComponent. This will probably break
some existing users, but I am trying to make the control more consistant to work with.
I also added a MarginBottom property. Use this in conjunction with the HeightUnit, which
defaults to px (pixels) and the MarginBottom is set to 8 by default.

June 3, 2023 B: I updated the Sprite component to have a SetVisible and optional parameter for Hide
when you call Stop.

June 3, 2023: My first attempt at Disabled for the Validation Component was wrong. I think my fix will work. Testing now.

June 2, 2023: I added an Enabled property and a method SetEnabled to the validation component.
If Enabled is false, disabled will appear in the input objects and be read only.

May 12, 2023: I updated the validation message to do a replace on Caption if it has colons in it. So you
can say User Name 'XYZ' is already taken, without it appearing 'User Name: 'XYZ'.

May 7, 2023: While working on a project, I noticed the LabelWidth doesn't work if the Column1Width is
too small. I added code to LabelWidth to set Column1Width if it is too narrow. The order parameters
are set can affect this. I also realized LabelTop was not used, so I added LabelTop to Column1 (CssClass).

Feb. 22, 2023: I added LabelClassName to the ComboBox.
I also added LabelLeft and LabelTop to the ComboBox.

Feb. 1, 2023: I updated the CSS class with a clear class.

January 21, 2023: I was having a problem with Nuget packages being built. Not sure what broke.
Testing again.

Dec 28, 2022
v7.4.19-rc1: I am expirementing with Position Sticky for the button. The button is moving on me and I am trying
to prevent that.

Dec 27, 2022
v7.4.18: Float Left didn't work, so the 7.4.18-RC1 is removed.

12.26.2022: The button in the grid didn't work first attempt. May try again later. I removed
the Parameter tag from the ImageButton ClickHandler property.

12.25.2022: I am testing a button for a column in the grid.

12.21.2022: Trying another way to do visibibility of the ComboBox.

12.19.2022: I am cleaning up the ValidationComponent.

12.18.2022 B: I accidently left a color red in I was using for placement issues.

12.18.2022: I finally fixed the ValidationComponent. You should be able to just
create one and set a few properties and have them line up correctly now.

12.17.2022: I added an AutoComplete parameter to the ValidationComponent.
Trying to prevent browsers from filling in forms if you set this to false.
Also added Float Left to the Label and TextBox so that they stay inline better.

12.16.2022: The ComboBox was defaulting to TextSizeEnum.Large. I fixed this to
use the TextSize default setting of Medium.

12.11.2022: I changed the way Height & Width work again for the ValidationComponent. I over complicated this at first by having
TextBoxHeight / Width and a Control Height / Width. Now the Height & Width is applied to the TextBox.
I added a HeightUnit property. I also added two parameter properties: ExternalId and ExternalIdDescription.
NamedParameter also added the same two properties, and the values are set when the Enter key is pressed.
A added a 'SendAllTextToParent' boolean property to the ValidationComponent. I also added a method
SetTextColor. I added a Refresh method to the ImageButton. I added an EditorClassName to the column object
so you can style columns. I now use Column.ZIndex for the ZIndex for the edit display control. I removed
the EditZIndex property from the Grid.

12.10.2022: I added a ShowCaption parameter to the ValidationComponent. If the Caption parameter is set,
ShowCaption is set to true, else the caption will not show.
I also changed the way Width and Height work. Now there is a Unit (string) property, and HeightStyle & WidthStyle.
These two read only properties return Height + Unit and Width + Unit.

12.5.2022: I added an EditZIndex property to the grid. So the validation component used to edit has a z index.

12.4.2022 C: I updated DataJuggler.Excelerate to the latest version which includes Row.FindColumnById.

12.4.2022 B: I realized there can be more than one column needing to be edited, so I added Column.EditMode.
Only the column with Column.EditMode will show.

12.4.2022: I changed how the grid works for entering EditMode. The grid now uses EditorText property
instead of Column.ColumnText when entering Edit Mode. If EditText is not set, EditorText returns ColumnText.

12.3.2022: I realized today I did not have Visible defaulting to true on the ValidationComponent.

12.2.2022: Attempting to have the ValidationComponent also SelectAll when it gets focus. Making it easier
to change existing text. I also added a property Visible and a Property for Display. The css class
named DisplayStyle is set to none if Visible = false, else Display is used. The default display
if nothing is set is inline-block.

12.1.2022: I fixed the ValidationComponent to send an EnterPressed message to a parent. Before it would
only send the message if in a grid. I have the edit in place working for a client's project with both the grid
and the ValidationComponent.

11.30.2022: I added some code to the validation component that should set focus to existing text when you
set focus to the text in a textbox when you enter it. Not sure if I can make this a toggleable feature.
I also updated the way Escape is handled in the grid. I also changed the CSS so the textbox appears inline
at closer to the place where the read only display control was. Need to make this a parameter.

11.29.2022: I am attempting to have the grid go into edit mode in the same location as the cell being edited.
I am testing hitting Escape to have the grid exit edit mode. I have the grid exiting Edit Mode, but a call to
the parent that displays the data seems necessary.

11.28.2022: I added the property Sender = this to the Grid when the Enter Key is pressed.
I also set the SetFocus part to be in a Try Catch in case it is able to trap the error caused by SetFocus
if a control is not visible.

11.21.2022: I added two properties to the Grid component:
ExternalId - an Id such as a Table Id or other ways to identify how to save the data.
ExternalIdDescription - A string to help identify the ExternalId.

11.19.2022: The ComboBox was ignoring the TextColor when you Expand or Close the ComboBox.
I added a bool property for Rendered. The first pass I change the text color. Also, the TextSize for
the ComboBox and the ImageButton was just changed to use "em" instead of "vh".
The text size should change with zoom.

11.18.2022: I am working on the ComboBox. I added a new theme for Black. It might not be working right,
so use with caution at the moment.

11.16.2022 C - I am working on the ImageButton and the ComboBox which uses the ImageButton.
Things might change in the near future as I work through them.

11.18.2022: I finally have the ComboBox working. More samples coming soon.

11.16.2022 B: I changed WidthStyle to be a read only property. For some reason I am having trouble
getting the ComboBox to show up in a new project.

11.16.2022: A newer veresion of DataJuggler.Excelerate was updated.

11.15.2022: I added a Grid and updated the CSS file DataJuggler.Blazor.Components.

11.10.2022: The grid is currently working in read only mode.
I am working on being able to edit in place. I should have a demo project ready later this year.

11.8.2022: This project has been updated to .NET 7.
Use a 6.x version for .NET 6.

11.15.2022: The Grid is working. I will publish some examples after I finish my clients project.
Also updates the CSS file with values of:

down(0 - 1000)
left(0 - 1000)
right(0 - 1000)
up(0 - 1000)


11.8.2022: I am working on a Grid. The grid is a work in progress.

10.20.2022: This version has been updated to .NET7.
11.03.2022: I am working on a .NET 7 version. This includes a new Grid component.

3.26.2022: Twitter barred me, so I removed the Twitter button from two of my sites, plus Bootstreap from all of
my packages and libraries. I don't use it. Motivated me to build a site to put them out of a business.

1.23.2022: Version 6.0.0 has been released, which now targets .NET6.

Version 5.0.0: Changed back to .Net 5.0, and changed the version number to match. .Net 6.0 is not ready
for production at this time (for my projects, which is all that matters).

Version 2.0.0: I updated to version 6.0. I tried to multi-target version 5.0 and version 6.0, but
AspNet.Core.Components version 6.0 does not let you target .Net5.0.

I want to take advantage of any speed improvements for 64 bit for
PixelDatabase.Net website (, so I am updating to 6.0.

Version 1.7.2 is the last .Net 5.0 version most likely. Sorry for any inconvenience, but I usually
only do new development on the latest unless I have a client that can't upgrade.

Version 1.7.2: The Nuget package DataJuggler.UltimateHelper was updated, so I released a new version of this

Version 1.7.1: DataJuggler.UltimateHelper was updated, so I updated this project. No code changes.

Version 1.7.0: I updated to version 1.7 since I added a bunch of properties to many components.

Version 1.6.7: checking in with a few fixes and properties added for positioning elements.

Version 1.6.6: I added a few ZIndex properties to the ComboBox, and also I added a ZIndex property to the ValidationComponent. I had an issue where the ComboBox when it dropped down was behind another item.

Version 1.6.5: I started working on Animating sprites. The current implentation has too much flickering. I read about ways to double buffer and smooth it out, but for now it was just an idea I wanted to add to my new project
Blazor.Excelerate. If my animation could have been done in a few hours I would have included, but
for now I will just publish it and make this a 'nice to have feature if I ever get bored'.

Version 1.6.4: I added a SetVisible method and a Visible parameter to the ImageButton.

Version 1.6.3: Added Top and Left properties to the ValidationComponent.

Version 1.6.2: I did some more testing and the ComboBox and ImageButtons had some improvements made.

1.6.0: Added two new methods to the ValidationComponent:

1.5.12: Add the TextBoxHeight didn't do anything, since I forgot to apply it to the TextBoxCSS. Now fixed.

1.5.11: The Height property needed a TextBoxHeight property also.

1.5.10: I added a Height property. This is needed when Multiline is set to true. I also added a DefaultTextBoxHeight and MultilineTextBoxHeight. These have default values of 3.2 and 8 for now as I test, but can be set in your implementation. When setting Multiline to true, I needed a value to change the height to.

1.5.9: I changed the default TextBoxWidth to 30 from 76, which messed up existing users

1.5.8: I added a property 'TextBoxWidth', which is a double and set the value for TextBoxWidthPercent, a string.

1.5.7: I added a Width property to the ValidationComponent. This value is in percentage, and it defaults to 80 percent. Not sure if 80 is the right value or not. I also changed the Text-Align property to top for the label. This may need to be a Parameter.

1.5.6: I forgot to add the Parameter tag to the Multiline propery.

1.5.5: I added a Multiline propery to for description or long text fields

1.5.4: I added the tag Parameter to the ValidationComponent.LabelColor and TextBoxBackColor.

1.5.2: I had a problem publishing a .Net 5 project, trying again.

Version 1.5.1: I accidently marked this project as depreciated, when I was having a temporary problem with my BlazorFileUpload component converting it to .Net 5. That has been resolved.

Version 1.5.0 - I updated to .Net 5.

1.5.0: .Net 5.0 conversion of Nuget packages and Target Framework.

New version 1.4
Validation Component

1.4.11 - For some reason I added Open and Close curly brackets to a Blazor Styled Class.
Oops. Time for bed soon.

1.4.10 - I was not using the Css classes that were in this library, except for the circle.scss, so I removed them.
I also added some properties for the ValidationControl to help style it outside of this component.

1.4.9 - I added CheckBoxXPostion and CheckBoxYPostion and got rid of CheckBoxVerticalPosition.
Sorry for the incovenience if you upgraded.

1.4.8 - This is the same as 1.4.6. I have to update the control more carefully because I broke everything.
I really hope this works.

1.4.7 - Rolled Back Due To Errors Found After Publish

1.4.6 - I made a breaking change to the Sprie component, but now when you set Sprite.Height or Width, it translates to HeightStyle = Height + "vh" and setting Width sets WidthStyle to Width + "%".
Previously it was set to HeightPixels and WidthPixels, and this causes zoom differences in a site.

1.4.5 - I changed the XPosition and YPosition values to set XPositionStyle and YPositionStyle instead of
XPositionPixels and YPositionPixels, because I changed the value to use % for X and vh for Y to make
it scale better. Using px makes cites appear differently depending on zoom values.

1.4.4 - I forgot to add the Opacity property to the sprity. Oops.

1.4.3 - I added an Opacity property to the Sprity component.

1.4.2 - I added a new property called CheckBoxVerticalPosition to the ValidationControl. This is only applicable
when CheckBoxMode = true.

1.4.1 - I fixed the images for UniqueImageUrl and TakenImageUrl to be embedded in the component.

1.4.0 - I added a new ValidationComponent.

1.3.5 - I added a SetClientHandledIncrement method so I can turn this value on or off from outside the component.

1.3.4 - I got this working finally. The property Important was needed to make the text color override.
I actually am not using Blazor Styled for the Progress Bar now, which makes setup just add the Nuget package and the Css reference to Circles.css, which is easier for everyone.

1.3.3 - I added 3 new Parameters:
Size: Size, Small - Medium - Large - Medium is default
Color: Blue, Green or Orange, Blue is Default
Theme: Light or Dark, and I chose Dark as default

Also, two properties for Text:
OverrideThemeColorForText - defaults to false.
If true, and a TextColor is provided, the TextColor will be used instead of the Theme color for Text.

TextColor - The color to use for Text.

1.3.2 - This actually works now. I am working on the documentation now for the new features.

1.3.1 - I included the div for progresscontainer, which is meant to be used by the client, or I may expose a class for it soon.

1.3.0 - My progress bar went from little league to the minors with this upgrade. I found a pure CSS way, and it works really well. Themes and more are coming, this is the first release, so it is back in beta.

1.2.1 - I realzied my ValidationComponent had a lot of code specific to my project PixelDatabase.Net, so I removed it for now. I will update it again later.

1.2.0 - I added a new component called a ValidationComponent.
I also removed the ProgressBar from the Sprite Interface.
I will update the Progress Bar in the near future, as I found a pure CSS way that is pretty cool.

1.1.2 - I added a BackgroundColor property. To use it, you must set BackgroundImage to an empty string to override DarkBackground image.

1.1.1 - The new ProgressBar now has a Theme for Circles or Squares. Also, I updated the Nuget packages to multi-target so .Net Standard and .Net Core can use them, without having to use the .Net Framework classes.

1.1.0 - I didn't like my first progressbar as once I started testing in a real world environment it looked very choppy and was a little too futuristic to be used in most apps. This new look is pretty clean and their is a Theme option now for Squares or Circles.

1.0.7 -After removing BlazorComponentBase class, OnComponentRegistered was no longer needed, so I removed it.

1.0.6 - BlazorComponentBase class didn't seem to work as I expected, so I killed it.

1.0.5 - I created a new BlazorComponentBase class and added a new method to IBlazorComponentParent called OnComponentRegistered.

1.0.4 - I created two new classes NamedParameter and Message.
A message contains a Text property a collection (Generic List) of NamedParameters.

This is a breaking change of the ReceiveData methods for the IBlazorComponent and IBlazorComponent parent .
Now is the time to break anything.

1.0.3 - I added two generic interfaces for IBlazorComponent and IBlazorComponent interface.

1.0.2 - I added Scale property to the ProgressBar to make it easy to adjust the size.

1.0.1 - I added a Sprite component.

1.0.0 This is the first version I am releasing along with a Sample.