In GroupSettings CaptionTemplate, how to access ForeignKeyValue?

[Richard Werning]

With the following sample grid, how can I access the foreign key value in the caption template?

        @(Html.EJS().Grid<ServiceTaskVm>("ServiceTaskGrid")

              .EditSettings(edit => { edit.AllowAdding(true).AllowDeleting(true).AllowEditing(true).ShowDeleteConfirmDialog(true); })

              .Toolbar(toolbarItems)

              .SortSettings(sort => sort.Columns(new { field = "SortOrder", direction = "Ascending" }))

              .Columns(col => {

                  col.Field(p => p.Id).IsPrimaryKey(true).IsIdentity(true).Visible(false).Add();

                  col.Field(p => p.ServiceId).Visible(false).Add();

                  col.Field(p => p.SortOrder).Visible(false).Add();

                  col.Field("WorkFlowTypeId").HeaderText("WorkFlow").Width(120)

                      .ForeignKeyField("Id").ForeignKeyValue("Name").DataSource((IEnumerable<object>)ViewBag.dsWorkFlow).Add();

                  col.Field(p => p.ServiceDateDaysOffset).HeaderText("Service Offset").DefaultValue("0").Width(120).EditType("numericedit").Edit(new { @params = new { format = "n0" } }).Add();

                  col.Field(p => p.Description).HeaderText("Description").ClipMode(Syncfusion.EJ2.Grids.ClipMode.EllipsisWithTooltip).Add();

              })

              .AllowGrouping().GroupSettings(group => group.Columns(new string[] { "WorkFlowTypeId" }).CaptionTemplate("#captionTemplate").ShowDropArea(false))

              .Render()

              )

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

    ${field} ${key} : ${count} ${if(count===1)} item ${else}items ${/if}

    <button id="sortTasks" class="e-icons e-list-numbered-01" type="button"></button>

</script>

I see that ${field} accesses the field name and ${key} accesses the key value, but cannot seem to find a way to get the foreign key value.  If I don't assign a CaptionTemplate, then the correct value displays. However I want to add a button to the group header, so need to use the template.  

I've searched through help and the forums, but can't find any reference to what fields are available, or how to determine that myself through investigation. The best information I could find was here:
https://ej2.syncfusion.com/documentation/common/template-engine/#available-template-syntax

Thank you,

Richard Werning

[Madhu Sudhanan P]

Hi Richard, 

Thanks for contacting us. 

You can access the foreign key value inside the captionTemplate using the foreignKey property as follows. 

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

    ${foreignKey} 

</script> 

Regards, 

Madhu Sudhanan P 

[Richard Werning]

Thank you. I have a couple other questions on grouping.

1. Is there a list somewhere in the documentation that list all of the elements available in templates?  This is missing a number of items > https://ej2.syncfusion.com/documentation/common/template-engine/#available-template-syntax
2. How do I change the tooltip of a grouping? 

When I use a template like this (I changed < to ] so it doesn't render):

[script id="captionTemplate" type="text/x-template" ]

    ${key} : ${count} ${if(count===1)} item ${else}items ${/if}

    [button id="sortTasks" class="e-icons e-list-numbered-01" type="button" onclick="clickSortTasks(this)"][/button]

[/script]

The tooltip (on mouseover) ends up displaying as:

     1-QA : 7 items [button id="sortTasks" class="e-icons e-list-numbered-01" type="button" onclick="clickSortTasks(this)"][/button]

I just want it to display the caption of the group.  The button is being rendered and functions correctly, so I think I've defined it correctly.

     3. Using the previous template, how can I get the 1st child element in a group, within the following button click event?

function clickSortTasks(sender) {

  console.log(sender);

}

[Thavasianand Sankaranarayanan]

Hi Richard, 

Query 1 : Is there a list somewhere in the documentation that list all of the elements available in templates?   

We have analyzed your query. We are attaching the available template documentations we have published for Grid. Please refer the links below, 

Documentations :  

https://ej2.syncfusion.com/aspnetmvc/documentation/grid/columns/#using-condition-template 

https://ej2.syncfusion.com/aspnetmvc/documentation/grid/columns/#column-template 

https://ej2.syncfusion.com/aspnetmvc/documentation/grid/columns/#header-template 

https://ej2.syncfusion.com/aspnetmvc/documentation/grid/how-to/use-edit-template-in-foreign-key-column/ 

https://ej2.syncfusion.com/aspnetmvc/documentation/grid/how-to/use-filter-bar-template-in-foreign-key-column/ 

https://ej2.syncfusion.com/aspnetmvc/documentation/grid/row/#row-template 

https://ej2.syncfusion.com/aspnetmvc/documentation/grid/row/#detail-template 

https://ej2.syncfusion.com/aspnetmvc/documentation/grid/row/#rendering-custom-component 

https://ej2.syncfusion.com/aspnetmvc/documentation/grid/grouping/#caption-template 

https://ej2.syncfusion.com/aspnetmvc/documentation/grid/filtering/#filter-bar-template-with-custom-component 

https://ej2.syncfusion.com/aspnetmvc/documentation/grid/paging/#template 

https://ej2.syncfusion.com/aspnetmvc/documentation/grid/aggregates/#footer-aggregate 

 

Query 2 : How do I change the tooltip of a grouping? 

We have analyzed your query. We suggest you to set the HTML “title” attribute for a “div” element, and contain the templates you wish to display in group caption inside this div element. Please find the code example below, 

 

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

    <div title="${key} : ${count} ${if(count===1)} item ${else}items ${/if}"> 

        ${key} : ${count} ${if(count===1)} item ${else}items ${/if} 

        <button id="sortTasks" class="e-icons e-list-numbered-01" type="button" onclick="clickSortTasks(this)">hhjy</button> 

    </div> 

</script> 

Query 3 : how can I get the 1st child element in a group, 

We have analyzed this query. We suggest you to traverse through the DOM element and find the required element you wish to get. In the below code, we have traversed through the DOM to get the first row of the grouped child based on the button clicked. Please refer the code example below, 

    function clickSortTasks(sender) { 

        console.log(sender); 

        console.log(sender.offsetParent.parentElement.nextElementSibling); 

    } 

 

Please get back to us if you need further assistance. 

Regards, 

Thavasianand S. 

[Richard Werning]

Thank you. Consider this issue closed

[Pavithra Subramaniyam]

Hi Richard,  

Thanks for your update. 

Please contact us if you need any further assistance. As always, we will be happy to assist you.  

Regards,  

Pavithra S.