1. Home
  2. Forum
  3. Vue
  4. Dropdownlist - Change binded data depending on row and display Text value instead of id value

Dropdownlist - Change binded data depending on row and display Text value instead of id value

Hello,

First, thanks for the time you would spend on this issue.

My first demand is trying to display the text value from a Dropdownlist (populate with a array of JSON) used in a Treegrid.
The TreeGrid is displayed nicely as the Dropdownlist.
Unfortunately i don't know how to tell the column to bind or display the text value in the cell instead of the Id value. I have seen that Grid use ForeignKeyValue to achive that but there is no such thing in TreeGrid API.
I have tried with :valueAccessor but it keeps displaying the old value or maybe i'm wrong.

Is there anyway in TreeGrid to tell him to display the text value instead of the id value ?

Here is a JSON example for the Dropdownlist:
[{
    "FaId": "105", "NomFa": "TREDI FA", "Idbp": "", "Nombp": "TREDI", "Iddivision": ""
},{
    "FaId": "103", "NomFa": "Coframetal", "Idbp": "", "Nombp": "COFRAMETAL", "Iddivision": ""
}]
Here is the TreeGrid declaration :
<template>
    <div>
        <ejs-treegrid :dataSource="tree"
                      :editSettings='editSettings'
                      :rowDataBound='rowDataBound'
                      :treeColumnIndex='1'
                      childMapping='Children'
                      gridLines='None'
                      width='auto'>
            <e-columns>
                <e-column
                    field='FaId'
                    headerText='FaId'
                    editType='dropdownedit'
                    :edit='filiereAvalParams'
                    width=180>
                </e-column>
            </e-columns>
        </ejs-treegrid>
    </div>
</template>
The export : 
export default {
    data() {
        return {
            tree: this.$store.getters.getTreeByParentID(),

            editSettings: {
                allowEditing: true,
                allowAdding: true,
                allowDeleting: true,
                mode: 'Cell'
            },

            filiereAvalParams: {
                params: {
                    dataSource: this.$store.state.FilliereAval,
                    fields: {
                        value: 'FaId',
                        text: 'NomFa'
                    },
                    allowFiltering: 'true',
                    query: new Query(),
                    actionComplete: () => false
                }
            },
        };
    },
    methods: {
        rowDataBound: function (args) {
            if (args.data['TypeLigne'] === "FR") {
                args.row.style.background = 'rgba(138, 114, 0, 0.2)';
            } else if (args.data['TypeLigne'] === "FA") {
                args.row.style.background = 'rgba(240, 199, 0, 0.2)';
            }
            if (Number.parseInt(args.data['Niveau'])) {
                args.row.dataset.niveau = 'niveau';
            }
        },
    },
    provide: {
        treegrid: [DetailRow, Edit]
    },
}

Secondly, i have rows of different kinds, and i need to change the data bind to this Dropdownlist dependending of the kind of the row (based on a property : LineType). Is there anyway to achieve this ?
All the data to bind to Dropdownlist are store locally.

Thanks for your support.

5 Replies 1 reply marked as answer
FS Farveen Sulthana Thameeztheen Basha Syncfusion Team August 18, 2020 02:44 PM UTC

Hi Piedrot, 

Thanks for contacting Syncfusion Support. 

Query#1:- Is there anyway in TreeGrid to tell him to display the text value instead of the id value ? 
 
We have achieved your requirement using queryCellInfo event of the TreeGrid. Using this event we have set the DropdownList text value as InnerText for TreeGrid cell to display the text values on TreeGrid on rendering itself. 

Refer to the code example:- 
<ejs-treegrid :dataSource="data :queryCellInfo="queryCellInfo" ref="treegrid"> 
        <e-columns> 
          <e-column field="taskID" headerText="Task ID" width="100" isPrimaryKey="true"></e-column> 
          .   .    . 
          <e-column field="FaId" headerText="FaId" editType="dropdownedit" :edit="priorityParams" width="120" ></e-column> 
        </e-columns> 
</ejs-treegrid> 
 
methods: { 
     queryCellInfo(args) { 
      if (args.column.field === "FaId") { 
        for (var i = 0; i < priorityData.length; i++) { 
          let data = args.data; 
          if ((data[args.column.field]).toString() === priorityData[i]["FaId"]) { 
            args.cell.innerText = priorityData[i]["NomFa"]; // assign the foreignkey field value to the innertext 
          } 
        } 
      } 
    } 
  } 

Refer to the API Link:- 

Screenshot:- 
 
 
Query#2:- i need to change the data bind to this Dropdownlist dependending of the kind of the row (based on a property : LineType). Is there anyway to achieve this ? 
 
In order to achieve this requirement we suggest you to place DropdownList as like EditTemplate feature in TreeGrid. Using EditTemplate we can place custom component (like DropdownList, DatePicker) while on Editing by invoking functions such as create, write, read and destroy. In the below example, On write event, we have rendered the dropdownList for TaskName column and based on rowData value we have changed the dataSource bind to the dropdownList as like below:- 
 
Refer to the below code example:- 
<ejs-treegrid :dataSource="data" ref="treegrid" > 
        <e-columns> 
          <e-column field="taskID" headerText="Task ID" width="100" isPrimaryKey="true"></e-column> 
          <e-column field="taskName" :edit="params" headerText="Task Name" width="250"></e-column> 
            .     .     . 
          ></e-column> 
        </e-columns> 
      </ejs-treegrid> 
 
data() { 
    return { 
      editSettings: { 
        allowAdding: true, 
        allowDeleting: true, 
        allowEditing: true, 
        mode: "Cell" 
      }, 
      toolbar: ["Add", "Edit", "Delete", "Update", "Cancel"], 
      selection: { type: "Multiple" }, 
      params: { 
        create: () => { 
          priorityElem = document.createElement("input"); 
          return priorityElem; 
        }, 
        read: () => { 
          return taskObj.text; 
        }, 
        destroy: () => { 
          taskObj.destroy(); 
        }, 
        write: args => { 
          if (args.rowData.taskName === "Planning") {        // change datasource for dropdownList based on condition 
            data = dropData; 
            col = Object.keys(dropData[0]); 
           }  
           else { 
            data = durationData; 
            col = Object.keys(durationData[0]); 
           ; 
          } 
          taskObj = new DropDownList({        //render DropdownList on write event       
            dataSource: data,                       
            fields: { value: col[0]}, 
            floatLabelType: "Never", 
            placeholder: "Select a Priority" 
          }); 
          taskObj.appendTo(priorityElem); 
        } 
      }, 
  
Note:- You can use your own condition to change the dataSource for dropdownList. 
 
 
Please get back to us if you need any further assistance. 
 
Regards, 
Farveen sulthana T 
 
 


Marked as answer
PG Piedrot Gyzmo August 20, 2020 08:16 AM UTC

Hi Farveen,

Thank you very much, it did help to do what i wanted to achieve and enligth me on the working process of your tools.

Neverless, i do have an other interrogation about display customisation.
Is there a way to replace the triangle icon by another one by giving a expand and collapse icon and a way to have a wider space between parent and child row, like so :



Right now, i'm doing everything by customisation cells rendering and by overriding css but maybe is there a better way...

Again big thanks for your help and time!

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team August 22, 2020 12:27 PM UTC

Hi Piedrot, 

Thanks for your feedback.  
 
Query#:- Is there a way to replace the triangle icon by another one by giving a expand and collapse icon. 
 
We can change the Expand/Collapse Icon by overriding the existing CSS class. In the below example we have changed the expand/collapsicon to ‘+’/’-’ instead of Triangle as shown below. 

Refer to the below code example:- 
CSS file       
<style> 
      .e-treegrid .e-treegridexpand::before { 
          content: "\2795" !important; 
      } 
     .e-treegrid .e-treegridcollapse::before { 
       content: "\2796" !important; 
     } 
</style> 
 
 
 
Query#2:- Way to have a wider space between parent and child row, like so : 
 
We have achieved your requirement using queryCellInfo event of the TreeGrid. In queryCellInfo event, we have added the class for child records record’s based on condition and added indent using external CSS styles. 
 
Refer to the below code example:- 
<ejs-treegrid :dataSource="data" :treeColumnIndex="1":showColumnMenu="true" 
        :queryCellInfo="queryCellInfo" ref="treegrid"> 
        <e-columns> 
            <e-column field="taskID" headerText="Task ID" width="100" isPrimaryKey="true"></e-column> 
                  .    .   .               
           </e-column> 
        </e-columns> 
</ejs-treegrid> 
 
      methods: { 
          queryCellInfo(args) { 
              if (args.column.field === "taskName") { 
                   if (!args.data.hasChildRecords && args.data.level !== 0) { 
                        args.cell.classList.add("child");  // add class to differentiate childrows 
 
              }     
           } 
        } 
<style> 
    .child { 
        text-indent: 35px;  // add your desired indent here 
 
      } 
</style> 
 
 

Refer to the below Documentation for more information about Customization:- 

Please get back to us if you need any further assistance. We  are happy to assist you! 

Regards, 
Farveen sulthana T 


PG Piedrot Gyzmo August 24, 2020 07:20 AM UTC

Hi Farveen,

Thank you for your examples, it confirms what i was already doing.

Wish you a good day, and thanks again for your help !

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team August 25, 2020 04:25 AM UTC

Hi Piedro, 

Thanks for your update. Please get back to us if you need any further assistance. We are happy to assist you. 

Regards, 
Farveen sulthana T 


Loader.
Up arrow icon