loresoft / loresoft.blazor.controls Goto Github PK

View Code? Open in Web Editor NEW

121.0 9.0 25.0 14.25 MB

Blazor Controls

Home Page: https://blazor.loresoft.com/

License: MIT License

C# 85.31% CSS 14.69%

blazor-controls typeahead data-grid datetimepicker date-picker blazor-webassembly blazor blazor-server

loresoft.blazor.controls's Introduction

Overview

The LoreSoft Blazor Controls project contains a collection of Blazor user controls.

Demo: https://blazor.loresoft.com/
NuGet: https://nuget.org/packages/LoreSoft.Blazor.Controls
Source: https://github.com/loresoft/LoreSoft.Blazor.Controls

Installing

The LoreSoft.Blazor.Controls library is available on nuget.org via package name LoreSoft.Blazor.Controls.

To install LoreSoft.Blazor.Controls, run the following command in the Package Manager Console

Install-Package LoreSoft.Blazor.Controls

Setup

To use, you need to include the following CSS and JS files in your index.html (Blazor WebAssembly) or _Host.cshtml (Blazor Server).

In the head tag add the following CSS.

<link rel="stylesheet" href="_content/LoreSoft.Blazor.Controls/BlazorControls.css" />

Typeahead Features

Searching data by supplying a search function
Template for search result, selected value, and footer
Debounce support for smoother search
Character limit before searching
Multiselect support
Built in form validation support

Typeahead Properties

Required

Value - Bind to Value in single selection mode. Mutually exclusive to Values property.
Values - Bind to Values in multiple selection mode. Mutually exclusive to Value property.
SearchMethod - The method used to return search result

Optional

AllowClear - Allow the selected value to be cleared
ConvertMethod - The method used to convert search result type to the value type
Debounce - Time to wait, in milliseconds, after last key press before starting a search
Items - The initial list of items to show when there isn't any search text
MinimumLength - Minimum number of characters before starting a search
Placeholder - The placeholder text to show when nothing is selected

Templates

ResultTemplate - User defined template for displaying a result in the results list
SelectedTemplate - User defined template for displaying the selected item(s)
NoRecordsTemplate - Template for when no items are found
FooterTemplate - Template displayed at the end of the results list
LoadingTemplate - Template displayed while searching

Typeahead Examples

Basic Example

State selection dropdown. Bind to Value property for single selection mode.

<Typeahead SearchMethod="@SearchState"
           Items="Data.StateList"
           @bind-Value="@SelectedState"
           Placeholder="State">
    <SelectedTemplate Context="state">
        @state.Name
    </SelectedTemplate>
    <ResultTemplate Context="state">
        @state.Name
    </ResultTemplate>
</Typeahead>

@code {
    public StateLocation SelectedState { get; set; }

    public Task<IEnumerable<StateLocation>> SearchState(string searchText)
    {
        var result = Data.StateList
            .Where(x => x.Name.ToLower().Contains(searchText.ToLower()))
            .ToList();

        return Task.FromResult<IEnumerable<StateLocation>>(result);
    }
}

Multiselect Example

When you want to be able to select multiple results. Bind to the Values property. The target property must be type IList<T>.

<Typeahead SearchMethod="@SearchPeople"
           Items="Data.PersonList"
           @bind-Values="@SelectedPeople"
           Placeholder="Owners">
    <SelectedTemplate Context="person">
        @person.FullName
    </SelectedTemplate>
    <ResultTemplate Context="person">
        @person.FullName
    </ResultTemplate>
</Typeahead>

@code {
    public IList<Person> SelectedPeople;

    public Task<IEnumerable<Person>> SearchPeople(string searchText)
    {
        var result = Data.PersonList
            .Where(x => x.FullName.ToLower().Contains(searchText.ToLower()))
            .ToList();

        return Task.FromResult<IEnumerable<Person>>(result);
    }
 }

GitHub Repository Search

Use Octokit to search for a GitHub repository.

<Typeahead SearchMethod="@SearchGithub"
           @bind-Value="@SelectedRepository"
           Placeholder="Repository"
           MinimumLength="3">
    <SelectedTemplate Context="repo">
        @repo.FullName
    </SelectedTemplate>
    <ResultTemplate Context="repo">
        <div class="github-repository clearfix">
            <div class="github-avatar"><img src="@repo.Owner.AvatarUrl"></div>
            <div class="github-meta">
                <div class="github-title">@repo.FullName</div>
                <div class="github-description">@repo.Description</div>
                <div class="github-statistics">
                    <div class="github-forks"><i class="fa fa-flash"></i> @repo.ForksCount Forks</div>
                    <div class="github-stargazers"><i class="fa fa-star"></i> @repo.StargazersCount Stars</div>
                    <div class="github-watchers"><i class="fa fa-eye"></i> @repo.SubscribersCount Watchers</div>
                </div>
            </div>
        </div>
    </ResultTemplate>
</Typeahead>

@inject IGitHubClient GitHubClient;

@code {
    public Repository SelectedRepository { get; set; }

    public async Task<IEnumerable<Repository>> SearchGithub(string searchText)
    {
        var request = new SearchRepositoriesRequest(searchText);
        var result = await GitHubClient.Search.SearchRepo(request);

        return result.Items;
    }
}

loresoft.blazor.controls's People

Contributors

Stargazers

Watchers

loresoft.blazor.controls's Issues

.progress-bar css class is overriding default bootstrap classes

The .progress-bar css class (line 654 BlazorControls.css) is over-riding the default bootstrap .progress-bar class, resulting in all other bootstrap progress bars appearing in strange positions with incorrect heights.

the specific problem is the position: fixed and height: 3px.

Would it be possible to make this class more specific (or rename it), and isolate it to only affect the components contained in this library?

It's not a issue, it's more a posible improvement

in Blazor Typeahead Control Multiple,

a) A parameter to leave the list expanded to be able to select several items without close.
b) Some option to select and unselect all items after search.
c) This is not so important but could be interesting. Select items with checkbox close as alternative as blue bakcground color?

TypeHead on change refresh DataGrid?

I have page with following

        protected override async Task OnInitializedAsync()
        {
            accessPoints = await GetAccessPoints();
            SelectedAccessPoints = accessPoints.ToList();
            visits = await GetVisitsByAccessPoints(SelectedAccessPoints);
        }

accessPoints is data for my typehead

                            <Typeahead SearchMethod="@SearchAccessPoints"
                                       Items="accessPoints"
                                       @bind-Values="@SelectedAccessPoints"
                                       Placeholder="Access point">
                                <SelectedTemplate Context="accessPoint">
                                    @accessPoint.Name
                                </SelectedTemplate>
                                <ResultTemplate Context="accessPoint">
                                    @accessPoint.Name
                                </ResultTemplate>
                            </Typeahead>

visits are my data for my datagrid.

<DataGrid Data="visits" class="table table-hover" @ref="Grid">

Can you pls tell me how to call onchage event on typehead and then call method for refreshing the grid with new visit data ( await GetVisitsByAccessPoints(SelectedAccessPoints);) ?

Love DateTimePicker, but how to show date w/o TIME? Thanks!

I don't need the date on top line, it's already on bottom!
Thanks!

Support for Adding items on empty search result to Typeahead control

The controls are really useful and are very neat and clean , But i need to have a feature with Typeahead control which seems missing from the initial experience
Is there any support for adding items on empty search result to Typeahead control
Or is there any way to get the input text entered inside the Typeahead control at the time of form submission . Currently once the focus is leaves the control the text is getting deselected.
Example: If searching for a Person and if no matches of name exists allow the user to insert that text as a new record to the List or provide the option to capture the text value on form submission

Cannot subscribe to ValuesChanged event from Typeahead

Hi,

Been trying to subscribe to the ValuesChanged event without success.
On my parent component I initialize the Typeahead child element

<Typeahead
        Items="@items"
        Placeholder="My items"
        SearchMethod="@SearchItems"
        TItem="ItemModel"
        TValue="ItemModel"
        ValuesChanged="@ItemsSelectionChanged"
        Values="@SelectedItems">
    <SelectedTemplate Context="item">
        @item.Name
    </SelectedTemplate>
    <ResultTemplate Context="item">
        @item.Name
    </ResultTemplate>
</Typeahead>

When running I get the following error

rit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Object reference not set to an instance of an object.
System.NullReferenceException: Object reference not set to an instance of an object.
   at LoreSoft.Blazor.Controls.TypeaheadBase`2[[MyApp.Models.ItemModel, MyApp.Models, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null],[MyApp.Models.ItemModel, MyApp.Models, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].set_SearchText(String value)
   at LoreSoft.Blazor.Controls.TypeaheadBase`2.<HandleFocus>d__127[[MyApp.Models.ItemModel, MyApp.Models, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null],[MyApp.Models.ItemModel, MyApp.Models, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext()
   at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)`

Am I wrongly initializing the component or is it an issue?

Cheers!

JS not found

Script <script src="_content/LoreSoft.Blazor.Controls/BlazorControls.js"></script> return 404. In docs and examples.

Control Padding

Great control thankyou.

Is it possible to control the padding inside the control so that if the font size is reduced the control height also reduces please.

The attached show the difference in control height for the same font size.

Thanks for your help.

Create new items in the list

Would it be possible to have the TypeAhead act like a combobox, so that if an item isn't in the list, it can be used as a new entry? Perhaps with a callback to create that entry.

Any chance to make this package compatible with netstandard 2.1?

Bug DataGrid not Refreshing after setting the Data Parameter

The DataGrid does not update when setting the Data Parameter.

Quite important since sometimes you want to add / remove items based on the new list.
@pwelter34

This does not work, since the DataGrid is not updated.

private async Task DoesNotWork()
{
    People = new List<Person>();
    await InvokeAsync(() => DataGrid.RefreshAsync(false));
}

This works but we have to re-use the Data parameter.

private async Task ResetItems()
{
    People = new List<Person>();
    await InvokeAsync(() => DataGrid.RefreshAsync(false));

    People.Clear();
    People.Add(new Person("Ben", "Vertonghen", 29, "Aalst"));
    await InvokeAsync(() => DataGrid.RefreshAsync(false));
}

Example

Copy-paste this code in the Basic.razor component.

@using Sample.Core.Services
@using Sample.Core.Models
<h3>Basic</h3>

<button class="btn btn-secondary" @onclick="@(() => DataGrid.SortByAsync("Id"))">Sort By Id</button>
<button class="btn btn-secondary" @onclick="@(() => DataGrid.Pager.Page = 5)">Go to page 5</button>
<button class="btn btn-secondary" @onclick="@(() => DataGrid.Pager.PageSize = 25)">Page Size 25</button>
<button class="btn btn-secondary" @onclick="@ResetItems">Reset Items</button>
<button class="btn btn-secondary" @onclick="@DoesNotWork">Does not work (you need to click twice)</button>


<DataGrid Data="People" class="table table-hover" Selectable="true" @bind-SelectedItems="Selected" @ref="DataGrid">
    <DataColumns>
        <DataColumn TItem="Person" Property="p => p.Id" Width="70px">
            <Template Context="item">
                <a href="#" class="d-block" title="@item.FullName">@item.Id</a>
            </Template>
        </DataColumn>
        <DataColumn TItem="Person" Property="p => p.FirstName" SortIndex="1" />
        <DataColumn TItem="Person" Property="p => p.LastName" SortIndex="0" />
        <DataColumn TItem="Person" Property="p => p.Score" Width="100px" Style="@SoreStyle" />
        <DataColumn TItem="Person" Property="p => p.Location" Sortable="false" />
        <DataColumn TItem="Person" Property="p => p.Birthday" Format="d" />
    </DataColumns>
    <DataPagination Context="grid">
        <DataPager PageSize="10" />
        <DataSizer />
        <div>@grid.Pager.StartItem - @grid.Pager.EndItem of @grid.Pager.Total</div>
    </DataPagination>
</DataGrid>

<div class="mt-5">
    <h4>Selected</h4>
    <ul>
        @foreach (var person in Selected)
        {
            <li>@person.FullName</li>
        }
    </ul>
</div>

@code {
    public ICollection<Person> People { get; set; }

    public IEnumerable<Person> Selected { get; set; } = new List<Person>();

    private DataGrid<Person> DataGrid { get; set; }

    protected override void OnInitialized()
    {
        People = Data.GeneratePeople(200).ToList();
    }

    private async Task ResetItems()
    {
        People.Clear();
        People.Add(new Person("Ben", "Vertonghen", 29, "Aalst"));
        await InvokeAsync(() => DataGrid.RefreshAsync(false));
    }

    private async Task DoesNotWork()
    {
        People = new List<Person>();
        await InvokeAsync(() => DataGrid.RefreshAsync(false));
    }

    protected string SoreStyle(Person person)
    {
        if (person.Score > 75)
            return "background-color: #dc3545";
        if (person.Score > 50)
            return "background-color: #ffc107";

        return null;
    }

}

Feature Request for Typeahead: Select should not close select field at multi select

Hey,
i have a feature request for typeahead.
Situation: User has to select multi items all at once.
Problem: User has to click again on typeahead for select more than one item.
Reqeust: Typeahead should not close selection at multiselect after click on item.
Is this possible?

ServerSide - Select from the list with enter

In Blazor ServerSide, when navigating the list with the arrow on the keyboard, then choosing an option with enter, it is done submit in the form

Typeahead throws exception when clicking twice in the textual area of the control

Left click on the text region of the typeahead control (not on the right hand drop down arrow) to drop down the search box and items menu, then without moving the mouse left click again in the same place (to close the drop down). An exception is throw at this point:
Unhandled exception rendering component: Cannot read property 'parentNode' of undefined

This behaviour can be replicated on any of the examples on the demo page:
https://blazor.loresoft.com/typeahead/index

Full exception details:

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
Unhandled exception rendering component: Cannot read property 'parentNode' of undefined
TypeError: Cannot read property 'parentNode' of undefined
at Object.e [as removeLogicalChild] (https://localhost:44377/_framework/blazor.webassembly.js:1:10109)
at e.applyEdits (https://localhost:44377/_framework/blazor.webassembly.js:1:32821)
at e.updateComponent (https://localhost:44377/_framework/blazor.webassembly.js:1:32052)
at Object.t.renderBatch (https://localhost:44377/_framework/blazor.webassembly.js:1:11924)
at Object.window.Blazor._internal.renderBatch (https://localhost:44377/_framework/blazor.webassembly.js:1:61687)
at Object.w [as invokeJSFromDotNet] (https://localhost:44377/_framework/blazor.webassembly.js:1:64209)
at _mono_wasm_invoke_js_blazor (https://localhost:44377/_framework/dotnet.5.0.3.js:1:190800)
at wasm_invoke_iiiiii (:wasm-function[5611]:0xdda7f)
at ves_pinvoke_method (:wasm-function[5708]:0xdfb62)
at interp_exec_method (:wasm-function[2155]:0x44c08)
Microsoft.JSInterop.JSException: Cannot read property 'parentNode' of undefined
TypeError: Cannot read property 'parentNode' of undefined
at Object.e [as removeLogicalChild] (https://localhost:44377/_framework/blazor.webassembly.js:1:10109)
at e.applyEdits (https://localhost:44377/_framework/blazor.webassembly.js:1:32821)
at e.updateComponent (https://localhost:44377/_framework/blazor.webassembly.js:1:32052)
at Object.t.renderBatch (https://localhost:44377/_framework/blazor.webassembly.js:1:11924)
at Object.window.Blazor._internal.renderBatch (https://localhost:44377/_framework/blazor.webassembly.js:1:61687)
at Object.w [as invokeJSFromDotNet] (https://localhost:44377/_framework/blazor.webassembly.js:1:64209)
at _mono_wasm_invoke_js_blazor (https://localhost:44377/_framework/dotnet.5.0.3.js:1:190800)
at wasm_invoke_iiiiii (:wasm-function[5611]:0xdda7f)
at ves_pinvoke_method (:wasm-function[5708]:0xdfb62)
at interp_exec_method (:wasm-function[2155]:0x44c08)
at Microsoft.JSInterop.WebAssembly.WebAssemblyJSRuntime.InvokeUnmarshalled[Int32,RenderBatch,Object,Object](String identifier, Int32 arg0, RenderBatch arg1, Object arg2, Int64 targetInstanceId)
at Microsoft.JSInterop.WebAssembly.WebAssemblyJSRuntime.InvokeUnmarshalled[Int32,RenderBatch,Object](String identifier, Int32 arg0, RenderBatch arg1)
at Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer.UpdateDisplayAsync(RenderBatch& batch)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()

localization

How to translate "Search" in dropdown input ?

In Typeahead control (or any selection menu), Close when Click Away

First, thanks for these tools, I love them. However, one big issue I have on a project I'm working on is that the dropdowns do not consistently/reliably fall away on clicking outside of the component.

Here's a screenshot illustrating the confusion a user can get into:

Is there something I as the application developer can do to prevent this, and if this support is not baked in, what can be done to enhance the components?

Introduce IStringLocalizer

Right now every component is in english with no localization options.
Would it be possible to localize every UI element?

Typeahead Render in many Time

Hi
when use typeahead . and move mouse or press any key data rewrite and very slow to show data
this section repeat when pressed and key or move mouse!!!!

                for (var index = 0; index < SearchResults.Count; index++)
                {
                    var item = SearchResults[index];
                    <div @key="item"
                         class="typeahead-option @ResultClass(item, index)"
                         @onclick="@(() => SelectResult(item))">
                        @ResultTemplate(item)
                    </div>
                }

DataPager sample

Could you please give an example with a DataPager component outside of a Grid (from an other library than this one)?

I am trying to bind a pager to a Grid component and I run into this error:

DataSizer requires a cascading parameter PagerState.

Thank you.