Search results

Row Template in JavaScript TreeGrid control

08 Feb 2023 / 2 minutes to read

The rowTemplate has an option to customise the look and behavior of the treegrid rows. The rowTemplate property accepts either the template string or HTML element ID.

Source
Preview
index.ts
index.css
index.html
Copied to clipboard
import { TreeGrid } from '@syncfusion/ej2-treegrid';
import { textdata } from './datasource.ts';

    let treegrid: TreeGrid = new TreeGrid(
        {
            dataSource: textdata,
            childMapping: 'Children',
            treeColumnIndex: 0,
            rowTemplate: '#rowtemplate',
            height: 250,
            width: 'auto',
            rowHeight: 83,
            columns: [
                { field: 'EmpID', headerText: 'Employee ID', width: '150' },
                { field: 'Name', headerText: 'Employee Name', width: '150' },
                { field: 'Address', headerText: 'Employee Details', width: '350' }
            ]
        });
    treegrid.appendTo('#TreeGrid');
Copied to clipboard
.border {
    border-color: #e0e0e0;
    border: 1px solid #e0e0e0;
    border-width: 1px 0 0 0;
}

img {
    width: 60px;
    height: 60px;
    vertical-align: baseline;
    border-radius: 50px;
    margin-left: 20px;
    background-repeat: no-repeat;

}
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>EJ2 TreeGrid</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript TreeGrid Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-grids/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-calendars/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-treegrid/styles/material.css" rel="stylesheet" />
    
    
    
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
        <script id="rowtemplate" type="text/x-template" >

            <tr>
                <td class="border" style='padding-left:18px;' >
                    <div>${EmpID}</div>
                </td>
                <td class="border" style='padding: 10px 0px 0px 20px;'>
                    <div style="font-size:14px;">
                       ${Name}
                        <p style="font-size:9px;">${Designation}</p>
                    </div>
                </td>
                <td class="border">
                    <div>
                        <div style="position:relative;display:inline-block;">
                           <img src="${FullName}.png" alt="${FullName}" />
                        </div>
                        <div style="display:inline-block;">
                            <div style="padding:5px;">${Address}</div>
                            <div style="padding:5px;">${Country}</div>
                            <div style="padding:5px;font-size:12px;">${Contact}</div>
                        </div>
                    </div>
                </td>
        
            </tr>
        </script>
        <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='TreeGrid'></div>
    </div>
</body>
</html>

The rowTemplate property accepts only the TR element.

Row template with formatting

If the rowTemplate is used, the value cannot be formatted inside the template using the columns.format property. In that case, a function should be defined globally to format the value and invoke it inside the template.

Source
Preview
index.ts
index.css
index.html
Copied to clipboard
import { TreeGrid } from '@syncfusion/ej2-treegrid';
import { textdata } from './datasource.ts';
import { Internationalization } from '@syncfusion/ej2-base';

let instance: Internationalization = new Internationalization();

(window as DateFormat).format = (value: Date) => {
    return instance.formatDate(value, { skeleton: 'yMd', type: 'date' });
};

interface DateFormat extends Window {
    format?: Function;
}

    let treegrid: TreeGrid = new TreeGrid(
        {
            dataSource: textdata,
            childMapping: 'Children',
            treeColumnIndex: 0,
            rowTemplate: '#rowtemplate',
            height: 250,
            width: 'auto',
            rowHeight: 83,
            columns: [
                { field: 'EmpID', headerText: 'Employee ID', width: '150' },
                { field: 'Address', headerText: 'Employee Details', width: '350' },
                { field: 'DOB', headerText: 'DOB', width: '150' }
            ]
        });
    treegrid.appendTo('#TreeGrid');
Copied to clipboard
.border {
    border-color: #e0e0e0;
    border: 1px solid #e0e0e0;
    border-width: 1px 0 0 0;
}

img {
    width: 60px;
    height: 60px;
    vertical-align: baseline;
    border-radius: 50px;
    margin-left: 20px;
    background-repeat: no-repeat;

}
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>EJ2 TreeGrid</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript TreeGrid Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-grids/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-calendars/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-treegrid/styles/material.css" rel="stylesheet" />
    
    
    
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
        <script id="rowtemplate" type="text/x-template" >

            <tr>
                <td class="border" style='padding-left:18px;' >
                    <div>${EmpID}</div>
                </td>
                <td class="border">
                    <div>
                        <div style="position:relative;display:inline-block;">
                           <img src="${FullName}.png" alt="${FullName}" />
                        </div>
                        <div style="display:inline-block;">
                            <div style="padding:5px;">${Address}</div>
                            <div style="padding:5px;">${Country}</div>
                            <div style="padding:5px;font-size:12px;">${Contact}</div>
                        </div>
                    </div>
                </td>
                <td class="border" style='padding-left: 20px;'>
                    <div>${format(data.DOB)}</div>
                </td>
        
            </tr>
        </script>
        <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='TreeGrid'></div>
    </div>
</body>
</html>

Limitations

Row template feature is not compatible with all the features which are available in treegrid and it has limited features support. Here we have listed out the features which are compatible with row template feature.

  • Filtering
  • Paging
  • Sorting
  • Scrolling
  • Searching
  • Rtl
  • Context Menu
  • State Persistence