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

Dropdown Tree inside of grid columns


I need a DropDownTree control use in grid columns with a foreign key field and Foreign Key Value please check my code it is not work

var TreeDropDownDatalist = new Syncfusion.EJ2.DropDowns.DropDownTree()


        DataSource = ViewBag.data,

        Fields = new Syncfusion.EJ2.DropDowns.DropDownTreeTreeSettings() { Value = "treedp", Text = "treedpname" },

        Fields: { dataSource: data, value: 'nodeId', text: 'nodeText', child: 'nodeChild' },

        Placeholder = "Please Select",

        FilterBarPlaceholder = "Search",

        AllowFiltering = true,

        PopupWidth = "200px",

        PopupHeight = "400px",

        ItemTemplate = "<span style='font-size: 12px; padding-right: 5px;'>${treedpname}</span>",


        <ejs-tooltip id="xxxxGridtooltip" target=".actionIconTooltip" position="TopCenter" opensOn="Hover">


                <ejs-grid id="xxxxGridView" dataSource="@ViewBag.dataSourceAll" queryCellInfo="xxxxxQueryCellInfo" created="xxxxxDocumentsCreated" actionBegin="xxxxxDocumentsActionBegin" ActionComplete="xxxxxActionComplete" load="xxxxxDocumentsLoad" allowSelection="false" rowHeight="42" allowTextWrap="true" allowFiltering="true" allowSorting="true" enableHover="false" allowPaging="true" height="100%" width="100%" allowExcelExport="true" showColumnChooser="true">

                    <e-grid-filterSettings type="Excel"></e-grid-filterSettings>

                    <e-grid-editSettings allowDeleting="true" allowEditing="true" mode="Normal"></e-grid-editSettings>

                    <e-grid-pagesettings pageCount="4" pageSize="25" pageSizes="@(new string[] { "12", "25", "50", "100", "200","All"})"></e-grid-pagesettings>


                        <e-grid-column field="treedp" headerText="Test" editType="dropdownedit" edit="new {@params = TreeDropDownDatalist }" foreignKeyField="treedpname" foreignKeyValue="treedp" textAlign="Left" width="140" customAttributes=@(new { @class="org_grid_header" } )></e-grid-column>





1 Reply

PS Pavithra Subramaniyam Syncfusion Team December 27, 2022 08:56 AM UTC

Hi Rizwan,

By default, the DropDownList component will be rendered for a foreign key column while editing. If you want to render a custom component in a Grid column you can achieve your requirement by using the “Cell Edit Template” feature. Please refer to the below documentation link for more information.


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


Pavithra S

Live Chat Icon For mobile
Up arrow icon