How to make preselected dropdown List for foreign key when I add Record in Tree Grid

[Ahmed]

Hi,

How to make preselected dropdown List for foreign key when I add Record in Tree Grid?

Thank you Very much

[Farveen Sulthana Thameeztheen Basha]

Hi Ahmed, 

Greetings from Syncfusion Support. 

Query#:- How to make preselected dropdown List for foreign key when I add Record in Tree Grid? 

By default, we don’t have the Foreign Key support in TreeGrid (i.e. the Foreignkey column dataSource which is separate from the TreeGrid dataSource). TreeGrid Databinding concept is of hierarchy relationship, we do not provide in-built support for foreignkey datasource. 

In order to display the ForeignKey column in TreeGrid, we have used queryCellInfo event of TreeGrid.  .Using this event we have set the DropdownList text value as InnerText for TreeGrid cell to display the text values on TreeGrid on rendering itself. Also using EditTemplate feature we have bind the dataSource and rendered Dropdownlist with Foreign key data. 

Refer to the code below:- 

<ejs-treegrid id="treegrid" treeColumnIndex="1" dataSource="@ViewBag.treedata" childMapping="Children" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })" queryCellInfo="queryCellInfo"> 

        <e-treegrid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Row"></e-treegrid-editSettings> 

        <e-treegrid-columns> 

            .  .   . 

            <e-treegrid-column field="Duration" headerText="Duration" textAlign="Right" width="70" editType="dropdownedit" edit="@(new { create = "create", read = "read", write = "write", destroy ="destroy" })"></e-treegrid-column> 

        </e-treegrid-columns> 

    </ejs-treegrid> 

 

</div> 

 

<script> 

 

    var jsonData = @Json.Serialize(@ViewBag.durationData); 

    function queryCellInfo(args) { 

      if (args.column.field === "Duration") { 

            for (var i = 0; i < jsonData.length; i++) { 

                let data = args.data; 

                if (data[args.column.field] === jsonData[i]["Duration"]) { 

                    args.cell.innerText = jsonData[i]["FirstName"]; // assign the foreignkey field value to the innertext 

                } 

            } 

        } 

    } 

 

</script> 

<script> 

 

       var data = @Json.Serialize(@ViewBag.durationData); 

        var dropdownObj, elem; 

        function create(args) { 

            elem = document.createElement('input'); 

            return elem; 

        } 

        function read(args) { 

            return dropdownObj.value; 

        } 

        function destroy(args) { 

            return dropdownObj.destroy(); 

        } 

        function write(args) { 

            var treeGridObj = document.getElementById("treegrid").ej2_instances[0]; 

            dropdownObj = new ej.dropdowns.DropDownList({ 

                dataSource: data, 

                fields: { value: 'Duration', text: 'FirstName' }, 

                value: args.rowData[args.column.field], 

                .   .   . 

            }); 

            dropdownObj.appendTo(elem); 

 

    } 

 

   

</script> 

Sample Link:- https://www.syncfusion.com/downloads/support/forum/167071/ze/TestSample-285898_(2)75212602 

Documentation Link:- https://ej2.syncfusion.com/aspnetcore/TreeGrid/EditTemplate#/material 

https://ej2.syncfusion.com/documentation/api/treegrid/#querycellinfo 

Screenshot:- 

 

If your requirement is different from above, share detail Explanation/ code example/ Screenshot about you need to achieve  to proceed further. 

Regards, 

Farveen sulthana T 

[Ahmed]

Perfect,

Thank you very much for your response

[Pon Selva Jeganathan]

Hi Ahmed,   

  

Thanks for the update.    

  

Kindly get back to us for further assistance. We are happy to assist you. 

  

Regards,  

Pon selva