Group captionTemplate

[Mantas Parfionovas]

Hello,

Iam trying to setup custom caption template. My goal is to add icon at the end if condition is satisfied. Is it any way how to do it?

Goal:

if (ViewBag.Slots[Grouped slot name].StoreMode) then
Slot + Store icon
Else
Slot + Home icon

Thnaks a lot!

[Rajapandi Ravi]

Hi Mantas, 

Greetings from syncfusion support 

We have analyzed your query and we could see that you like to customize the caption template with icon based on condition. So based on your query we have prepared a sample and achieved your requirement by using dataBound event of Grid. Please refer the below code example and sample for more information. 

 

<div> 

    <ejs-grid id="Grid" dataBound="bound" dataSource="ViewBag.DataSource" allowGrouping="true" allowFiltering="true" allowPaging="true"> 

        <e-grid-groupsettings captionTemplate="#captiontemplate" columns="@(new string[] {"Verified"})"></e-grid-groupsettings> 

        <e-grid-filtersettings type="Excel" /> 

        <e-grid-columns> 

        .  .  .  .  .  .  .  . . 

  <e-grid-column field="Verified" headerText="Verified" width="150"></e-grid-column> 

        .  .  .  .  .  .  .  .  . 

        </e-grid-columns> 

    </ejs-grid> 

</div> 

 

<script> 

    function bound (args) { //dataBound event of Grid 

        var captionTemplate = document.getElementsByClassName('e-groupcaption'); 

        for (var i = 0; i < captionTemplate.length; i++) { 

            if (captionTemplate[i].innerText == "false") { 

                var node = document.createElement("SPAN"); 

                node.className = 'e-icons e-search'; 

                node.width = "50px"; 

                node.height = "50px"; 

                captionTemplate[i].appendChild(node); 

            } 

            else { 

                var ele = document.createElement("SPAN"); 

                ele.className = 'e-icons e-upload'; 

                ele.width = "50px"; 

                ele.height = "50px"; 

                captionTemplate[i].appendChild(ele); 

            } 

             

        } 

    } 

</script> 

 

<script id="captiontemplate" type="text/x-template"> 

    ${groupTemplate(data)} 

</script> 

<script type="text/javascript"> 

 

    function groupTemplate(args) { 

        if (args.field == "Verified") { 

            return args.key; 

        } 

    } 

</script> 

 

<style> 

    .e-search:before { 

        content: '\e993'; 

    } 

 

    .e-upload:before { 

        content: '\e725'; 

    } 

 

</style> 

 

 

Sample: https://www.syncfusion.com/downloads/support/forum/161376/ze/161376-2118620049.zip 

For rendering the Custom icons, here the available icons for the grid, Please refer the below link for your reference 

Icons : https://ej2.syncfusion.com/aspnetcore/documentation/appearance/icons/ 

Regards,
Rajapandi R