Dropdown Tree inside of grid columns

[Rizwan]

Hi,

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">

            <e-content-template>

                <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-columns>

                        <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>

                    </e-grid-columns>

                </ejs-grid>

            </e-content-template>

        </ejs-tooltip>

[Pavithra Subramaniyam]

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.

https://ej2.syncfusion.com/aspnetcore/documentation/grid/editing/edit-types#custom-editors-using-template

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

Regards,

Pavithra S