1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. How to use Tree Grid ?

How to use Tree Grid ?

Hello, syncfusion Teams.


No matter how much I check the Manual or Demo, I can't find how to do what I want.

i really want to use TreeGrid. Please give solution.


As I used in datagrid, I want to connect Datamanage to DB rather than webapi method to get data and use crud.


We are testing by adding to the sample provided by syncfusion.

I underlined the desired changes in the Sample. Please check this case.


The tree Datasource must be fetched from the DB, and additions or modifications must be reflected.

In addition, please suggest whether there is a way to designate Parent when adding.


ADD CONTENTS

- Is it possible to set the ComboBox Data in the back column to change according to the ComboBox Data in the front column is selected in the ADD / EDIT situation?


<SampleCode - cshtml>

<ejs-treegrid id="EqSelTree" loadChildOnDemand="true" idMapping="TaskID" parentIdMapping="ParentItem" hasChildMapping="isParent" treeColumnIndex="1" gridLines="Both" rowHeight="30" toolbar="@(new List<string>() { "Add","Delete","Update","Cancel" })">

        <e-data-manager url="/HvacInform/HD_EQSEL_URL" crudUrl="/HvacInform/HD_EQSEL_CRUD" adaptor="WebApiAdaptor" crossDomain="true"></e-data-manager>

        <e-treegrid-editsettings allowAdding="true" allowEditing="true" allowDeleting="true" mode="Batch" newRowPosition="Bottom"></e-treegrid-editsettings>

        <e-treegrid-columns>

            <e-treegrid-column field="TaskId" headerText="Task ID" isPrimaryKey="true" textAlign="Right" width="90"></e-treegrid-column>

            <e-treegrid-column field="TaskName" headerText="Task Name" width="180"></e-treegrid-column>

            <e-treegrid-column field="StartDate" headerText=" Start Date" textAlign="Right"

                               format="yMd" type="date" width="90"></e-treegrid-column>

            <e-treegrid-column field="Duration" headerText="Duration" textAlign="Right" width="80"></e-treegrid-column>

</e-treegrid-columns>

    </ejs-treegrid>


7 Replies
PS Pon Selva Jeganathan Syncfusion Team January 5, 2022 02:54 PM UTC

Hi Taewook, 
  
Thanks for contacting syncfusion forum. 
  
Query: i really want to use TreeGrid.  
  
Based on your query, we understand you need to the sample based on web api adaptor with CRUD operation. We have created simple sample based on web api adaptor with CRUD. 
  
Please refer to the below sample. 
  
Query: Is it possible to set the ComboBox Data in the back column to change according to the ComboBox Data in the front column is selected in the ADD / EDIT situation? 
  
Based on your query, we suggest you use cell edit template feature of the treegrid. The cell edit template feature is used to add a custom component for a particular column. 
  
Please refer to the below help documentation, 
  
Please refer to the below demo, 
  
Kindly get back to us for further assistance. 
  
Regards, 
Pon selva 



TK TaeWook Kang January 10, 2022 06:00 AM UTC

Thanks for the reply.


Somehow, I activated TreeGrid. But, unlike the example sample, the data came out weird. Why?

I want to get db data, so i must be use UrlAdaptor. 


Please give me a solution


<Sample Code>

    <ejs-treegrid id="TreeGrid" idMapping="TaskID" height="260" parentIdMapping="ParentItem" hasChildMapping="isParent" treeColumnIndex="1">

        <e-data-manager url="https://ej2services.syncfusion.com/production/web-services/api/SelfReferenceData" adaptor="WebApiAdaptor" crossDomain="true"></e-data-manager>

        <e-treegrid-columns>

            <e-treegrid-column field="TaskID" headerText="Task ID" textAlign="Right" width="90"></e-treegrid-column>

            <e-treegrid-column field="TaskName" headerText="Task Name" width="180"></e-treegrid-column>

            <e-treegrid-column field="StartDate" headerText=" Start Date" textAlign="Right"

                               format="yMd" type="date" width="90"></e-treegrid-column>

            <e-treegrid-column field="Duration" headerText="Duration" textAlign="Right" width="80"></e-treegrid-column>

        </e-treegrid-columns>

    </ejs-treegrid>


<MyCode>

    <ejs-treegrid id="EqSelTree" idMapping="TaskId" hasChildMapping="isParent" parentIdMapping="ParentItem" treeColumnIndex="0"

                  created="eqSelCreated" gridLines="Both" rowHeight="30" toolbar="@(new List<string>() { "Add","Delete","Update","Cancel" })">

        <e-treegrid-editsettings allowAdding="true" allowEditing="true" allowDeleting="true" mode="Batch" newRowPosition="Bottom"></e-treegrid-editsettings>

        <e-treegrid-columns>

            <e-treegrid-column field="TaskId" isPrimaryKey="true" headerText="Task ID" textAlign="Right" width="90"></e-treegrid-column>

            <e-treegrid-column field="TaskName" headerText="Task Name" width="180"></e-treegrid-column>

            <e-treegrid-column field="StartDate" headerText=" Start Date" textAlign="Right" format="yMd" type="date" width="90"></e-treegrid-column>

            <e-treegrid-column field="Duration" headerText="Duration" textAlign="Right" width="80"></e-treegrid-column>

            <e-treegrid-column field="ParentItem" headerText="ParentItem" textAlign="Right" width="80"></e-treegrid-column>

            <e-treegrid-column field="isParent" headerText="isParent" textAlign="Right" width="80"></e-treegrid-column>

        </e-treegrid-columns>

    </ejs-treegrid>


function eqSelCreated() {

        var DataGrid = document.getElementById("EqSelTree").ej2_instances[0];


        DataGrid.dataSource = new ej.data.DataManager({


            url: "/HvacInform/HD_EQSEL_URL",


            insertUrl: "/HvacInform/HD_EQSEL_INSERTURL",

            updateUrl: "/HvacInform/HD_EQSEL_UPDATEURL",

            removeUrl: "/HvacInform/HD_EQSEL_REMOVEURL",

            adaptor: new ej.data.UrlAdaptor()

        });

    }


public class TreeGridItems

        {

            public TreeGridItems() { }

            public bool isParent { get; set; }

            public int TaskId { get; set; }

            public string TaskName { get; set; }

            public DateTime StartDate { get; set; }

            public int Duration { get; set; }

            public int? ParentItem { get; set; }

            public static List<TreeGridItems> GetSelfData()

            {

                List<TreeGridItems> BusinessObjectCollection = new List<TreeGridItems>();

                BusinessObjectCollection.Add(new TreeGridItems()

                {

                    TaskId = 1,

                    TaskName = "Parent Task 1",

                    StartDate = new DateTime(2017, 10, 23),

                    Duration = 10,

                    ParentItem = null,

                    isParent = true

                });

                BusinessObjectCollection.Add(new TreeGridItems()

                {

                    TaskId = 2,

                    TaskName = "Child task 1",

                    StartDate = new DateTime(2017, 10, 23),

                    Duration = 4,

                    ParentItem = 1,

                    isParent = false

                });

                BusinessObjectCollection.Add(new TreeGridItems()

                {

                    TaskId = 3,

                    TaskName = "Child Task 2",

                    StartDate = new DateTime(2017, 10, 24),

                    Duration = 5,

                    ParentItem = 1,

                    isParent = false

                });

                BusinessObjectCollection.Add(new TreeGridItems()

                {

                    TaskId = 4,

                    TaskName = "Child task 3",

                    StartDate = new DateTime(2017, 10, 25),

                    Duration = 6,

                    ParentItem = 1,

                    isParent = false

                });

                BusinessObjectCollection.Add(new TreeGridItems()

                {

                    TaskId = 5,

                    TaskName = "Parent Task 2",

                    StartDate = new DateTime(2017, 10, 23),

                    Duration = 10,

                    ParentItem = null,

                    isParent = true

                });

                BusinessObjectCollection.Add(new TreeGridItems()

                {

                    TaskId = 6,

                    TaskName = "Child task 1",

                    StartDate = new DateTime(2017, 10, 23),

                    Duration = 4,

                    ParentItem = 5,

                    isParent = false

                });

                BusinessObjectCollection.Add(new TreeGridItems()

                {

                    TaskId = 7,

                    TaskName = "Child Task 2",

                    StartDate = new DateTime(2017, 10, 24),

                    Duration = 5,

                    ParentItem = 5,

                    isParent = false

                });

                BusinessObjectCollection.Add(new TreeGridItems()

                {

                    TaskId = 8,

                    TaskName = "Child task 3",

                    StartDate = new DateTime(2017, 10, 25),

                    Duration = 6,

                    ParentItem = 5,

                    isParent = false

                });

                BusinessObjectCollection.Add(new TreeGridItems()

                {

                    TaskId = 9,

                    TaskName = "Child task 4",

                    StartDate = new DateTime(2017, 10, 25),

                    Duration = 6,

                    ParentItem = 5,

                    isParent = false

                });


                return BusinessObjectCollection;

            }

        }


public ActionResult HD_EQSEL_URL([FromBody] DataManagerRequest dm)

        {

            List<TreeGridItems> BusinessObjectCollection = TreeGridItems.GetSelfData();

            int i = BusinessObjectCollection.Count;


            return dm.RequiresCounts ? Json(new { result = BusinessObjectCollection, count = i }) : Json(BusinessObjectCollection);

        }


FS Farveen Sulthana Thameeztheen Basha Syncfusion Team January 11, 2022 03:43 PM UTC

Hi TaeWook, 

From your provided details, we have faced (data Replication issue) only while on binding dataSource using created event of the TreeGrid. So we need to get the confirmation details to proceed further on this issue. Share us the following details. 

  1. Have you faced the issue only on binding datasource with created event or else on TreeGrid definition?
  2. Share Screenshot/Video Demo to replicate the issue.
  3. Network Tab details as like below
 

The provided details will be helpful for further validation on this problem and provide you solution as early as possible. 

Regards, 
Farveen sulthana T 


TK TaeWook Kang January 13, 2022 01:11 AM UTC



Hello,  Farveen Sulthana Thameeztheen Basha.

Thank you for your full service.

  1. Have you faced the issue only on binding datasource with created event or else on TreeGrid definition?
    - Yes, There is no problem with using the code as below.
    2. <ejs-treegrid id="EqSelTree" allowTextWrap="true" height="670" cellEdit="treeCellEdit" idMapping="EQ_NO" hasChildMapping="IS_PARENT" parentIdMapping='P_EQ_NO' treeColumnIndex="0" toolbar="@(new List<string>() { "Add", "Delete", "Update", "Cancel" })">
            <e-data-manager url="/HvacInform/[email protected]&[email protected]&[email protected]" crudUrl="/HvacInform/[email protected]&[email protected]&[email protected]" adaptor="UrlAdapto
    r"></e-data-manager>

    but, There is problem with using the "created" event.
  2. Share Screenshot/Video Demo to replicate the issue.
    - Please Check the attach file.

  3. Network Tab details as like below
     -    I'm sorry, but I'm not really sure what you're asking for. Once I captured the same screen, please tell me again if it's not what you want.



Attachment: Error_Snapshot_97a0a102.zip

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team January 13, 2022 04:01 PM UTC

Hi TaeWook, 

Thanks for your additional details. 

From your provided screenshot, there is no dataSource bound to TreeGrid. But we have faced only data replication issue at our end from using your provided code example in previous update. So we have prepared sample with your provided code example. Refer to the sample link:- 

Note:- Your provided code example in previous and this update were different. So we are unable to conclude the exact issue you have faced. 
 
We request you to share us the exact issue you have faced by replicating from above sample and revert us back by modifying it with created event to bind dataSource . If possible share video demo for replication procedure. 

Based on your provided details we will confirm the exact issue you have faced. Otherwise we would like to set up a web meeting to look into the issue further and provide you solution based on your availability. 

Regards,
Farveen sulthana T 


TK TaeWook Kang replied to Farveen Sulthana Thameeztheen Basha January 18, 2022 05:51 AM UTC

Hi,  Farveen Sulthana Thameeztheen Basha


i tried to your code. but, i couldn't get what i want.


Please check the attached file again.

(i send controller & view folders)


thank you


Attachment: TreeSample_ca1b506.zip

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team January 19, 2022 04:05 PM UTC

Hi Taewook,  

We have created a new ticket under your account to follow up with this query. We suggest you to follow up with the ticket for further updates. Please login using the below link. 

Regards, 
Farveen sulthana T 


Loader.
Up arrow icon