is it possible to use an Addons components in a DataGrid column?

[githubfanster]

hello!

we're investigating whether we can port our Windows Presentation Foundation (WPF) app to Server-Side Blazor with the help of your library.

we have a custom WPF usercontrol that we think could map on to Blazorise's Addons component.

The attached zip file contains code for our Blazorised MultiFieldSelector component and a demo page.

The MultiFieldSelector consists of two SelectLists that when fully implemented will be working in tandem as our multi-use data selector / filter.

If it's currently possible to use this addons component in a DataGrid column, could you please show us how the code for the custom column EditTemplate might look like? i'm not sure how to proceed.

Thank you for any help or tips.

[stsrki]

Hi, I don't see a zip file attached.

Anyways, you can add anything inside of EditTemplate. It's just a regular Blazor render fragment that has a context keyword. see

The context keyword is used to read and write to the internal cell value. For EditTemplate the context is of type CellEditContext. Whatever you add to EditTemplate is up to you. Every component can basically go there.

You can see an example for SelectEdit in the demo: https://github.com/stsrki/Blazorise/blob/master/Tests/Blazorise.Demo/Pages/Tests/DataGridPage.razor

[githubfanster]

oops. sorry. here is the zip file UseAddonsInDataGridColumn.zip

[stsrki]

I think it's best for you to combine all your models into one model that will actually be your cell value

public class FieldModel
{
    public FieldOneModel FieldOne { get; set; }

    public FieldTwoModel FieldTwo { get; set; }
}

public class FieldOneModel
{
    public string FieldOneText { get; set; }
    public string FieldOneValue { get; set; }
}

public class FieldTwoModel
{
    public string FieldTwoText { get; set; }
    public string FieldTwoValue { get; set; }
}

Then:

<EditTemplate>
    @{
        var model = ( context as CellEditContext ).CellValue as FieldModel;

        <MultiFieldSelector TFieldOneItem="FieldOneModel"
                            TFieldTwoItem="FieldTwoModel"
                            FieldOneData="@MyFieldOneData"
                            FieldOneTextFunc="@((item)=>item.FieldOneText)"
                            FieldOneValueFunc="@((item)=>item.FieldOneValue)"
                            FieldOneSelectedValue="@model.FieldOne.FieldOneValue"
                            FieldOneSelectedValueChanged="@((v)=>MyFieldOneSelectedValueChanged(model, v))" />

// then the same for field two
    }

</EditTemplate>

And update value:

void MyFieldOneSelectedValueChanged( FieldModel model, object obj )
{
    model.FieldOne.FieldOneValue = (string)obj;
}

[githubfanster]

Thanks! I got it to work with your tips.

I made most of the stuff in my previous code internal to my MultiFieldSelector, then exposed two parameters that the Parent component using my MultiFieldSelector can provide settings for (SelectedParentValue and SelectedParentValueChanged ).

When the values of my MultiFieldSelector fields change, it updates its Parent component (the DataGrid column cell in question)