Skip to main content Skip to footer

How to display a ComboBox in FlexGrid cells

FlexGrid for Blazor supports a CellEditingTemplate that allows you to define custom column content in Razor markup. To use the CellEditingTempate, you may define the columns collection in markup and disable the auto-generation of columns.

<FlexGrid ItemsSource="customers" AutoGenerateColumns="false">
    <FlexGridColumns>
        <GridColumn Binding="FirstName" />
        <GridColumn Binding="LastName" />
        <GridColumn Binding="FirstName">
          <CellEditingTemplate>
            @{ var c = context.Data as Customer;}
            <C1ComboBox T="string" SelectedValue="c.FirstName" SelectedValueChanged="@(v=>c.FirstName = v.ToString())" ItemsSource="firstNames"/>
          </CellEditingTemplate>
      </FlexGridColumns>
</FlexGrid>

Observe how the data binding is configured by obtaining the data context. To display a ComboBox, or any UI element, in just a single cell rather than apply to an entire column, you will need to use a Cell Factory.