Create custom GridColumn and bind value

[SZL]

Hi,

I would like create a custom GridColumn with button group (single select). My code:

column 1 (original column):

            <GridColumn Field=@nameof(AnyagRendelesListItemDto.Engedelyezve) Width="70" TextAlign="TextAlign.Right" AutoFit="true"></GridColumn>

column 2 (my custom column with button group):

            <GridColumn Width="120">

                <Template>

                    @{

                        AnyagRendelesListItemDto ds = (context as AnyagRendelesListItemDto) ?? new AnyagRendelesListItemDto();

                        <div class="image">

                            <SfButtonGroup Mode="Syncfusion.Blazor.SplitButtons.SelectionMode.Single">

                                <ButtonGroupButton Selected="@(ds.Engedelyezve == true)" SelectedChanged="@((e) => { if(e) { (context as AnyagRendelesListItemDto).Engedelyezve = true; }})">

                                    <SfIcon Name="IconName.Check" style="color:white"></SfIcon>

                                </ButtonGroupButton>

                                <ButtonGroupButton Selected="@(ds.Engedelyezve == null)" SelectedChanged="@((e) => { if(e) { (context as AnyagRendelesListItemDto).Engedelyezve = null; }})">

                                    <SfIcon Name="IconName.IntermediateState" style="color:white"></SfIcon>

                                </ButtonGroupButton>

                                <ButtonGroupButton Selected="@(ds.Engedelyezve == false)" SelectedChanged="@((e) => { if(e) { (context as AnyagRendelesListItemDto).Engedelyezve = false; }})">

                                    <SfIcon Name="IconName.Close" style="color:white"></SfIcon>

                                </ButtonGroupButton>

                            </SfButtonGroup>

                        </div>

                    }

                </Template>

            </GridColumn>

So the code contains 2 columns:

1. -> This is a simple column. The datasource type is a nullable bool. So the possible field values: true, false, empty (null).

2. -> I would like change the 1. column value by clicking a button in this button group. When I click on first button, the 1. column value should be True, when I click on second button, the 1. column value should be null and when I click on the third button the 1. column value should be False.

I think the solution is near in my code, but the 1. column value is not updating when I click any button in the button group.

Can you help me please update the 1. column value based on button clicks?

Thank you very much!

[Renjith Singh Rajendran]

Hi SZL,

Greetings from Syncfusion support.

We suggest you to call the Refresh() method inside the event handlers of SelectedChanged to reflect the modified changes in grid. Please refer the codes below. We have also attached a sample in this ticket.

 

<ButtonGroupButton Selected="@(ds.Engedelyezve == true)" SelectedChanged="@((e) => { if(e) { (context as Order).Engedelyezve = true; Grid.Refresh();}})">

       <SfIcon Name="IconName.Check" style="color:white"></SfIcon>

</ButtonGroupButton>

 

Please get back to us if you need further assistance.

Regards,

Renjith R

Attachment: ServerApp_c2390608.zip

[SZL]

Hi,

Thank you for fast reply.

Unfortunatelly this is not a perfect solution because the Grid.Refresh() reloads the full datasource of the grid on every button click. My datasource is coming from web api trough UrlAdaptor and in this case, every button click reloads all data from web api again and again..

Thank you!

BR, SZL

[Vignesh Natarajan]

Hi SZL,

Thanks for the update.

Query: “My datasource is coming from web api trough UrlAdaptor and in this case, every button click reloads all data from web api again and again..”

Yes, this will be the default behavior of the Grid component while using the Refresh() method. If you do not want to refresh the entire data, then we suggest you achieve your requirement using SetRowDataAsync() method of Grid. Now that particular record will be updated.
To use this method in Grid, the PrimaryKey column must be defined in Grid, whose value is unique.

Refer to the below code example.

   <SfGrid DataSource="@Orders" @ref="Grid" AllowPaging="true">

        <GridPageSettings PageSize=12 PageSizes="true" />

        <GridColumns>                       

            <GridColumn Field=@nameof(Order.OrderID) Visible="false" IsPrimaryKey="true" Width="80"></GridColumn>

            <GridColumn Field=@nameof(Order.Engedelyezve) Width="80"></GridColumn>

            <GridColumn Width="120">

                <Template>

                    @{

                        Order ds = (context as Order) ?? new Order();

                        <div class="image">

                            <SfButtonGroup Mode="Syncfusion.Blazor.SplitButtons.SelectionMode.Single">

                                <ButtonGroupButton Selected="@(ds.Engedelyezve == true)" SelectedChanged="@((e) => { if(e) { (context as Order).Engedelyezve = true; Grid.SetRowDataAsync(ds.OrderID, context as Order); }})">

                                    <SfIcon Name="IconName.Check" style="color:white"></SfIcon>

                                </ButtonGroupButton>

                                <ButtonGroupButton Selected="@(ds.Engedelyezve == null)" SelectedChanged="@((e) => { if(e) { (context as Order).Engedelyezve = null;Grid.SetRowDataAsync(ds.OrderID, context as Order); }})">

                                    <SfIcon Name="IconName.IntermediateState" style="color:white"></SfIcon>

                                </ButtonGroupButton>

                                <ButtonGroupButton Selected="@(ds.Engedelyezve == false)" SelectedChanged="@((e) => { if(e) { (context as Order).Engedelyezve = false;Grid.SetRowDataAsync(ds.OrderID, context as Order);; }})">

                                    <SfIcon Name="IconName.Close" style="color:white"></SfIcon>

                                </ButtonGroupButton>

                            </SfButtonGroup>

                        </div>

                    }

                </Template>

            </GridColumn>

        </GridColumns>

    </SfGrid>

Refer to our UG documentation and modified sample for your reference

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SetRowDataAsync_System_Object__0_

Sample: https://www.syncfusion.com/downloads/support/forum/174098/ze/ServerApp-1604819013.zip

Please get back to us if you have further queries.

Regards,

Vignesh Natarajan.

[SZL]

Thank you for help! Its working!

[Vignesh Natarajan]

HI SZL,

Thanks for the update.,

We are glad to hear that you have resolved your query using our solution.

Kindly get back to us if you have further queries.

Regards,

Vignesh Natarajan