Here's consolidatation of some of the Blazor components that we have made and often use in our projects. We will be adding them along other project work since we are using this same package.
Import the nuget package and add @using CodesCove.BlazorComponents to the _Imports.razor file. Most of components uses bootstrap for css styling so install that also.
ObjectsToTable
Renders a simple html table from array of class objects using property names as a column names and property values as cell values.
Notice that only public properties of the class are rendered. Normal variable fields and private members are not rendered.
You can style each table element and assign a class value (like bootstrap classes) to them via simple string parameters
Notice. Table uses bootstrap in the default CSS styling. Set the THeadClass (and other T.. style and class parameters) value to override the default.
Same as ObjectsToTable but has option to select rows and other features.
You can select individual rows or all rows that are not filtered away. Selections are affected across pages (ie. selecting all on one page selects all on other pages also).
ClassInstanceList: Set here your on list / array of class objects. Public properties (not normal variable fields) are rendered to the table.
@bind-Selections: Selected rows are binded to SelectionList type of parameter that holds realtime collection of selection state of the rows and has also pointer to the actual data object. You can use helper methods to access the actual objects: .GetSelectedObjects and .GetUnSelectedObjects
Pages: You can set maximum value for rows in a single page. If row count exeeds the max pages value then more pages are added. Parameter: MaxRowsPerPage
Filtering: You can also filter and sort the table. Whole table is filtered, not just the current page. Parameter: ShowFiltering. Default is true.
Sorting: You can also sort the table. Whole table is sorted, not just the current page. Parameter: ShowSorting. Default is true.
Header texts: You can override default column header texts via TableHeadersByIndex and TableHeadersByProperty paramaters. These are Dictionary type where Key is index (1st is 0) or property name and Value is the new header text.
Selection count: Hide / show selection count. Selection count incudes the selected row count and the total row count across pages: Paramter: ShowSelctionCount. Default is true.
Hide columns: Hide columns based on their index (0 starting). HideColumnsByIndex is IEnumerable<int>.
Enable/Disable selection functionality. Parameter: SelectionsEnabled. Default is true.
Enable/Disable JSON file export of the selected rows. If enabled json export button will be shown. Parameter: JsonExportEnabled. Default is true.
Enable/Disable CSV file export of the selected rows.If enabled CSV export button will be shown. Parameter: CSVExportEnabled. Default is true.
Set CSV file field delimeter. Parameter: CSVFieldDelimiter. Default is comma.
Configuration extensions: You can define extra features via Configuration parameter that is type of ObjectsToSelectableTable<yourclass>.TableConfiguration.
ReplaceWithInfoButton: array of 0 starting indexes of the columns whose values are replaced by info button. By pressing the button the modal window is opened that show the actual value.
InfoButtonText: info button text that are rendered based on ReplaceWithInfoButton indexes.
ReplaceWithHyperlink: array of 0 starting indexes of the columns whose values are replaced by hyperlink
HyperlinkText: Hyperlink text that are rendered based on ReplaceWithHyperlink indexes. Default is the actual link
CheckIfLinkIsWellFormatted: Hyperlink text is checked if its well formatted uri. If it is then hyperlink is rendered, otherwise only text is rendered. Default is true
AddCallbackButton: Set to true if you want append callback function button column. Default is false
CallbackHeader: Callback column header text. Default is Action
CallbackText: Callback columns button text. Default is Execute
onClickCallback: Set here the callback function(s) that should be invoked when callback button is pressed. Notice that callback function has one parameter that is the type of object your table is renedering. It will return the object in the same row that the callback button is pressed.
DateTimeFormatString: Renders all DataTime type of properties with string formatter defined here. I.e "yyyy-MM-dd".
Notice! If you update the object list then it's recommended to set the SelectionList and ClassInstanceList variable to null and call to StateHasChanged before the update.
myData = null;
mySelections = null;
base.StateHasChanged();
myData = SetMyNewData()...
Example usage in a razor page
<ObjectsToSelectableTable ClassInstanceList=myArrayOfClassObjects @bind-Selections="MySelections" Configuration="config"/>
<p>Selected objects</p>
@foreach(TypeOfMyClassObject obj in MySelections.GetSelectedObjects()) {
<p>@obj.YourClassMemberProperty.ToString()</p>
}
<p>Unselected objects</p>
@foreach(TypeOfMyClassObject obj in MySelections.GetUnSelectedObjects()) {
<p>@obj.YourClassMemberProperty.ToString()</p>
}
@code {
private ObjectsToSelectableTable<TypeOfMyClassObject>.SelectionList? MySelections
ObjectsToSelectableTable<TypeOfMyClassObject>.TableConfiguration config = new()
{
ReplaceWithInfoButton = new int[] { 0,1 }, //first and second column values are replaced by info button
InfoButtonText = "info",
ReplaceWithHyperlink = new int[] { 3 }, //fourth column values are formatted as hyperlink
HyperlinkText = "Link",
AddCallbackButton = true, // add callback buttons to the table rows (new column is appended to the table. Does not affect the actual table data)
onClickCallback = (obj) => Console.WriteLine(obj.Name + " " + obj.Age), // Callback button executes custom code. .Name .Age presents here your class properties.
DateTimeFormatString = "yyyy-MM-dd" // All DataTime fields are rendered in the specified format
};
}
ModalInfoDialog
Renders a simple modal info dialog with user defined title and text
Renders a simple modal ok / nok dialog with user defined title and text. Set callback funtion to OnCloseCallBack paramer to get the boolean result (OK=true, NOK=false)
Example usage in a razor page
<button class="btn btn-primary" @onclick="@OpenOkModal">Open modal</button>
<ModalOkDialog Control="@okControl" OnCloseCallBack="@OnModalClosed"/>
@code {
private ModalOkDialog.ModalOkControl? okControl; //defines the control class for ModalOkDialog (dosent need to be instatiated. Only instantiate when opening the control)
private void OpenOkModal() => okControl = new ModalOkDialog.ModalOkControl("Hi", "Testing ok modal"); //opens the dialog
private void OnModalClosed(bool value) => Console.WriteLine("Modal result: " + value); //is run as callback when dialog closes
}
ToggleButton
Renders a simple toggle button that binds a boolean varbiable (@bind-Value) with configurable toggle texts (TrueText, FalseText) and optional call back service (OnClickCallBack)
Use Class and Style properties to set your own button css styling.
Renders a simple toggle switch that binds a boolean varbiable (@bind-Value). Set Boxed (1) and rounded (2) versions via SwitchType
Optional call back service (OnClickCallBack). Set the switch color via Color (blue=default, red, yellow, green) and size via Size (large, medium=default, small).
Renders a spinning image with few selections about color (SpinnerColor: 1=blue, 2=red, 3=yellow, 4=green), size (SizeInPx), speed (SpinnerSpeed: slow, medium, fast) and built-in spinner image (SpinnerID)
Supports also custom images via CustomSpinnerImagePath.
Renders a dropdown menu that takes string list as a parameter. Get seleceted value and index via @bind-Value and @bind-Index parameterers.
Set CSS styling via DropdownStyle, SelectedItemStyle and ItemStyle parameters. You can also set initial selected value with @bind-Value. Dropdown menu supports also on-the-fly items change.
If the Items is null then the DropdownMenu is not rendered. Items can be empty array.
Example usage in a razor page
<div>
<DropdownMenu DropdownStyle="font-size: large" ItemStyle="color: blue" SelectedItemStyle="color: red" @bind-Value=selectedItem @bind-Index=selectedIndex OnChangeCallBack=ValueChange Items=dropDownItems> </DropdownMenu>
</div>
@code {
public string[] dropDownItems = new string[] { "one", "two", "three" };
private string? selectedItem = "two"; //binded variable holds the selected value. You can also set initial value via binded variable.
private int? selectedIndex; //binded variable holds the selected index
private void ValueChange(string value) => Console.WriteLine("Dropdown value " + value); //optionally get the changed value via delegate
}
Slider
Renders a slider. This is an initial version. Slider takes int parameter for Min and Max values. Use @bind-Value to set and get the slider value.
You can also set delegate to OnValueChangeCallBack. Set Style parameter to override default css styling
Renders a date picker. Use @bind-Value to get selected date. Value is nullable DateOnly type.
Optionally set your own callback to OnValueChangeCallBack parameter.
If date is cleared then the date is set to null.