This project consists of a TextBoxComponent, Multiline TextBox, CheckBox, ComboBox,
CheckedListComboBox, CheckedListBox, Grid, Label, Calendar Component, Time Component
and more.
The CSS file DataJuggler.Blazor.Components.css contains many useful classes to help style
and position objects.
This version is for .NET 9.0.
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.
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
https://youtu.be/WkcwQ9kOfw4
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.
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.
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: https://youtube.com/DataJuggler
Thanks
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:
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
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:
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
TopStreakGrid.Refresh();
}
}
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.
This class consists of an ImageButton, ProgressBar, Sprite, ValidationComponent, ComboBox,
CheckedListBox and a Grid.
CheckedListBox
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.
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
Refresh
/// <summary>
/// This method is called by the ProgressBar when as it refreshes.
/// </summary>
public void Refresh(string message)
{
// Update the UI
InvokeAsync(() =>
{
StateHasChanged();
});
}
Register
/// <summary>
/// This method Registers the ProgressBar with this app.
/// </summary>
public void Register(ProgressBar progressBar)
{
// store the ProgressBar
this.ProgressBar = progressBar;
}
BlazorStyled Setup
Blazor Styled is a great component and the code and documentation are available here:
Here are my paraphrase of the instructions for quick setup:
Add Nuget Package BlazorStyled to your project. It should be installed with DataJuggler.Blazor.Components, but it still may need to be installed.
Open Startup.cs and in the ConfigureServices method, add this line:
services.AddBlazorStyled();
Open Imports.razor and add the following:
@using DataJuggler.Blazor.Components
@using BlazorStyled
Open (underscore)Host.cshtml and add this line at the bottom of the Head section:
@(await Html.RenderComponentAsync<BlazorStyled.ServerSideStyled>(RenderMode.ServerPrerendered))
The documentation of BlazorStyled may still be out of date as Visual Studio changed RenderComponentAsync method since the BlazorStyled docs were written. I have been told this will be fixed.
That should be all thats required to get BlazorStyled configured. I will update this page if I can find a way to automate this part.
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 used by BlazorStyled.
Example: FillWidth = 100
FillWidthPixels = 100px
The FillWidthPixels is used by the CSS for the inner graph.
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
Init
This method is called by the Constructor of the ProgressBar and sets the DefaultValues.
Start
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)
Stop
This method stops the timer and all future events (already in progress events may finish before stopping)
ProgressBar Properties
CurrentValue
[Parameter]
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.
Display
public string Display { get; set; }
The display is managed by the ProgressBar.Visible property, but you can change it if needed (I think).
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
FillWidthPixels
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.
HasSubscriber
public bool HasSubscriber { get; }
This read only property returns true if the ProgressBar has a Subscriber.
Increment
[Parameter]
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.
Interval
[Parameter]
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.
Max
[Parameter]
public int Max { get; set; }
This is the maximum value the ProgressBar inner fill can go to.
The Default Value is 552.
NotificationInProgress
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.
Position
public string Position { get; set; }
This property is set on the BlazorStyled CSS Class for position. Fixed, Absolute and Relative are the 3 I know, there may be more.
ProgressBackground
public string ProgressBackground { get; set; }
This is the string property bound to the BlazorStyled 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.
Scale
I added a double value for Scale that allows to control how big the ProgressBar displays. The default is .5.
Started
public bool Started { get; set; }
This property is managed internally the by the ProgressBar when Start and Stop are called.
Subscriber
[Parameter]
public IProgressSubscriber Subscriber
This property registers the parent with the ProgressBar, which enables the ProgressBar to register with the host.
<ProgressBar Subscriber=this></ProgressBar>
Timer
public Timer Timer { get; set; }
The System.Timer Timer that is started when the Start method is called.
Visible
[Parameter]
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.
Height
[Parameter]
public int Height { get; set; }
The height in pixels.
HeightPixels
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.
ImageUrl
[Parameter]
public string ImageUrl
This value is set as the background image for the Div.
Name
[Parameter]
public string Name
The name helps distinquish Sprites from other Sprites.
SpriteStyle
public string SpriteStyle { get; set; }
This property is used as the CSS class for BlazorStyle.
Width
[Parameter]
public int Width { get; set; }
This property sets the WidthPixels property, which in turns sets the Width of the component.
WidthPixels
public string WidthPixels { get; set; }
This value is set when you set the Width property.
