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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

In GroupSettings CaptionTemplate, how to access ForeignKeyValue?

Thread ID:

Created:

Updated:

Platform:

Replies:

143605 Mar 28,2019 06:03 PM UTC Apr 3,2019 04:40 AM UTC ASP.NET MVC - EJ 2 5
loading
Tags: Grid
Richard Werning
Asked On March 28, 2019 06:03 PM UTC

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 [Syncfusion]
Replied On 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 


Richard Werning
Replied On 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);
}

Thavasianand Sankaranarayanan [Syncfusion]
Replied On 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. 


Richard Werning
Replied On April 2, 2019 01:48 PM UTC

Thank you. Consider this issue closed

Pavithra Subramaniyam [Syncfusion]
Replied On 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. 
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon