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):
Image:
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>
...
<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> |
Great, I understand now. Thank you very much for the explanation and the code!