DropdownTree with "EJS-for" tag its Not Work

[Fahad Alsaif]

Hello! the support team 

My New Project on Visual Studio 2019 and its ASP.NET CORE i have use The Control "DropdownTree" and its work fine 

but when i use edit page for Employee i used "EJS-for" to mapping wicth Deparmtnet he is,

 i got this error and the DropdownTree is freezed

=======================

Uncaught TypeError: Cannot read properties of undefined (reading 'toString')

    at t.setValidValue (ej2.min.js:1)

    at t.setTreeValue (ej2.min.js:1)

    at t.render (ej2.min.js:1)

    at t.appendTo (ej2.min.js:1)

    at 12:1903

=======================

if i removed "EJS-for" tag the DropdownTree is fill with all Departments

html code :

@model Attendance.Models.ViewModel.EmployeeVM

@using Syncfusion.EJ2

 <ejs-dropdowntree id="tree" placeholder="أختر القسم" ejs-for="Employee.DepartmentId" enableRtl>

                            <e-dropdowntree-fields dataSource="ViewBag.dataSource" value="DepartmentId" parentValue="ParentId" text="DepartmentName" hasChildren="hasChild" expanded="expanded"></e-dropdowntree-fields>

                        </ejs-dropdowntree>

                        <span asp-validation-for="Employee.DepartmentId" class="text-danger"></span>

[Fahad Alsaif]

And 

I have checked that there is a value in  "Employee.DepartmentId"

[Sharon Sanchez Selvaraj]

Hi Fahad, 

 

Greetings from Syncfusion support. 

 

We have checked with your reported query in Dropdown Tree. We understand that you are facing difficulties when using ejs-for. We have prepared a similar sample with the provided code snippet. 

 

Refer to the sample link below. 

 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/DDTPost-1435625954 

 

However, we are unable to reproduce the issue mentioned. 

 

If possible, kindly provide the following details so that we can provide a prompt solution. 

 

1. Does this issue occur when placing the Dropdown Tree inside any other component?
2. Video demonstration of the mentioned issue.
3. If possible, kindly modify the above sample to reproduce the issue.
4. Package version used in your application.

 

Please get back to us if you need any further assistance. 

 

Regards, 

Sharon Sanchez S. 

[Fahad Alsaif]

Hi  Sharon Sanchez S. 

Thank You for replay

i Run and see the sample 

I guess I didn't explain or specify the problem exactly

but If you can modify the example

That there is "Department Id" for specific employee

. This means that if all the departments in the list are fill , a specific department will be identified and selected  Thank you

[Fahad Alsaif]

In short, when i disply employee details, including the name of the department in which he is, and when you click on the name of the department, get a all departments comes up in case you want to transfer the employee to another department

[Shalini Maragathavel]

Hi Fahad, 

Good day to you. 

Based on your query and error details, we suspect that you have set the ejs-for value as integer datatype, which is the cause of the issue. To overcome the reported issue, we suggest you to bind the value in string datatype as demonstrated in the below code snippet. 

 

    public ActionResult Index(SampleModel model) 

        { 

            ViewBag.data = new SampleModel().TreeViewdata(); 

            model.DepartmentId = model.DepartmentId; 

            return View(model); 

        } 

 

    } 

    public class SampleModel 

    { 

        public String DepartmentId { get; set; } 

             

        public List<SampleModel> TreeViewdata() 

        { 

            List<SampleModel> treedata = new List<SampleModel>(); 

            treedata.Add(new SampleModel 

            { 

                DepartmentId = "1", 

                DepartmentName = "Discover Music", 

                hasChild = true, 

                expanded = true 

            }); 

            treedata.Add(new SampleModel 

            { 

                DepartmentId = "2", 

                ParentId = "1", 

                DepartmentName = "Hot Singles", 

 

            }); 

             . . . 

            return treedata; 

        } 

        } 

} 

 

Also, the selected values can be retrieved through form post as shown below. 

Screenshot: 

Please find the below sample for your reference. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DDTPost-1435625954-207275838.zip 

API Link: https://ej2.syncfusion.com/javascript/documentation/api/drop-down-tree#value

Please get back to us if you need further assistance.

Regards, 

Shalini M. 

[Fahad Alsaif]

Hi  Shalini Maragathavel

Thank you for your example

 What is you mentioned the reason for the error is because the field type was a integer and this is Logical because it is the serial number of the Departments 

its means the "ejs-for" tag does not work with integer value

according to your example I defined a new variable"String" in Model and used it with "ejs-for" tag , and its worked The employee Department is selected in the DropDownTree, 

but there was another aproblem if you notice the example you sent. you set a value for Department Id "21" by name "Redeem a Gift Card", but when run the example the Department select is Department Id "2" by name "Hot Singles"

 it will take the first number of  Department id , and if there no Department number that starts with the first digit, no Department will be selected

I hope there is a solution for that , thank you

Regards

Fahad

[Fahad Alsaif]

I temporarily solved the problem by doing the following

On GET - EDIT

Controller :

            ViewBag.DepartmentId = employeeVM.Employee.DepartmentId;

View :

    <ejs-dropdowntree id="DepartmentTree" Created="created" ejs-for="@Model.NewDepartmentId" enableRtl>

                                <e-dropdowntree-fields dataSource="ViewBag.dataSource" value="DepartmentId" parentValue="ParentId" text="DepartmentName" hasChildren="hasChild"></e-dropdowntree-fields>

                            </ejs-dropdowntree>

                            <span asp-validation-for="@Model.NewDepartmentId" class="text-danger"></span>

<script type="text/javascript">

        function created(args) {

            var treeObj = document.getElementById("DepartmentTree").ej2_instances[0];

            var DepartmentId= @ViewBag.DepartmentId;

            treeObj.value = [Parent.toString()];

        }

    </script>

       On POST - EDIT

Controller :

                obj.Employee.DepartmentId = int.Parse(obj.NewDepartmentId);

[Shalini Maragathavel]

Hi Fahad, 

We deeply regret for the inconvenience. 

We have validated your query. The value bound to the ejs-for should be in string array type, so you can resolve this issue by binding the ejs-for value in string array datatype as demonstrated in the below code snippet, 

 

<ejs-dropdowntree id="tree" placeholder="أختر القسم" ejs-for="@Model.DepartmentId1" enableRtl> 

            . . . 

        </ejs-dropdowntree> 

          
----------------------------------------------------------------------
  public IActionResult Index() 

        { 

            ViewBag.data = new SampleModel().TreeViewdata(); 

            model.DepartmentId1 = new String[] {"21"}; 

            return View(model); 

        } 

     

    public class SampleModel 

    { 

        public String[] DepartmentId1 { get; set; } 

} 

Please find the below sample for your reference. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DDTPost-1435625954906153363.zip 

If the issue persists, please share the controller code snippet of your application to validate further. So that we can check from our end and provide the prompt solution. 

Regards, 

Shalini M. 

[Fahad Alsaif]

Hi Shalini Maragathavel

Thank you for your example

The problem I was facing is solved

[Keerthana Rajendran]

Hi Fahad, 

Most welcome. We are glad to hear that the provided suggestions helped you. Please get back to us if you need any further assistance. 

Regards, 

Keerthana R.