Git Product home page Git Product logo

blazor.advancedblazorselect2's Introduction

Blazor.AdvancedBlazorSelect2

Installation

  1. Install the NuGet package KeudellCoding.Blazor.AdvancedBlazorSelect2.
  2. Add the following lines to _Host.cshtml (in the head tag)
<script src="_content/KeudellCoding.Blazor.AdvancedBlazorSelect2/Select2JsInterop.js" type="text/javascript" language="javascript"></script>
<script src="_content/KeudellCoding.Blazor.AdvancedBlazorSelect2/lib/select2/js/select2.full.min.js" type="text/javascript" language="javascript"></script>
<link href="_content/KeudellCoding.Blazor.AdvancedBlazorSelect2/lib/select2/css/select2.min.css" rel="stylesheet" />
  1. Make sure jQuery is installed.
  2. Add the following lines to _Imports.razor
@using KeudellCoding.Blazor.AdvancedBlazorSelect2

Usage Example

@page "/"
@inject IMemoryCache __MemoryCache
@inject ApplicationDbContext __DbContext

<Select2 TItem="ExampleItemForm"
         TSource="DbSet<ExampleItemForm>"
         IdSelector="c => c.Id.ToString()"
         TextSelector="c => c.Text"
         FilterFunction="filterFunction"
         GetElementById="async (items, id, token) => await items.FindAsync(id, token)"
         Datasource="__DbContext.ExampleItems"
         Value="@SelectedItems"
         Cache="__MemoryCache"
         Multiselect="false" />


@code {
    public class ExampleItemForm {
        public Guid Id { get; set; }
        public string Text { get; set; }

        public ExampleItemForm(Guid id, string text) {
            Id = id;
            Text = text;
        }
    }

    //======================================================

    public List<ExampleItemForm> SelectedItems { get; set; }

    //======================================================

    private async Task<List<ExampleItemForm>> filterFunction(DbSet<ExampleItemForm> allItems, string filter, CancellationToken token) {
        return await allItems.Where(i => i.Text.StartsWith(filter)).ToListAsync();
    }
}

Notes

  1. It is ensured that the SelectedItems list contains only one item if Multiselect is set to false.
  2. As soon as SelectedItems is edited manually, StateHasChanged(); should be executed.
  3. GetElementById must be set manually because the process also depends on the data source used.

blazor.advancedblazorselect2's People

Contributors

karlkeu00 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.