Blazorise: Binding to Enum in SelectEdit

Created on 18 Feb 2019  路  10Comments  路  Source: stsrki/Blazorise

Could you add enum type in SelectEdit?
It accepts only string as parameter atm.

Planning

All 10 comments

Can you give me an example on how would you use enum with SelectEdit?

Generally it's not difficult for me to define SelectEdit as generic component. That way it could accept all kind of data types. But that is going to introduce additional attribute TItem that will always need to be defined and I would like to avoid that. I will try to investigate if there is a way around this limitation.

I'm already using it like this :

<div class="form-group row">
    <div class="col-xs-2">
        <select class="form-control " bind="@this.DaysInWeekLocal">
            <option [email protected]>@DaysInWeekLocal.Mon.ToString()</option>
            <option [email protected]>@DaysInWeekLocal.Tue.ToString()</option>
        </select>
    </div>
</div>

@functions
{
    private DaysInWeek DaysInWeekLocal { get; set; } = DaysInWeek.Mon;
}


public enum DaysInWeek
{
    Mon, 
    Tue,
    Etc
}

When Blazor is .Net Core hosted, i'll usually declare some enum in shared folder (DaysInWeek) and use it like this. It's useful cause this never changes and i can just cast it to int and save to Db.
Would be convenient if SelectEdit took enum so i could wrap Fields around it.

They will allow more types for binding in future release for Blazor. Also probably they'll include some validation with attributes (people are asking for this).

Maybe you could use TItem with type constraints or just wait it out and see .

Just a quick update. I was able to implement bindings for SelectEdit using the generic components. It is working will all basic types like int, enum, string, etc. Nullable types are also supported.

Now there were some issues and workarounds to make it all to work. There will also be some minor changes to the SelectEdit api. Since SelectEdit must support "multiple" selection I have introduced additional property SelectedValues and with that comes also an event SelectedValuesChanged.

Generic component comes with some special rules that must be followed:

  • data-type must be the same in both SelectEdit and SelectItem
  • string values must be defined with special syntax eg. "@("hello")", see #7785

I will release new version in the next few days after some more code cleaning and testing.

Nice.
I can help you with documentation when you push new version, if you want.

Every help is needed, especially for documentation. I'm really bad at that kind of stuff.

New version is released. Please try it and let me know if there's any problem.

It's working as intended.

Hi.
Can I have sample code to use multi select and SelectedValuesChanged?
I have this code:

<SelectEdit  TValue="string" IsMultiple="true" SelectedValues="@OnMaterialSelected" 
      SelectedValuesChanged="@MaterialSelected">
             @foreach (string art in this.Materials) {
                    <SelectItem Value="@art">@art</SelectItem>
               }
</SelectEdit>

@code {
  private List<string> Materials { get; set; }
  private List<string> SelectedMaterials { get; set; }

  protected override async Task OnInitializedAsync() {
      SelectedMaterials = new List<string>();
      Materials = new List<string>();

      Materials.Add("X");
      Materials.Add("Y");
      Materials.Add("Z");
  }

   public void OnMaterialSelected(string material) {
       SelectedMaterials.Add(material);
    }
}

But I have the error "Error CS1503 Argument 2: cannot convert from 'method group' to 'EventCallback'"
on line
<SelectEdit TValue="string" IsMultiple="true" SelectedValues="@OnMaterialSelected"

Thanks.

@tegolo SelectedValues is a list property. You need SelectedValuesChanged event.

Try:

<SelectEdit  TValue="string" IsMultiple="true" SelectedValues="@SelectedMaterials" SelectedValuesChanged="@OnMaterialSelected" >
             @foreach (string art in this.Materials) {
                    <SelectItem Value="@art">@art</SelectItem>
               }
</SelectEdit>

@code {
  private List<string> Materials { get; set; }
  private List<string> SelectedMaterials { get; set; }

  protected override async Task OnInitializedAsync() {
      SelectedMaterials = new List<string>();
      Materials = new List<string>();

      Materials.Add("X");
      Materials.Add("Y");
      Materials.Add("Z");
  }

   public void OnMaterialSelected(IReadOnlyList<string> materials) {
       SelectedMaterials = new List<string>(materials);
    }
}

Thanks a lot. Now it's ok. I had tried with

public void OnMaterialSelected(List<string> materials) {
       SelectedMaterials = new List<string>(materials);
}

but it's IReadOnlyList

Thanks again ;-)

Was this page helpful?
0 / 5 - 0 ratings