Display a chiplist inside a datagrid

Hi. I would like to display a syncfusion chiplist inside of a datagrid. My datasource contains a List of KeyValuePair<int,string> that I want to display as a chiplist inside a column. I am able to do that using a regular HTML table, but how can I do that using a syncfusion datagrid? The folowing image shows the result I want to achieve, but I want to use a sfdatagrid instead of a basic html table (proprietary info hidden):


7 Replies 1 reply marked as answer

DA David August 13, 2021 06:32 PM UTC

Image: 




TS Thiyagu Subramani Syncfusion Team August 17, 2021 02:14 AM UTC

Hi David, 

Greetings from Syncfusion support. 

Before proceeding this requirement “Display a chip list inside a DataGrid”, please confirm below details, then only we can provide the appropriate solution as soon as possible. 

  1. Do you want render chip list control inside our EJ2 ( using ejs-grid tag) or Blazor ( using SfGrid tag) DataGrid because you mentioned you want to render chip list using a sfdatagrid.
  2. Grid rendering code.
  3. Syncfusion package version used in your application

Regards, 
Thiyagu S 



DA David August 17, 2021 01:47 PM UTC

Hi Thiyagu,

I am using version 19.2.0.55 for .NET Core. I want to display the chiplist in a  ejs-grid. My datagrid rendering code (without the chiplist part) looks like this: 


<ejs-grid id="Chaines" dataSource="@Model">

    <e-grid-columns>

        <e-grid-column field="Id" headerText="Id"></e-grid-column>

        <e-grid-column field="Editeur" headerText="Éditeur"></e-grid-column>

        <e-grid-column field="AyantDroitSource" headerText="Ayant droit source"></e-grid-column>

        <e-grid-column field="Titres" headerText="Titres"></e-grid-column>

    </e-grid-columns>

</ejs-grid>


My @Model is a IEnumerable<Chaine> where Chaine is a class that contains:

int Id

string Editeur

string AyantDroitSource

List<KeyValuePair<int,string>> Titres


Right now, I am rendering my chiplist in a regular table like this:

...

<td>

        <ejs-chiplist 

                delete="deleteTitre" 

                enableDelete="true" 

                id="@($"titresChips_{item.ADChaineNum}")">

               <e-chips>

                       @foreach(KeyValuePair<int, string> titre in item.Titres)

                       {

                               <e-chip 

                                        text="@titre.Value" 

                                        value="@($"chaineTitre_{titre.Key}")" 

                                        cssClass="e-secondary" 

                                        enabled="true">

                                </e-chip>

                       }

                </e-chips>

        </ejs-chiplist>

</td>

...



MS Manivel Sellamuthu Syncfusion Team August 18, 2021 02:51 PM UTC

Hi David, 

Thanks for your update. 

In EJ2 Grid we can render the custom components in the Grid column using column template feature. We have already discussed this in our documentation. However we are preparing the sample based on this requirement and we will update the sample on or before Aug 20, 2021. Until then we appreciate your patience. 


Regards, 
Manivel 



MS Manivel Sellamuthu Syncfusion Team August 20, 2021 10:08 AM UTC

Hi David, 
 
Thanks for your patience. 
 
By default, the JavaScript template does not executes the Razor code (It only supports html elements). You can achieve your requirement by using queryCellInfo event of Grid. In that event, we have dynamically created the Chip control and appended it to the template element created through column template. Please refer to the below code example and  sample for more information. 
 
 
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" queryCellInfo="queryCellInfo"> 
    <e-grid-columns> 
        <e-grid-column field="OrderID" headerText="Order ID" width="125"></e-grid-column> 
        <e-grid-column field="CustomerID" headerText="Customer ID" template="#template" width="120"></e-grid-column> 
        <e-grid-column field="ShipCountry" headerText="Ship Country"  width="150"></e-grid-column> 
    </e-grid-columns> 
</ejs-grid> 
 
<script id="template" type="text/x-template"> 
    <div class="grid_chip"> 
    </div> 
</script> 
 
<script> 
    function queryCellInfo(args) { 
        if (args.cell.querySelector(".grid_chip") != null && args.column.field == "CustomerID") { 
// create a Chip control and append it to the template element 
// here we can get the data in args.data 
 
            new ej.buttons.ChipList({ chips: [args.data[args.column.field]] }, args.cell.querySelector(".grid_chip")); 
        } 
    } 
</script> 
 
 
 
 
Please let us know if you need further assistance. 
 
Regards, 
Manivel 


Marked as answer

DA David August 20, 2021 02:51 PM UTC

Great, I understand now. Thank you very much for the explanation and the code!



VS Vignesh Sivagnanam Syncfusion Team August 23, 2021 10:30 AM UTC

Hi David 

Thanks for the update 

We are happy to hear that the provided solution works fine at your end. 

Please get back to us if you need any further assistance. 

Regards, 
Vignesh Sivagnanam 


Loader.
Up arrow icon