1. Home
  2. Forum
  3. Blazor
  4. How to Create a Dropdown Tree in blazor, if not available, can we use Ej2 controls in blazor?

How to Create a Dropdown Tree in blazor, if not available, can we use Ej2 controls in blazor?

Hi Team,


Can you help me on how to create Dropdown Tree in blazor wasm. I saw that the feature is still in your pipeline and is not yet implemented in the current release. is it possible to implement using Ej2 javascript control, if so can you give me a sample project on how to do that?



23 Replies 1 reply marked as answer
IL Indhumathy Loganathan Syncfusion Team December 14, 2021 02:22 PM UTC

Hi Syam, 
 
Greetings from Syncfusion support. 
 
We have validated your requirement in Blazor platform. We have already considered to include the Dropdown Tree component in Blazor platform in any of our upcoming release. You can track the status through the below link. 
 
 
However, you can render the EJ2 JavaScript Dropdown Tree component in Blazor platform by making an interop call. Please check the below link to understand more about interop call. 
 
 
We have prepared a sample where we render the Dropdown Tree component on a button click. Check the below code snippet. 
 
[index.razor] 
<div> 
    <button class="btn btn-primary" @onclick="@CallJSMethod">Render JS Dropdown Tree</button> 
</div> 
<div id="ddltreeelement"></div> 
@code 
{ 
    public async void CallJSMethod() 
    { 
        await jsRuntime.InvokeAsync<object>("JSMethod"); 
    } 
} 
 
[index.html] 
<link rel='nofollow' href=https://cdn.syncfusion.com/ej2/material.css rel="stylesheet" type="text/css" /> 
<!-- Essential JS 2 Dropdown Tree's dependent scripts --> 
<script src=https://cdn.syncfusion.com/ej2/dist/ej2.min.js type="text/javascript"></script> 
<script> 
    function JSMethod() { 
        //define the nested array of JSON objects 
        var continents = [ 
            { 
                code: 'AF', name: 'Africa', countries: [ 
                    { code: 'NGA', name: 'Nigeria' }, 
                    { code: 'EGY', name: 'Egypt' }, 
                    { code: 'ZAF', name: 'South Africa' } 
                ] 
            }, 
            ... 
            ... 
        ]; 
        if (document.getElementsByClassName('e-dropdowntree')[0] == undefined) { 
            var DropDownTreeObj = new ej.dropdowns.DropDownTree({ 
                fields: { dataSource: continents, value: 'code', text: 'name', child: 'countries' } 
            }); 
            DropDownTreeObj.appendTo('#ddltreeelement'); 
        }             
    } 
</script> 
 
You can find the sample from below link. 
 
 
Please check the sample and let us know if you need any further assistance. 
 
Regards, 
Indhumathy L 


SP Syam Pillai December 15, 2021 05:53 AM UTC

Thanks a lot, This was a life saver.


Appreciate the quick response


KR Keerthana Rajendran Syncfusion Team December 16, 2021 05:33 AM UTC

Hi Syam, 

Most welcome. 

We are happy to hear that the provided sample helped you. Please get back to us if you need any further assistance. 

Regards, 
Keerthana R. 


SP Syam Pillai replied to Keerthana Rajendran December 16, 2021 07:03 AM UTC

How do I bind value in blazor though. 


Can you show me how to do it with type script files, since all the documentation on ej2 is on type script.


IL Indhumathy Loganathan Syncfusion Team December 17, 2021 02:25 PM UTC

Hi Syam, 
 
You can bind value for Dropdown Tree using value property as mentioned in the below code snippet. 
 
var DropDownTreeObj = new ej.dropdowns.DropDownTree({ 
    fields: { dataSource: continents, value: 'code', text: 'name', child: 'countries' }, 
    value: ['CUB'] 
}); 
DropDownTreeObj.appendTo('#ddltreeelement'); 
 
 
You can even bind multiple values just by specifying their corresponding values after enabling multi-selection in Dropdown Tree. Also we have documentation and demo links for EJ2 JavaScript platform. Kindly check the below links. 
 
 
 
 
Please let us know if you need any further assistance. 
 
Regards, 
Indhumathy L 


SP Syam Pillai December 20, 2021 04:48 AM UTC

Hi Indumathy,


Thanks for the reply but my question was on how to bind data changed from this dropdown to Blazor side, so that an event will be triggered and other components state will be changed



SA Shameer Ali Baig Sulaiman Ali Baig Syncfusion Team December 20, 2021 02:01 PM UTC

Hi Syam, 
 
We would like to let you know that we have provided existing option to render the EJ2 Dropdown Tree component in Blazor application. All the functionalities of EJ2 Dropdown Tree will be dependent on client script execution. So, the state of the component like its data changes will only be maintained in its client script model object, and these changes will not directly listened to invoke Blazor life cycle methods. 
 
However, we can manually invoke an event from client to server, when the data of Dropdown Tree gets changed in the client side. This can be achieved by using the following solution. 
 
 
Please let us know your exact use case scenario of using EJ2 Dropdown Tree in Blazor application and share your exact requirements on the required events with Dropdown Tree. Based on the shared details, we can provide a sample to meet your expected requirement. 
 
Regards, 
Shameer Ali Baig S. 


SP Syam Pillai December 21, 2021 08:39 AM UTC

Hi Shameer,


We have a multi-layered hierarchical list of locations. For example :-

  1. Asia
    1. India
      1. Kerala
        1. Kochi
          1. Kakkanad
        2. Pathanamthitta
          1. Vadasserikkara
      2. Karnataka
        1. Mangalore
          1. Adyar
    2. USA
      1. Texas
        1. Some state


We need a dropdown with a collapsible list. Upon selection of the item in the list whether it be country, continent, state, or district the page needs to be rendered, the local storage value has to be changed and the properties of the associated pages has also got to change.
Am I clear enough, or do you need more details

Regards,
Syam Pillai

IL Indhumathy Loganathan Syncfusion Team December 22, 2021 02:10 PM UTC

Hi Syam, 
 
We understood that you want to render page based on the Dropdown Tree selection. As mentioned earlier, the client side changes will not be directly listened to invoke Blazor life cycle methods. But you can invoke manual event for Dropdown Tree selection using select event. 
 
Check the below code snippet. 
 
[index.html] 
 
    <script> 
        function JSMethod(dotNetHelper) { 
            ...... 
            if (document.getElementsByClassName('e-dropdowntree')[0] == undefined) { 
                var DropDownTreeObj = new ej.dropdowns.DropDownTree({ 
                    fields: { dataSource: continents, value: 'code', text: 'name', child: 'countries' }, 
                    value: ['CUB'], 
                    select: select 
                }); 
                DropDownTreeObj.appendTo('#ddltreeelement'); 
                function select(args) { 
                    if (args.action == "select") { 
                        return dotNetHelper.invokeMethodAsync('GetSelectedText', args.itemData.text);                        
                    }                    
                } 
            }             
        } 
    </script> 
 
[index.razor] 
 
    private DotNetObjectReference<Index>? objRef; 
    public async void CallJSMethod() 
    { 
        objRef = DotNetObjectReference.Create(this); 
        await jsRuntime.InvokeAsync<object>("JSMethod", objRef); 
    } 
    [JSInvokable] 
    public string GetSelectedText(string passedName) => $"Selected Item, {passedName}"; 
 
You can get the selected value in the passedName variable. Inside the JSInvokable GetSelectedText method you can perform your customizations to render the page. You can find the sample from below link. 
 
 
Please check the shared details and get back to us if you need any further assistance. 
 
Regards, 
Indhumathy L 


SP Syam Pillai December 27, 2021 05:33 PM UTC

This worked out great, thanks guys for the support


KR Keerthana Rajendran Syncfusion Team December 28, 2021 06:50 AM UTC

Hi Syam,  
 
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. 


SP Syam Pillai January 3, 2022 04:16 AM UTC

Hi Team,

Facing some issues while implementing the dropdown. The options in the dropdown are overflowing outside the control. Once the dropdown is clicked the options disappear and work as expected. the first time it loads it is overflowing out of bounds


We are not able to user ej2 material css since it will impact our current design. Can you help us solve this issue using the required css. 


You can find the solution here https://zcodelabs-my.sharepoint.com/:u:/p/alen_mathew/ESxLzHmxUedChfGeTCm4o5YB_ZcG3f4P7wbM2H8R34_m5Q?e=3Jzbdo




IL Indhumathy Loganathan Syncfusion Team January 3, 2022 01:45 PM UTC

Hi Syam, 
 
You can overcome the overlapping issue by specifying the below CSS styles. 
 
<style> 
    .e-treeview { 
        display: none; 
    } 
    .content p { 
        display: none; 
    } 
</style> 
 
 
We understood that you don’t want to use our material theme style in your sample. But we would like to know the exact reason to remove our default theme? We also have various in-built themes as listed in the below UG link. 
 
 
Please check whether any other themes meet your requirement. Also, we have Theme Studio which is used to customize a new theme from existing themes. You can find the steps to generate your own theme from the below link. 
 
 
Kindly check the shared details and get back to us if you need any further assistance. 
 
Regards, 
Indhumathy L  


SP Syam Pillai January 5, 2022 02:29 AM UTC

Hi Team,


When the css was implemented the current coloring scheme and looks changed. which is why opted to not use it.


Didn't know about the theme studio. Will give it a try.


Thanks for the quick response


KR Keerthana Rajendran Syncfusion Team January 5, 2022 05:24 AM UTC

Hi Syam, 

Thanks for the update. 

Please try generating custom themes using our theme studio and get back to us if you need any further assistance. 

Regards, 
Keerthana R. 


Marked as answer
SP Syam Pillai February 1, 2022 01:37 PM UTC

Hi Team,


We have an issue in the current implementation. we get our data through api and there's a bit of delay in getting data.


By the time API call is finished the tree is already rendered, so we cannot set the selected value of ddtree from the razor component.


We have tried to replicate the issue the best we can with the attached solution

https://zcodelabs-my.sharepoint.com/:u:/p/kiruthika_m/EVZCN4ieOqlMlBWeL6v-EcwBhBzEtUMPKzlyv8uVPVaB9Q?e=FgsyV4


Also , when can we expect a DDtree component for blazor from syncfusion




SA Shameer Ali Baig Sulaiman Ali Baig Syncfusion Team February 2, 2022 11:13 AM UTC

Hi Syam, 

We suspect that you are expecting to set the known initial value to Dropdown Tree once the data source is loaded. This can be achieved by setting the value to the value property of DDT, dynamically in the created event of Dropdown Tree as depicted in the following code. 

Add the following code in your shared sample to apply this solution. 

[index.html] 
<script> 
        var selectedVal; 
        function RenderLocationTree(dotNetHelper, ds, id, selectedVal) { 
            selectedVal = ds; 
            var DropDownTreeObj = new ej.dropdowns.DropDownTree({ 
                fields: { dataSource: ds, text: 'name', value: 'id', parentValue: 'pid', hasChildren: 'hasChild' }, 
                placeholder: 'Select a default location', 
                select: select, 
                created: () => { 
                    DropDownTreeObj.value = ds[0].id; 
                } 
            }); 
            DropDownTreeObj.appendTo('#' + id); 
            function select(args) { 
                if (args.action == "select") { 
                    return dotNetHelper.invokeMethodAsync('GetSelectedText', args.itemData.id); 
                } 
            } 
 
        } 
    </script> 

As informed earlier, we have already considered to include the Dropdown Tree component in Blazor platform in any of our upcoming releases.  

You can track the status of the feature implementation through the below link.  
  

Please let us know if you need any further assistance. 

Regards, 
Shameer Ali Baig S. 


SP Syam Pillai March 4, 2022 08:14 PM UTC

Hi Team,


Can we trigger an event when clicking on the clear button in drop down tree?. We want to change the data in local storage when clearing the dropdown tree



MK Muthukrishnan Kandasamy Syncfusion Team March 7, 2022 02:55 PM UTC


Hi Syam, 
 
Currently, we don’t have any event while clicking the clear icon in the Dropdown Tree component. We can use the change event for your requirement, when we select and remove the value then change event will be triggered. 
 
Please refer to the below code snippet. 
 
function onChange(args) { 
                    if (args.value.length == 0) { 
                        console.log("selected items cleared"); 
                    } 
                } 
 
Please let us know if you need any further assistance. 
 
Regards, 
Muthukrishnan K 



AL Albert March 26, 2022 02:21 PM UTC

Hi


I'm trying to pass a Query from the custom component to the DropdownTree component but it doesn't seem to be working.


Can you kindly help with this?


IL Indhumathy Loganathan Syncfusion Team March 28, 2022 02:59 PM UTC

Hi Albert, 
 
You can map queries in the EJ2 Dropdown Tree component by using the query option in the fields property. Please check the below references where we loaded Dropdown Tree data from a remote service. 
 
 
 
Please check whether the shared details helpful for you. If not, please share us the details explanation of your use case with your tried out code snippets. These details would help us to assist you promptly. 
 
Regards, 
Indhumathy L 


AL Albert replied to Indhumathy Loganathan March 29, 2022 11:37 AM UTC

Hi


I'm using the sample Blazor application you created in this thread and I have a query defined in C# and would like to pass down the query to the ejs DropdownTree.


[index.html]

 <script>function RenderDropDownTree(dotNetHelper, ds, id, selectedVal, displayProp, parentIdProp, placeholderTxt, query) {

            var DropDownTreeObj = new ej.dropdowns.DropDownTree({

                fields: { dataSource: ds, text: displayProp, value: 'id', parentValue: parentIdProp, hasChildren: 'isParent', query: query },

                itemTemplate: '#itemTemplate',

                placeholder: placeholderTxt,

                value: String(selectedVal),

                select: select,

                change: onChange,

                popupWidth: '650px'

            });

            DropDownTreeObj.appendTo('#' + id);

            function select(args) {

                if (args.action == "select") {

                    return dotNetHelper.invokeMethodAsync('GetSelectedText', args.itemData.id);

                }

            }


            function onChange(args) {

                if (args.value.length == 0) {

                    return dotNetHelper.invokeMethodAsync('TextCleared');

                }

            }

        }</script>



C#

 objRef = DotNetObjectReference.Create(this);

            JSRuntime.InvokeAsync<object>("RenderDropDownTree", objRef, Accounts.Adapt<AccountDtoListItem[]>(), Id, Value, "name", "parentAccountId", Placeholder, Query).GetAwaiter();

            StateHasChanged();



Is this possible?


IL Indhumathy Loganathan Syncfusion Team March 30, 2022 02:42 PM UTC

Hi Albert,


Yes, you can pass queries from server to client using interop call. But at the client end, it needs to be a pure JavaScript query in order to retrieve data. Check the below code snippet.


  // Set queries to filter and fetch remote data

  var query = new ej.data.Query().from('Employees').select('EmployeeID,FirstName,Title').take(5);


If you want to set the field and data value in the query based on the passed value from the server, You can send the data value (Employee) and field values (EmployeeID, FirstName, and Title) as separate strings in the interop call from the server end and construct the query in the index.html page as shown in the above code. Please try the suggested way and get back to us if you need any further assistance.


Regards,

Indhumathy L


Loader.
Up arrow icon