FluentDataGrid - TemplateColumn - FluentSelect ignoring my demands!

[Terrence77]

FluentBlazorApp1.zip

Or, I am just doing it wrong.

Trying to get a FluentSelect TemplateColumn to show the Department associated with the context.

I am able to get it to work with the basic InputSelect.

<FluentDataGrid Items="Items.AsQueryable()">
	<PropertyColumn Property="@(p => p.Name)" Title="Name" />

	<TemplateColumn Title="InputSelect" Style="overflow: visible;">
		<InputSelect class="form-select" @bind-Value="context.DepartmentID" @bind-Value:after="() => DoWork(context)">

			<option value="">
				Select Budget Category ...
			</option>

			@foreach (var dept in Departments)
			{
				<option value="@dept.DepartmentID">@dept.DepartmentName</option>
			}
		</InputSelect>
	</TemplateColumn>

	<TemplateColumn Title="FluentSelect" Style="overflow: visible;">
		<FluentSelect Items="@Departments"
					  TOption="Department"
					  Value="context.Department"
					  ValueChanged="() => DoWork(context)">

			<OptionTemplate Context="dept">
				<FluentLabel Typo="Typography.Body" Color="@Color.Accent">
					@dept.DepartmentName
				</FluentLabel>
			</OptionTemplate>
		</FluentSelect>
	</TemplateColumn>

</FluentDataGrid>

Here is a screenshot of the incorrect behavior in the 3rd column

[vnbaaij]

The Value of the FluentSelect is not the Department. Going on the InputSelect code it is the DeparmentID that you need to set. You need to use the OptionValue (and maybe also OptionText and OptioSelected parameters. See the docs...

[Terrence77]

Well, I have tried 20 combinations of every variation possible, but no luck. Working this issue for 3-4 days now.

I have numerous examples of using a FluentSelect and populating the value with an object, not an ID using:
@bind-SelectedOption="vm.SelectedItem"

But I am unable to get this to work in TemplatedColumn.

[Terrence77]

Using OptionValue= DepartmentID for the value does not work either.

		<FluentSelect Items="@Departments"
					  TOption="Department"
					  OptionValue="@(p => p.DepartmentID)"
					  ValueChanged="() => DoWork(context)">

			<OptionTemplate Context="dept">
				<FluentLabel Typo="Typography.Body" Color="@Color.Accent">
					@dept.DepartmentName
				</FluentLabel>
			</OptionTemplate>
		</FluentSelect>

[vnbaaij]

I'll need to take a closer look then. But have some backlog from the holiday period to go through. Might take a while...

[Terrence77]

Ok.

Here I am using bind-value with ID and the "assignment" is not happening. When I hit DoWork, the context.DepartmentID is not correct.

	<TemplateColumn Title="FluentSelect" Style="overflow: visible;">
		<FluentSelect Items="@Departments"
			TOption="Department"
			@bind-Value="context.DepartmentID"
			@bind-Value:after="() => DoWork(context)">
				<OptionTemplate Context="dept">
					<FluentLabel Typo="Typography.Body" Color="@Color.Accent">
						@dept.DepartmentName
					</FluentLabel>
				</OptionTemplate>
		</FluentSelect>
	</TemplateColumn>

[vnbaaij]

The DataGrid has quite a specific way of rendering the columns. It could be that the ID value is not know yet at the time of rendering the FluentSelect

[Terrence77]

Interesting. Oh, but the ID is present in the InputSelect

<TemplateColumn Title="InputSelect" Style="overflow: visible;">
	<InputSelect class="form-select" @bind-Value="context.DepartmentID" @bind-Value:after="() => DoWork(context)">

		<option value="">
			Select Budget Category ...
		</option>

		@foreach (var dept in Departments)
		{
			<option value="@dept.DepartmentID">@dept.DepartmentName</option>
		}
	</InputSelect>
</TemplateColumn>

[MarvinKlein1508]

@Terrence77 I'Ve run your code and I got it working by changing your code to:

<FluentSelect Items="@Departments"
              OptionText="(item) => item.DepartmentName"
              @bind-SelectedOption="context.Department"
              @bind-SelectedOption:after="() => DoWork(context)" />

Keep in mind that you'll need to set the departmentId in DoWork for your person and that if your department is null it will display the first option without selecting it.

@vnbaaij the root of this issue seems to be the OptionTemplate once this is set it won't work anymore.

<OptionTemplate Context="dept">
    <FluentLabel Typo="Typography.Body" Color="@Color.Accent">
        @dept.DepartmentName
    </FluentLabel>
</OptionTemplate>

[Terrence77]

@MarvinKlein1508

Marvin, thanks for looking at this, I know the guys are swamped with items to fix.

Yes, I approached it with:

 @bind-SelectedOption="context.Department"
  @bind-SelectedOption:after="() => DoWork(context)" />

on one of the many iterations. The OptionTemplage seems to work fine, if the department is "assigned"

If you are interested, I have the datagrid populated with 4 FluentSelects, one of which works.
Note there are 5 data rows and 3 of them the DeptID and Dept objects are populated differently so see how the TemplateColumn behaves.

You could plop this razor page right into my proj and run it .

Thanks again for your help.

<div style="width: 1500px; overflow-x: auto;">
	<FluentDataGrid Items="Items.AsQueryable()" RowSize="DataGridRowSize.Medium">
		<PropertyColumn Property="@(p => p.Name)" Title="Name" />
		<PropertyColumn Property="@(p => p.DepartmentID)" Title="DeptID" />
		<PropertyColumn Property="@(p => p.Department)" Title="Dept" />

		<TemplateColumn Title="InputSelect" Style="overflow: visible;">

			<InputSelect class="form-select" @bind-Value="context.DepartmentID" @bind-Value:after="() => DoWork(context)">

				<option value="">
					Select Budget Category ...
				</option>

				@foreach (var dept in Departments)
				{
					<option value="@dept.DepartmentID">@dept.DepartmentName</option>
				}
			</InputSelect>
		</TemplateColumn>


		<TemplateColumn Title="BindValue" Style="overflow: visible;">

			<FluentSelect Items="@Departments"
						  Placeholder="Select Dept"
						  TOption="Department"
						  @bind-SelectedOption="context.Department"
						  ValueChanged="() => DoWork(context)">

				<OptionTemplate Context="dept">
					<FluentLabel Typo="Typography.Body" Color="@Color.Accent">
						@dept.DepartmentName
					</FluentLabel>
				</OptionTemplate>

			</FluentSelect>
		</TemplateColumn>


		<TemplateColumn Title="BindBind" Style="overflow: visible;">
			<FluentSelect Items="@Departments"
						  Placeholder="Select Dept"
						  TOption="Department"
						  @bind-Value="context.DepartmentID"
						  @bind-Value:after="() => DoWork(context)">
				<OptionTemplate Context="dept">
					<FluentLabel Typo="Typography.Body" Color="@Color.Accent">
						@dept.DepartmentName
					</FluentLabel>
				</OptionTemplate>
			</FluentSelect>
		</TemplateColumn>

		<TemplateColumn Title="SelValSelVal" Style="overflow: visible;">
			<FluentSelect Items="@Departments"
						  Placeholder="Select Dept"
						  TOption="Department"
						  @bind-SelectedValue="context.DepartmentID"
						  @bind-SelectedValue:after="() => DoWork(context)">
				<OptionTemplate Context="dept">
					<FluentLabel Typo="Typography.Body" Color="@Color.Accent">
						@dept.DepartmentName
					</FluentLabel>
				</OptionTemplate>
			</FluentSelect>
		</TemplateColumn>

		<TemplateColumn Title="ValueValue" Style="overflow: visible;">
			<FluentSelect Items="@Departments"
						  Placeholder="Select Dept"
						  TOption="Department"
						  Value="context.Department"
						  ValueChanged="() => DoWork(context)">

				<OptionTemplate Context="dept">
					<FluentLabel Typo="Typography.Body" Color="@Color.Accent">
						@dept.DepartmentName
					</FluentLabel>
				</OptionTemplate>
			</FluentSelect>
		</TemplateColumn>

	</FluentDataGrid>

</div>

[MarvinKlein1508]

@Terrence77 can you maybe update your sample project above? I will try and take another look on it then.