1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Want to add a Age column based on a calculation off date of birth

Want to add a Age column based on a calculation off date of birth

Hi 
I want to calculate age in a grid and display it in a column based on the date of birth can I use a column template and how do I implement it?

For example .....

<e-grid-column field="DateOfBirth" headerText="Date Of Birth" type="date" textAlign="Right" width="250" format="dd/MM/yyyy" template="#ageTemplate"

What does the scrip section look like if i just want to calculate and display the age in a column:

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

        ????

</script>

Regards


11 Replies
MS Manivel Sellamuthu Syncfusion Team February 13, 2020 02:29 PM UTC

Hi Basil, 

Thanks for contacting us. 

Yes, you can use column template for this requirement. Please find the below code example and sample for more information. 

<div> 
    <ejs-grid id="Grid" dataSource="ViewBag.DataSource" allowPaging="true"> 
        <e-grid-columns> 
            <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column> 
            <e-grid-column field="CustomerID" headerText="Customer Name" width="150"></e-grid-column> 
            <e-grid-column field="OrderDate" format="yMd" headerText="Order Date" type="date" format="yMd" width="10%"></e-grid-column> 
            <e-grid-column field="ShippedDate" format="yMd" headerText="Shipped Date" width="150"></e-grid-column> 
            <e-grid-column headerText="Days to Dispatch" template="#dispatchtemplate" width="150"></e-grid-column> 
        </e-grid-columns> 
    </ejs-grid> 
</div> 
 
<script id="dispatchtemplate"  type="text/template"> 
// here you can use custom helper function to perform your calculation 
    <td>${calculateDate(data)} days</td> 
</script> 
 
<script> 
    function calculateDate(args) { 
 
// here you will get each row data and can perform your calculation and return the calculated value 
        return Math.abs(args.ShippedDate.getDate() - args.OrderDate.getDate()); 
    } 
 
</script> 



Please get back to us, if you need further assistance. 

Regards, 
Manivel 


BB Basil Buwalda February 14, 2020 02:50 AM UTC

Fantastic! Thanks

PK Prasanna Kumar Viswanathan Syncfusion Team February 14, 2020 06:30 AM UTC

Hi Basil, 
 
We are happy to hear that the provided solution is working fine at your end. 
 
Please get back to us if you need any further assistance. 
 
Regards, 
Prasanna Kumar N.S.V 


BB Basil Buwalda February 16, 2020 09:59 PM UTC

Hi I suddenly want to reuse this function in a few places now, is there a way to write it somewhere in a utility file and reuse it in here?

PK Prasanna Kumar Viswanathan Syncfusion Team February 17, 2020 05:38 PM UTC

Hi Basil, 
 
Yes, you can reuse the function in various places. We suggest you to write function in a separate JS file and refer the JS file where you want to use the function.   
 
Regards, 
Prasanna Kumar N.S.V 


BB Basil Buwalda February 19, 2020 01:11 AM UTC

Ok so I have centralized my calculateAge function in js, so that I can reuse it. I obviously want to calculate age on the DateOfBirth date picker when I edit in the grid. I had a create, read, write and destroy functions on the DateOfBirth column :

 

<e-grid-column field="DateOfBirth" headerText="Date Of Birth" type="date" textAlign="Right" width="250" format="dd/MM/yyyy"

edit="@(new {create = "createDateOfBirth", read = "readDateOfBirth", destroy = "destroyDateOfBirth", write = "writeDateOfBirth"})"></e-grid-column>

           

and obviously my Age column.....

<e-grid-column headerText="Age" template="#ageTemplate" width="150"></e-grid-column>

 

How do write a onChange event on the DateOfBirth picker to set the Age in the grids edit modal mode?


PK Prasanna Kumar Viswanathan Syncfusion Team February 20, 2020 11:54 AM UTC

Hi Basil, 
 
Query#: How do write a onChange event on the DateOfBirth picker to set the Age in the grids edit modal mode? 
 
You can write a change event write function of Grid cellEditTemplate. It helps to create the custom component or assign default value at the time of editing and you can bind the change event to get the value. So we suggest you to follow the below way to achieve your requirement. Please refer the below code example for more information. 
 
 
<ejs-grid id="Grid" dataSource="@ViewBag.datasource" height="315" allowPaging="true"> 
    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true"></e-grid-editSettings> 
    <e-grid-columns> 
        .  .  .  .  .  . 
        <e-grid-column field="DateOfBirth" headerText="DateOfBirth" format="dd/MM/yyyy" edit="@(new {create = "create", read = "read", destroy = "destroy", write = "write"})" width="120"></e-grid-column> 
        .  .  .  .  .  .  
    </e-grid-columns> 
</ejs-grid> 
 
 
<script> 
    var elem; 
    var dObj; 
 
    function create(args) { 
        elem = document.createElement('input'); 
        return elem; 
    } 
 
    function write(args) { 
        dObj = new ej.calendars.DatePicker({ 
            value: new Date(args.rowData[args.column.field]), 
            change: function (args) { 
            //the change event triggers when the value is changed 
            } 
        }); 
        dObj.appendTo(elem); 
    } 
 
    function destroy() { 
        dObj.destroy(); 
    } 
 
    function read(args) { 
        return dObj.value; 
    } 
</script> 

 
Please get back to us if you need any further assistance. 
 
Regards, 
Prasanna Kumar N.S.V 
 


BB Basil Buwalda February 21, 2020 01:39 AM UTC

I want to set the Age columns value but just not getting the syntax correct:

document.getElementById("Age").value = calculateAge(date);

I did set the column Age id="Age".

BUT document.getElementById("Age") is null obvoiusly not finding it.
What am I doing wrong?



PK Prasanna Kumar Viswanathan Syncfusion Team February 21, 2020 06:05 PM UTC

Hi Basil, 
 
Query: I want to set the Age columns value but just not getting the syntax correct. 
 
We have validated your query and prepared sample based on your requirement. We have used  actionBegin and queryCellInfo event to achieve your requirement. queryCellInfo event will be triggered for each cell to access the cell element and data of each column. Using the queryCellInfo event we have calculated the age for the age column and also changed the innerText of the cell with the calculated age value. And also changed the data of the queryCellInfo event. So you will get the calculated age value when grid renders. The actionBegin event will trigger while update the record with the requestType as save using that we have calculated the changed age as per the changed date value and assigned the value to the rowData. Hence the changed value will be updated in the data source. 
 
Code Snippet:  
 
Index.cshtml 
 
    function cellInfo(args) { 
       if (args.column.field === 'Freight') { 
            args.data.Freight = new Date().getYear() - args.data.OrderDate.getYear(); 
            args.cell.innerText = args.data.Freight; 
        } 
    } 
    function actionBegin(args) { 
        if (args.requestType === "save") { 
        args.data.Freight = new Date().getYear() - args.data.OrderDate.getYear(); 
        } 
    } 
 
<ejs-grid id="Grid" allowPaging="true" load="onLoad" actionBegin="actionBegin" queryCellInfo="cellInfo" toolbar="@(new List<string>() {"Add", "Edit", "Update", "Delete" })"> 
    <e-data-manager url="/Home/UrlDataSource" adaptor="UrlAdaptor" insertUrl="/Home/Insert" updateUrl="/Home/Update" removeUrl="/Home/Remove"></e-data-manager> 
 
 
Documentation Links:  
 
Please get back to us if you need further assistance. 
 
Regards, 
Prasanna Kumar N.S.V 


BB Basil Buwalda February 26, 2020 04:16 AM UTC

Cool Thanks

PK Prasanna Kumar Viswanathan Syncfusion Team February 26, 2020 08:35 AM UTC

Hi Basil, 
 
Thanks for the update. 
 
Please get back to us if you need any further assistance. 
 
Regards, 
Prasanna Kumar N.S.V 


Loader.
Up arrow icon