We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. In GroupSettings CaptionTemplate, how to access ForeignKeyValue?

In GroupSettings CaptionTemplate, how to access ForeignKeyValue?

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

5 Replies
MS Madhu Sudhanan P Syncfusion Team March 29, 2019 06:01 AM UTC

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 


RW Richard Werning March 29, 2019 07:41 PM UTC

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);
}

TS Thavasianand Sankaranarayanan Syncfusion Team April 1, 2019 11:49 AM UTC

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 :  
 
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. 


RW Richard Werning April 2, 2019 01:48 PM UTC

Thank you. Consider this issue closed

PS Pavithra Subramaniyam Syncfusion Team April 3, 2019 04:40 AM UTC

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. 
 


Loader.
Up arrow icon