We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Set the dropdown value with Fullpath delimeter ->

Hi,
      I want to set the dropdown value with fullpath delimeter "->". i have folder tree like 
A1
    B1
        C2
        D1
    B2
    C2
    D2

and
      A1
      B1
      C1
           A2
           B2
           C2
how to set the C2 with fullpath in both scenario/

5 Replies

PO Prince Oliver Syncfusion Team July 15, 2019 01:27 AM

Hello ASIM, 

Thank you for contacting us. 

To achieve your requirement, you can use the textmode as fullpath with delimiter. Kindly refer to the following UG documentation for further reference: https://help.syncfusion.com/js/dropdowntree/textmode#textmode-with-fullpathdelimiter 

We have attached an example for your requirement, please find it in the following location: https://jsplayground.syncfusion.com/qgiu4f3w 

Let us know if you need any further assistance on this. 
 
Regards, 
Prince 



AT ASIM TAUSIF KHAN July 16, 2019 05:54 AM

Actually my question was that how to set full path in edit mode if the path is save like C1->C2


PO Prince Oliver Syncfusion Team July 17, 2019 01:03 AM

Hi ASIM, 

We could not fully get your requirement in our end. Do you mean to preselect a value and set a full path? Or do you need to get full path is some event? Kindly share us more information on your requirement. This will help us provide a prompt solution. 

Regards, 
Prince 



AT ASIM TAUSIF KHAN July 17, 2019 03:29 AM

yes i want to  preselect a value and set a full path


PO Prince Oliver Syncfusion Team July 18, 2019 03:52 AM

Hi ASIM, 

Thank you for your update. 

To preselect a value and set a full path in the DropDownTree component, you need to set the selected field in the dataSource. Kindly refer to the following code. 

<script> 
var localData = [ 
    { id: 1, name: "A1", hasChild: true }, 
    { id: 2, pid: 1, name: "B1", hasChild: true  }, 
    { id: 3, pid: 1, name: "B2" }, 
    { id: 4, pid: 1, name: "C2" }, 
    { id: 6, pid: 1, name: "D2" }, 
    { id: 8, pid: 2, name: "C2", selected: true }, 
    { id: 9, pid: 2, name: "D1" } 
]; 
$('#itemList').ejDropDownTree({ 
    treeViewSettings: { 
        fields: { id: "id", parentId: "pid", value: "id", text: "name", hasChild: "hasChild", dataSource: localData , selected: "selected" } 
    }, 
    textMode: "fullPath", 
    fullPathDelimiter: "->" 
}); 
</script> 

We have attached the modified sample for your reference, please find it in the following location: https://jsplayground.syncfusion.com/qrpzek3z  

Let us know if you need any further assistance on this. 

Regards, 
Prince 


Loader.
Live Chat Icon For mobile
Up arrow icon