Column Template in ASP.NET MVC Tree Grid Component

18 Nov 20182 minutes to read

The column Template has options to display custom element instead of a field value in the column.

NOTE

TreeGrid actions such as editing, filtering and sorting etc. will depend upon the column Field. If the Field is not specified in the template column, the treegrid actions cannot be performed.

Using condition template

You can render the template elements based on condition.

In the following code, checkbox is rendered based on Approved field value.

  <script id="template" type="text/x-template">
            <div class="template_checkbox">
                ${if(approved)}
                <input type="checkbox" checked> ${else}
                <input type="checkbox"> ${/if}
            </div>
        </script>

Render other components in a column

Tree Grid allows you to render any component in a Column using the Template property. This provides the ability to create custom components or use existing ones from Syncfusion® or third-party libraries.

To render other components in the Tree Grid, ensure the following steps:

Step 1: Provide the HTML content for your custom component using Template property.

     
     col.Field("Priority").HeaderText("Priority").Template("<input type='text' tabindex='1' id='ddlelement' />").Width(100).Add();

Step 2: Use QueryCellInfo event to render the DropDown component on the HTML element placed in Template with the following code.

    function dropdown(args) {
        var ele = args.cell.querySelector("#ddlelement");
        var drop = new ej.dropdowns.DropDownList({ dataSource: dropData, popupHeight: 100, popupWidth: 100, value: args.data["Priority"]});
        drop.appendTo(ele);
    }

Refer to the below complete code example about how to render dropdown component in Tree Grid column.

NOTE

You can refer to our ASP.NET MVC Tree Grid feature tour page for its groundbreaking feature representations. You can also explore our ASP.NET MVC Tree Grid example to knows how to present and manipulate data.