Code Monkey home page Code Monkey logo

Comments (16)

vertonghenb avatar vertonghenb commented on May 24, 2024

Isn;t this already possible when providing the 1 of the 2 parameters?

        [Parameter] public EventCallback<TValue> ValueChanged { get; set; }
        [Parameter] public EventCallback<IList<TValue>> ValuesChanged { get; set; }

Or do you mean something like:

        public event Action<OnChanged> OnChanged;

from typeahead.

chrissainty avatar chrissainty commented on May 24, 2024

You're correct, I obviously hadn't had enough coffee when I raised this :)

from typeahead.

adopilot avatar adopilot commented on May 24, 2024

@vertonghenb Apologies for bumping post,
But How we can subscribe to ValuesChanged ?
Is this even possible if we using @bind-Values

from typeahead.

vertonghenb avatar vertonghenb commented on May 24, 2024

@adopilot
No problem!
If you're using bind-... it actually means you're not interested in handling anything yourself, the control does everything for you. If you provide the 2 parameters ValueChanged and Value (or the mutliselect ones) then you can do anything you'd want because you're in control of the value and the changehandler.

don't forget to set the value when you're providing the ValueChanged parameter.

from typeahead.

adopilot avatar adopilot commented on May 24, 2024

@vertonghenb sory once again,
I am unable to subscribe to ValuesChanged
Whatever I do I get error

Argument 2: cannot convert from 'method group' to 'EventCallback'

Here is sample page I am trying to capture ValuesChanged event.
What I am doing wrong ?

@page "/counter"
@using Blazored.Typeahead;

<BlazoredTypeahead SearchMethod="GetPeopleLocal"
                   Values="SelectedPeople"
                   EnableDropDown="true"
                   ValuesChanged="PersonChanged"
                   >
    <SelectedTemplate Context="person">
        @person.Firstname
    </SelectedTemplate>
    <ResultTemplate Context="person">
        @person.Firstname @person.Lastname (Id: @person.Id)
    </ResultTemplate>
</BlazoredTypeahead>



@code {
    private List<Person> People = new List<Person>();
    private IList<Person> SelectedPeople;
    private void PersonChanged(IList<Person> args)
    {
        SelectedPeople = args;
    }

    protected override void OnInitialized()
    {
        People.AddRange(new List<Person>() {
            new Person() { Id = 1, Firstname = "Martelle", Lastname = "Cullon" },
            new Person() { Id = 2, Firstname = "Zelda", Lastname = "Abrahamsson" },
            new Person() { Id = 3, Firstname = "Benedetta", Lastname = "Posse" },
            new Person() { Id = 4, Firstname = "Benoite", Lastname = "Gobel" },
            new Person() { Id = 5, Firstname = "Charlot", Lastname = "Fullicks" },
            new Person() { Id = 6, Firstname = "Vinson", Lastname = "Turbat" },
            new Person() { Id = 7, Firstname = "Lenore", Lastname = "Malam" },
            new Person() { Id = 8, Firstname = "Emanuele", Lastname = "Kolakovic" },
            new Person() { Id = 9, Firstname = "Rosalyn", Lastname = "Mackin" },
            new Person() { Id = 10, Firstname = "Yanaton", Lastname = "Krishtopaittis" },
            new Person() { Id = 11, Firstname = "Frederik", Lastname = "McGeachie" },
            new Person() { Id = 12, Firstname = "Parrnell", Lastname = "Ramsby" },
            new Person() { Id = 13, Firstname = "Coreen", Lastname = "McGann" },
            new Person() { Id = 14, Firstname = "Kyle", Lastname = "Coster" },
            new Person() { Id = 15, Firstname = "Evangelia", Lastname = "Bowker" },
            new Person() { Id = 16, Firstname = "Angeli", Lastname = "Collihole" },
            new Person() { Id = 17, Firstname = "Bill", Lastname = "Lawther" },
            new Person() { Id = 18, Firstname = "Kore", Lastname = "Reide" },
            new Person() { Id = 19, Firstname = "Tracy", Lastname = "Gwinnell" },
            new Person() { Id = 20, Firstname = "Lazaro", Lastname = "Partington" },
            new Person() { Id = 21, Firstname = "Doretta", Lastname = "Aingell" },
            new Person() { Id = 22, Firstname = "Olvan", Lastname = "Andraud" },
            new Person() { Id = 23, Firstname = "Templeton", Lastname = "Chetwynd" },
            new Person() { Id = 24, Firstname = "Daile", Lastname = "Kelsow" },
            new Person() { Id = 25, Firstname = "Marcie", Lastname = "Brearty" },
            new Person() { Id = 26, Firstname = "Irwinn", Lastname = "Lilian" },
            new Person() { Id = 27, Firstname = "Niki", Lastname = "Moreland" },
            new Person() { Id = 28, Firstname = "Honey", Lastname = "Waddup" },
            new Person() { Id = 29, Firstname = "Amber", Lastname = "Hoopper" },
            new Person() { Id = 30, Firstname = "Delilah", Lastname = "Dougary" },
            new Person() { Id = 31, Firstname = "Tory", Lastname = "Ovington" },
            new Person() { Id = 32, Firstname = "Doralin", Lastname = "Conrard" },
            new Person() { Id = 33, Firstname = "Eugene", Lastname = "Custard" },
            new Person() { Id = 34, Firstname = "Corella", Lastname = "Peotz" },
            new Person() { Id = 35, Firstname = "Chris", Lastname = "Rayne" },
            new Person() { Id = 36, Firstname = "Alexandro", Lastname = "Kwietek" },
            new Person() { Id = 37, Firstname = "Selie", Lastname = "Tenwick" },
            new Person() { Id = 38, Firstname = "Corliss", Lastname = "Haensel" },
            new Person() { Id = 39, Firstname = "Misti", Lastname = "Jikylls" },
            new Person() { Id = 40, Firstname = "Rosaline", Lastname = "Jephson" },
            new Person() { Id = 41, Firstname = "Irene", Lastname = "Farnsworth" },
            new Person() { Id = 42, Firstname = "Dominique", Lastname = "O'Shiels" },
            new Person() { Id = 43, Firstname = "Mellie", Lastname = "Cyson" },
            new Person() { Id = 44, Firstname = "Madelena", Lastname = "Chin" },
            new Person() { Id = 45, Firstname = "Charlotte", Lastname = "Clixby" },
            new Person() { Id = 46, Firstname = "Samara", Lastname = "Shavel" },
            new Person() { Id = 47, Firstname = "Brod", Lastname = "Kitt" },
            new Person() { Id = 48, Firstname = "Maridel", Lastname = "Dalley" },
            new Person() { Id = 49, Firstname = "Wini", Lastname = "Hundley" },
        });

       
    }
    private async Task<IEnumerable<Person>> GetPeopleLocal(string searchText)
    {
        return await Task.FromResult(People.Where(x => x.Firstname.ToLower().Contains(searchText.ToLower())).ToList());
    }

    public class Person
    {
        public Person() { }
        public Person(int id, string firstname, string lastname, int age, string location)
        {
            Id = id;
            Firstname = firstname;
            Lastname = lastname;
            Age = age;
            Location = location;
        }

        public int Id { get; set; }
        public string Firstname { get; set; }
        public string Lastname { get; set; }
        public string FullName { get => Firstname + " " + Lastname; }
        public int Age { get; set; }
        public string Location { get; set; }
    }

}

from typeahead.

calebhughes avatar calebhughes commented on May 24, 2024

Have you tried specifying your value type using the TValue parameter on the Typeahead? Specifying that worked for me, and maybe the TItem type as well.

from typeahead.

adopilot avatar adopilot commented on May 24, 2024

Have you tried specifying your value type using the TValue
I did try but, unfortunately I do not know how set TItem what that should be typeof(Person) or something else, also TValue won't accept anything to allow me to compile my code.

from typeahead.

Kurti123 avatar Kurti123 commented on May 24, 2024

Currently have the same problem. Any solution yet @adopilot?

from typeahead.

calebhughes avatar calebhughes commented on May 24, 2024

@adopilot Try specifying your TValue and TItem as:

<BlazoredTypeahead SearchMethod="GetPeopleLocal"
                   Values="SelectedPeople"
                   EnableDropDown="true"
                   ValuesChanged="PersonChanged"
                   TItem="Person"
                   TValue="Person"
                   >
    <SelectedTemplate Context="person">
        @person.Firstname
    </SelectedTemplate>
    <ResultTemplate Context="person">
        @person.Firstname @person.Lastname (Id: @person.Id)
    </ResultTemplate>
</BlazoredTypeahead>

I experienced a similar issue when I was trying typeof to specify the type, but just putting the type directly fixed it for me.

Hope this helps

from typeahead.

adopilot avatar adopilot commented on May 24, 2024

@Kurti123 nope, but I am glad that I am not only one facing issue, I thought that my lack of C# knowledge is issue here

from typeahead.

Kurti123 avatar Kurti123 commented on May 24, 2024

This is what I am trying to do. I want to bind the selected element to SelectedADUser which is of type ActiveDirectoryUser

  <BlazoredTypeahead style="width: auto" 
                                       SearchMethod="SearchUser" 
                                       Value="SelectedADUser"
                                       ValueChanged="UpdateCompanyByShort"
                                       TItem="ActiveDirectoryUser"
                                       TValue="SelectedADUser"
                                       >

SelectedADUser is of type ActiveDirectoryUser. I get Argument 1: cannot convert from 'Usermanagement'.Models.ActiveDirectoryUser to 'SelectedADUser' for the 'Value=' line

from typeahead.

calebhughes avatar calebhughes commented on May 24, 2024

This is what I am trying to do.

   <BlazoredTypeahead style="width: auto" 
                                       SearchMethod="SearchUser"                                        
                                       ValueChanged="UpdateCompanyByShort"
                                       TItem="ActiveDirectoryUser"
                                       TValue="SelectedADUser"
                                       >

SelectedADUser is of type ActiveDirectoryUser

The use of TValue is to specify the type of the value in your typeahead. You should use the Value parameter to specify a property being bound. Then your TValue would be ActiveDirectoryUser.

from typeahead.

Kurti123 avatar Kurti123 commented on May 24, 2024

That specific configuration gives me the following error:

 <BlazoredTypeahead   SearchMethod="SearchUser"                                        
                                       ValueChanged="UpdateCompanyByShort"
                                       TItem="ActiveDirectoryUser"
                                       TValue="SelectedADUser">

The type of namespace name 'SelectedADUser' could not be found (are you missing...)

from typeahead.

calebhughes avatar calebhughes commented on May 24, 2024

@Kurti123 It doesn't look like you changed anything. The code from my comment was just your code as a quote.

What it seems like you need is

 <BlazoredTypeahead   SearchMethod="SearchUser"
                                       Value="SelectedADUser"                                        
                                       ValueChanged="UpdateCompanyByShort"
                                       TItem="ActiveDirectoryUser"
                                       TValue="ActiveDirectoryUser">

This is if your selected value is the same as the item your search method is using. If it's not you will have to provide a method to convert them and assign it to the ConvertMethod parameter on the component. It's hard to say more without seeing the rest of the component.

from typeahead.

memerson avatar memerson commented on May 24, 2024

Using the above-described technique I get an exception: System.ArgumentNullException: Value cannot be null. (Parameter 'accessor').

It seems to want a non-null initial Value for the lookahead (which doesn't make much sense; it's a search box). However even when I provide a non-null property for Value, I still get the exception. I'm not sure what I can do to satisfy this thing.

from typeahead.

adopilot avatar adopilot commented on May 24, 2024

@memerson

what I can do to satisfy this thing.

You can implement your own event here is sample #124 (comment)

from typeahead.

Related Issues (20)

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.