CodesCove Blazor Components:

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.

See some of the components in the demo pgae: CodesCode.BlazorComponents examples.

More info also available via CodesCove homepages

Generic installation instructions

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.

Example usage in a razor page

<ObjectsToTable ClassInstanceList=yourListOfClassObjects TableStyle="border: solid;" ThStyle="font-size:large; color:blue;" TrStyle="color:red" TableClass="col-4" />

ObjectsToSelectableTable

Same as ObjectsToTable but has option to select rows and other features.

• 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: Paramter: ShowSelctionCount. Default is true.
• Hide columns: Hide columns based on their index (0 starting). HideColumnsByIndex is IEnumerable<int>.

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

Example usage in a razor page

<button class="btn btn-primary" @onclick="ShowModal">Click me</button> <ModalInfoDialog Control=infoControl /> @code { private ModalInfoDialog.ModalInfoControl? infoControl; private void ShowModal() { infoControl = new ModalInfoDialog.ModalInfoControl("Hi", "Testing info modal"); } }

ModalOkDialog

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.

Example usage in a razor page

<ToggleButton @bind-Value="@toggleValue" TrueText="Hide" FalseText="Show" OnClickCallBack="@MyOptionalCallBackFunc" /> @if(toggleValue) { <p>Toggle value is true</p> } @code { bool toogleValue; private void MyOptionalCallBackFunc(bool value) => Console.WriteLine("VALUE CHANGE" + value); }

ToggleSwitch

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).

Example usage in a razor page

<ToggleSwitch @bind-Value="@togglevalue" SwitchType=1 Color="green" Size="large" OnClickCallBack="@MyOptionalCallBackFunc" /> @if(toggleValue) { <p>Toggle value is true</p> } @code { bool toogleValue; private void MyOptionalCallBackFunc(bool value) => Console.WriteLine("VALUE CHANGE" + value); }

Spinner

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.

Example usage in a razor page

<Spinner SpinnerColor=1 SpinnerID=2 /> <Spinner SpinnerColor=2 SpinnerID=1 SpinnerSpeed="fast" /> <Spinner SpinnerColor=3 SpinnerID=2 /> <Spinner SpinnerColor=4 SizeInPx=50 /> <Spinner CustomSpinnerImagePath="my_image_at_wwwroot_path.png" SizeInPx=60 SpinnerSpeed="slow"/>

DropdownMenu

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

Example usage in a razor page

<Slider @bind-Value="@currentSildeValue" Min=0 Max=100 OnValueChangeCallBack="@OnChange" Style="width:50%"></Slider> @code { private int currentSildeValue = 0; private void OnChange(int value) { Console.WriteLine(value); } }

DatePicker

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.

Example usage in a razor page

<DatePicker @bind-Value=date OnValueChangeCallBack=OnChangeDate></DatePicker> <div>@date</div> @code { public DateOnly? date; private void OnChangeDate(DateOnly? date) { Console.WriteLine("Selected date " + date?.ToShortDateString()); } }