Custom components in column

Edit column template

You can define RenderFragment which is renderer into column when inline editing is on for item in grid. You can configure it by two ways. For notifying the FlexGrid that in custom component value is changed you can use EditContext object which have method NotifyValueHasChanged.

Configure method

Func<EditColumnContext, RenderFragment<WeatherForecast>> weatherSummaryEdit =
	 context =>
 {
	 RenderFragment<WeatherForecast> summeryEdit = (WeatherForecast weather) => delegate (RenderTreeBuilder rendererTreeBuilder)
	 {
		 var internalBuilder = new BlazorRendererTreeBuilder(rendererTreeBuilder);
		 internalBuilder
			 .OpenElement(HtmlTagNames.Div, "edit-field-wrapper")
			 .OpenElement(HtmlTagNames.Input, "edit-text-field")
			 .AddAttribute(HtmlAttributes.Type, "text")
			 .AddAttribute(HtmlAttributes.Value, weather.Summary)
			 .AddAttribute(HtmlJSEvents.OnChange,
				 BindMethods.SetValueHandler(delegate (string __value)
				 {
					 context.NotifyValueHasChanged($"{__value}_CustomEdit");
				 }, weather.Summary?.ToString() ?? string.Empty)
			 )
			 .CloseElement()
			 .CloseElement();
	 };

	 return summeryEdit;
 };

 builder.Property(e => e.Summary)
	.HasBlazorEditComponent(weatherSummaryEdit);

Inside razor page

@inject HttpClient Http
@inject BlazorComponentColumnCollection<WeatherForecast> Collection
@page "/grid"

<GridView DataAdapter="@dataAdapter" PageSize="5"></GridView>

@{ 
	Func<EditColumnContext, RenderFragment<WeatherForecast>> editWeatherSummary = context =>
	{
		RenderFragment<WeatherForecast> editFragment = (weather) =>
			@<input value=@weather.Summary @onchange=@((UIChangeEventArgs e) => context.NotifyValueHasChanged(e.Value)) />;
		return editFragment;
	};
	
	Collection.AddColumnEditValueRenderer(w => w.Summary, editWeatherSummary);
}