1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. DropdownTree with "EJS-for" tag its Not Work

DropdownTree with "EJS-for" tag its Not Work

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>


10 Replies 1 reply marked as answer
FA Fahad Alsaif September 13, 2021 11:26 AM UTC

And 

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


SS Sharon Sanchez Selvaraj Syncfusion Team September 13, 2021 11:36 AM UTC

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


FA Fahad Alsaif September 13, 2021 12:28 PM UTC

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


FA Fahad Alsaif September 13, 2021 01:30 PM UTC

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


SM Shalini Maragathavel Syncfusion Team September 14, 2021 02:24 PM UTC

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. 

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. 


FA Fahad Alsaif September 14, 2021 11:44 PM UTC

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



FA Fahad Alsaif September 15, 2021 02:36 PM UTC

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







SM Shalini Maragathavel Syncfusion Team September 15, 2021 03:26 PM UTC

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. 

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. 


Marked as answer
FA Fahad Alsaif September 16, 2021 01:19 PM UTC

Hi Shalini Maragathavel

Thank you for your example

The problem I was facing is solved



KR Keerthana Rajendran Syncfusion Team September 17, 2021 05:32 AM UTC

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. 


Loader.
Up arrow icon