Chip get duplicated as I add and remove filters

[Rodrigo]

Hello!,

I'm using the grid component and have a column with a template where I'm using the Chip component inside. There are some problems that I'm facing and could use some help in sorting them

1. As you can see on the code bellow, I'm initializing the Chip componente with a static chip (and hiding it with css) because if I don't do this no chips appear. so thats why I have this code <ChipListChip Text="Chips" Enabled="false" CssClass="hideChip"></ChipListChip>
2. As I filter the grid by the tags, there are lines that start multiplying its chips and get more and more as I remove and add filters. You can see it happening on the Gif in attachment. Is there a way to prevent this?

Please check the code below for the grid. There is almost no CS code since I'm using the adaptor to get data.

<EjsGrid TValue="OrganizationCraft" AllowGrouping="true" AllowPaging="true" Height="100%" Width="100%" AllowFiltering="true">

<EjsDataManager AdaptorInstance="@typeof(CraftOrganizationAdaptor)" Adaptor="Adaptors.CustomAdaptor"></EjsDataManager>

<GridPageSettings PageCount="5" PageSizes="true"></GridPageSettings>

<GridGroupSettings ShowDropArea="@BelongsToAdministratorOrganization" Columns="@GroupedColumns"></GridGroupSettings>

<GridColumns>

<GridColumn Field=@nameof(OrganizationCraft.OrganizationName) HeaderText="Organization" Visible="@BelongsToAdministratorOrganization"></GridColumn>

<GridColumn Field=@nameof(OrganizationCraft.Name) HeaderText="Name" AllowGrouping="false"></GridColumn>

<GridColumn Field=@nameof(OrganizationCraft.NominalAltitude) HeaderText="Nominal Altitude" Format="N0" AllowFiltering="false" Type="ColumnType.Number" AllowGrouping="false"></GridColumn>

<GridColumn Field=@nameof(OrganizationCraft.FieldOfView) HeaderText="Field of View" Format="N0" AllowFiltering="false" AllowGrouping="false"></GridColumn>

<GridColumn Field=@nameof(OrganizationCraft.Type) HeaderText="Type" AllowGrouping="false"></GridColumn>

<GridColumn Field=@nameof(OrganizationCraft.Tags) HeaderText="Tags" AllowGrouping="false">

<Template>

@{

var organizationCraft = (context as OrganizationCraft);

if (organizationCraft.Tags.Any())

{

<EjsChipList EnableDelete="false">

<ChipCollection>

@foreach (string chip in organizationCraft.Tags)

{

<ChipListChip Text="@chip" CssClass="e-info"></ChipListChip>

}

<ChipListChip Text="Chips" Enabled="false" CssClass="hideChip"></ChipListChip>

</ChipCollection>

</EjsChipList>

}

else

{

<span></span>

}

}

</Template>

</GridColumn>

</GridColumns>

<GridEvents TValue="OrganizationCraft"></GridEvents>

</EjsGrid>

Attachment: GridChipMultiplier_dfbab67d.7z

[Renjith Singh Rajendran]

Hi Rodrigo, 

Thanks for contacting Syncfusion support. 

We suspect that, the problem might have occurred because of new values get updated to the Grid DataSource’s Tags property, when performing a customized filter operation using CustomAdaptor. So, we need more details to further proceed on this and provide you a solution as early as possible. Kindly get back to us with the following details for better assistance. 

1. Share with us the complete model(OrganizationCraft) code. We need to know the type of the Tags property.
2. Share with us the complete code of your CraftOrganizationAdaptor class. We need to validate the customization you have performed during the DataOperations.
3. Kindly get back to us with a sample to reproduce the problem. So that we could validate the problem based on your sample codes.

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran. 

[Rodrigo]

Hi Renjith,

I prepared an example that replicates the problem I'm having. For example, filtering and removing "Tag 1" filter multiples times, you can see that some lines start duplicated it's tags.

Please refer to the example in attachment.

Kind Regards,

Rodrigo F.

Attachment: BlazorAppGridSample_65f7c81f.7z

[Renjith Singh Rajendran]

Hi Rodrigo, 

Thanks for the sample. 

We suggest you to set the @key property for the EjsChipList to overcome the problem you are facing. We are attaching the modified sample for your convenience, please download the sample from the link below, 

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

Please add the below highlighted code in your application, 

 

                      <Template> 

                            @{ 

                                var organizationCraft = (context as OrganizationCraft); 

                                if (organizationCraft.Tags.Any()) 

                                { 

                                    <EjsChipList @key="organizationCraft" EnableDelete="false"> 

                                        <ChipCollection> 

                                            @foreach (string chip in organizationCraft.Tags) 

                                            { 

                                                <ChipListChip Text="@chip" CssClass="e-info"></ChipListChip> 

                                            } 

                                            <ChipListChip Text="Chips" Enabled="false" CssClass="hideChip"></ChipListChip> 

                                        </ChipCollection> 

                                    </EjsChipList> 

                                } 

                                else 

                                { 

                                    <span></span> 

                                } 

                            } 

                        </Template> 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran. 

[Rodrigo]

Hi Renjith,

I tried adding the @key and it seems to have solved the problem. Can you explain what the @key is doing?

Kind Regards,

Rodrigo F.

[Renjith Singh Rajendran]

Hi Rodrigo, 

Thanks for your update. 

The @key attribute ensures that Blazor Diff algorithm is performed properly when list of components are generated from collection. We suggest you to refer to the below general documentation for more details regarding the @key attribute and the usage of @key. 

General Documentation : https://devblogs.microsoft.com/aspnet/asp-net-core-and-blazor-updates-in-net-core-3-0-preview-6/ 

 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran. 

[Rodrigo]

Hi Renjith,

Thank you for the support. Great as always

Regards,

Rodrigo F.

[Renjith Singh Rajendran]

Hi Rodrigo, 

Thanks for your update. 

We are glad to hear that our suggestion helped you in achieving your requirement. 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran.