Change a caption template key value depending on another key value

[MOHAMAD IZZAT]

Hi Syncfusion team, my goal is to add a red asterisk at two group fields that user needs to input into the dataGrid with batchEditing. The picture shown below is what i want to achieve, to add asterisk where the {key} for SampleNo depends on {key} for ParameterName.  I also need to loop the SampleNo from a Viewbag since there are more than one rows.

So i have two grouped columns: ParameterName and SampleNo. I tried using the nested {if} in content template but i need the {key} value of SampleNo to change according to {key} value of ParameterName. The picture below shows the idea of how i wanted to implement it. Let's say i want to add an asterisk at row with Parameter 1 and loop through all of its SampleNo. I tried defining key1 and key2 for ParameterName and SampleNo respectively and it caused an error where fields do not show any value. I am not sure how to solve this and i need your assistance. Your time and effort is greatly appreciated. Thanks in advance

[Rajapandiyan Settu]

Hi Mohamad,  

  

Thanks for contacting Syncfusion support. 

 

Based on your query, you want to show ‘*’ in the groupcaption when it has more than one grouped items and show the groupcaption value by looping its grouped items record. You can achieve your requirement by using custom helper function in the group captionTemplate. In that function argument, we send the grouped items details. Here, you can loop the grouped items and return the required data which will be shown in Grid. Please find the below code example for more information.  

 

 

[index.cshtml] 

 

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowGrouping="true" height="315"> 

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

    <e-grid-columns> 

        <e-grid-column field="OrderID" headerText="Order ID"></e-grid-column> 

        <e-grid-column field="CustomerID" headerText="Customer ID"></e-grid-column> 

        <e-grid-column field="ShipCountry" headerText="Ship Country" width="120"></e-grid-column> 

        <e-grid-column field="EmployeeID" headerText="Employee ID" width="170"></e-grid-column> 

    </e-grid-columns> 

</ejs-grid> 

 

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

    ${customHelper(data)} ${if(count > 1)} <span class="validation">*</span> ${/if} 

</script> 

 

<style> 

    .validation { 

        color: red; 

    } 

</style> 

 

<script> 

        function customHelper(data){ 

        // perform your actions here and return the data as you want  

        console.log(data) 

        return data.field + ": " + data.key + " - " + data.count; 

        } 

</script> 

 

 

Please get back to us if you need further assistance with this. 

 

Regards, 

Rajapandiyan S 

[MOHAMAD IZZAT]

Hi! Thanks for the assitance i seem to be able to somewhat solve the issue but i do have another question. In captiontemplate, what other attributes do we have other than ${field},  ${key} and ${count}? Is there any way for me to define my own variable in the script? I tried defining a variable called ${val} within the {$if()} statements but it becomes undefined in the view as shown below:

Script:

View:

If you dont mind, are there any references for these if else statements i am somewhat new to this. Any documentation related to operations in captiontemplate for Asp.net core would be greatly appreciated

Thanks for your assistance :)

[Rajapandiyan Settu]

Hi Mohamad, 

 

You’re welcome. 

 

Query: Is there any way for me to define my own variable in the script? I tried defining a variable called ${val} within the {$if()} statements but it becomes undefined in the view 

 

In the captionTemplate, we passed only the grouped records details (field, key, aggregates, items, headerTex and count values). Based on your requirement, you want to show the custom text in the caption template. You can achieve this by using custom helper function in which you can return the data as you want. 

 

 

[index.cshtml] 

 

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowGrouping="true" height="315"> 

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

    <e-grid-columns> 

        <e-grid-column field="OrderID" headerText="Order ID"></e-grid-column> 

        <e-grid-column field="CustomerID" headerText="Customer ID"></e-grid-column> 

        <e-grid-column field="ShipCountry" headerText="Ship Country" width="120"></e-grid-column> 

        <e-grid-column field="EmployeeID" headerText="Employee ID" width="170"></e-grid-column> 

    </e-grid-columns> 

</ejs-grid> 

 

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

    ${customHelper(data)} ${if(count > 1)} 

    <span class="validation">*</span> ${/if} 

</script> 

 

<style> 

    .validation { 

        color: red; 

    } 

</style> 

 

<script> 

 

   var val = "customText"; 

 

   function customHelper(data){ 

     return data.field + ": " + data.key + " - " + data.count+ " "+ val; // return your customized text as you want which will be shown in Grid 

   } 

 

</script> 

 

  

Please let us know if you need further assistance. 

 

Regards, 

Rajapandiyan S