Chip in Datagrid column

[HappyCamper]

Hi there,

I'm decorating a column value with a chip in my datagrid, which works fine.  However if I refresh my feed and grid refreshes, I get chips being added, rather than clearing and only showing the one chip required.  This is the code I use:

<GridColumn Field=Status.Name HeaderText="Status">

                    <Template>

                        <SfChip>

                            <ChipItems>

                                @{

                                    var order = (context as Order);

                                    switch (order.Status.Name)

                                    {

                                        case "Draft":

                                            <ChipItem [email protected] CssClass="e-info" Enabled="true"></ChipItem>

                                            break;

                                        case "Submitted":

                                            <ChipItem [email protected] CssClass="e-warning" Enabled="true"></ChipItem>

                                            break;

                                        case "Invoiced":

                                            <ChipItem [email protected] CssClass="e-success" Enabled="true"></ChipItem>

                                            break;

                                        case "Cancelled":

                                            <ChipItem [email protected] CssClass="e-default" Enabled="true"></ChipItem>

                                            break;

                                        default:

                                            <ChipItem [email protected] CssClass="e-default" Enabled="true"></ChipItem>

                                            break;

                                    }

                                }

                            </ChipItems>

                        </SfChip>

                    </Template>

                </GridColumn>

First time it draws correctly, but when i refresh my datasource... I would see two chips in the column (old value, and a new one added for the new item that's drawn.  Am I adding chips to the datagrid correctly?

[Jeevakanth Palaniappan]

Hi HappyCamper, 

Greetings from Syncfusion support. 

We have validated your query and we are able to reproduce the reported scenario when we perform paging operation. We suggest to set the blazor @key directive to the component rendered in the template to resolve your issue. Please find the below code snippet and the sample for your reference.  

    <GridColumns> 

        <GridColumn Field=Status.Name HeaderText="Status"> 

            <Template> 

                <SfChip @key="@count">                     

                    <ChipItems> 

                        @{ 

                            var order = (context as Order); 

                            count++; 

                            switch (order.Status.Name) 

                            { 

                                case "Draft": 

                                    <ChipItem Text=@order.Status.Name CssClass="e-info" Enabled="true"></ChipItem> 

                                    break; 

                                case "Submitted": 

                                    <ChipItem Text=@order.Status.Name CssClass="e-warning" Enabled="true"></ChipItem> 

                                    break; 

                                case "Invoiced": 

                                    <ChipItem Text=@order.Status.Name CssClass="e-success" Enabled="true"></ChipItem> 

                                    break; 

                                case "Cancelled": 

                                    <ChipItem Text=@order.Status.Name CssClass="e-default" Enabled="true"></ChipItem> 

                                    break; 

                                default: 

                                    <ChipItem Text=@order.Status.Name CssClass="e-default" Enabled="true"></ChipItem> 

                                    break; 

                            } 

                        } 

                    </ChipItems> 

                </SfChip> 

            </Template> 

        </GridColumn> 

 

@code{ 

 

    public int count { get; set; } = 0; 

} 

Sample - https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfGrid1201120878  

Please get back to us if you have any other queries. 

Regards, 

Jeevakanth SP.