How can I add value as additional parameter for data source that fill tree view in URL adaptor method?

[Ahmed]

Hi , 

Thanks in advance, 

Q1- How can I add value as additional parameter for data source that fill tree view in URL adaptor method ?

I have a drop down List when I change the value of it I can't send this value to the controller method (data source)  that fill the tree view as additional parameter to reload data based on that drop down list value.

  

Thanks Very much

[Indhumathy Loganathan]

Hi Ahmed, 

 

Greetings from Syncfusion support. 

 

We have validated your requirement in TreeView component. You can pass the additional parameter by using the select event of Dropdown List component. Then you can retrieve the parameter at controller and based on the value you can return the datasource of TreeView to client side. 

 

Refer to the below code snippet. 

 

[index.cshtml] 

<div> 

    <ejs-dropdownlist id="games" dataSource="@ViewBag.data" placeholder="Select a game" popupHeight="220px" select="OnSelect"> 

    </ejs-dropdownlist> 

    <ejs-treeview id="tree"> 

        <e-treeview-fields Id="id" query="new ej.data.Query().addParams('GroupId', 'Root')" ParentID="parentGroupId" Text="name" HasChildren="hasChildren"> 

            <e-data-manager url="/Treeview/GetGroupList" adaptor="UrlAdaptor"></e-data-manager> 

        </e-treeview-fields> 

    </ejs-treeview> 

</div> 

<script> 

    function OnSelect(args) { 

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

        tree.fields = { 

            dataSource: new ej.data.DataManager({ 

                url: "/Treeview/GetGroupList", 

                adaptor: new ej.data.UrlAdaptor(), 

                offline: true 

            }, new ej.data.Query().addParams('GroupId', args.itemData.value)) 

        } 

    }</script> 

 

[TreeviewController.cs] 

[ActionName("GetGroupList")] 

public IEnumerable<ParentNodeViewModel> GetGroupList([FromBody] RequestData dm) 

         

{ 

    IEnumerable<ParentNodeViewModel> data; 

    DataOperations operation = new DataOperations(); 

    if (dm.Where == null && dm.GroupId == "Root") 

    { 

        data = TemplateData; 

    } 

    else if (dm.GroupId == "AddOneNode") 

    { 

        List<ParentNodeViewModel> TempData = TemplateData; 

        TempData.Add(new ParentNodeViewModel { hasChildren = false, id = Guid.NewGuid().ToString(), name = "Internal2" }); 

        data = TempData; 

    } 

    else if (dm.GroupId == "AddTwoNode") 

    { 

        List<ParentNodeViewModel> TempData = TemplateData; 

        TempData.Add(new ParentNodeViewModel { hasChildren = false, id = Guid.NewGuid().ToString(), name = "Internal2" }); 

        TempData.Add(new ParentNodeViewModel { hasChildren = false, id = Guid.NewGuid().ToString(), name = "Internal3" }); 

        data = TempData; 

    } 

    else if (dm.GroupId == "AddThreeNode") 

    { 

        List<ParentNodeViewModel> TempData = TemplateData; 

        TempData.Add(new ParentNodeViewModel { hasChildren = false, id = Guid.NewGuid().ToString(), name = "Internal2" }); 

        TempData.Add(new ParentNodeViewModel { hasChildren = false, id = Guid.NewGuid().ToString(), name = "Internal3" }); 

        TempData.Add(new ParentNodeViewModel { hasChildren = false, id = Guid.NewGuid().ToString(), name = "Internal4" }); 

        data = TempData; 

    } 

    ... 

    return data; 

} 

 

You can find the sample demonstrating the solution from below link. 

 

https://www.syncfusion.com/downloads/support/forum/167841/ze/AdditionalParameter-1575112024 

 

Please let us know if you need any further assistance. 

 

Regards, 

Indhumathy L

[Ahmed]

Thanks for Response,

You miss understand me But I mean that I Want to add value as additional parameter for Tree view data source when selecting a value from external drop down List ?

Thanks Very much

[Indhumathy Loganathan]

Hi Ahmed, 

 

Sorry for the inconvenience. 

 

We have validated your requirement in TreeView component. We suspect that you want to update the custom field value in the TreeView data source for each Dropdown List selection. We have rendered the TreeView with field name customField value as Custom-Info in data source. 

 

While selecting the Dropdown List value, the selected value will be updated at the TreeView data source. Refer to the below code snippet. 

 

[index.cshtml] 

 

<div> 

    <ejs-dropdownlist id="games" dataSource="@ViewBag.data" placeholder="Select a game" popupHeight="220px" select="OnSelect"> 

    </ejs-dropdownlist> 

    <ejs-treeview id="tree"> 

        <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"></e-treeview-fields> 

    </ejs-treeview> 

</div> 

<script> 

    function OnSelect(args) { 

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

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

            var node = tree.getTreeData(tree.getTreeData()[i].id.toString()); 

            //Change the field value 

            node[0].customField = args.itemData.value;     

        } 

        //Print the TreeView datasource. 

        console.log(tree.getTreeData()); 

    } 

</script> 

 

[HomeController.cs] 

 

public IActionResult Index() 

        { 

            ViewBag.data = new string[] { "Value1", "Value2", "Value3" }; 

            List<object> listdata = new List<object>(); 

            listdata.Add(new 

            { 

                id = 1, 

                name = "Australia", 

                hasChild = true, 

                expanded = true, 

                customField = "Custom-Info" 

            }); 

 

You can find the sample demonstrating the solution from below link. 

 

https://www.syncfusion.com/downloads/support/forum/167841/ze/CustomField695466823 

 

Please check the shared sample and let us know if you need any further assistance. 

 

Regards, 

Indhumathy L 

[Ahmed]

Thanks for Response,

But 

1- I want URLAdaptor (Remote) method not ViewBag(Local).

2- How I Can send checkboxes checked to controller in URLAdaptor (Remote) method?

Thanks Very much

[Indhumathy Loganathan]

Hi Ahmed, 

 

In our first update, we have shared the TreeView sample with UrlAdaptor and passed the Dropdown List selected value as additional parameter from client to server. You can pass the additional parameter in the same way and update that parameter value in TreeView fields. 

 

For your reference, we have passed the Dropdown List value and updated the TreeView custom field with that parameter. Please check the below sample. 

 

https://www.syncfusion.com/downloads/support/forum/167841/ze/AdditionalParameter-62183383 

 

Similarly, you can pass the parameter from client to server and you can update those value in TreeView fields.  

 

If we have misunderstood, please elaborate on whether you want to update the TreeView checkbox based on the Dropdown List selections. Else, explain your use case in detail so that we can provide a prompt solution.  

 

Please let us know if you need any further assistance. 

 

Regards, 

Indhumathy L