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

Dropdown not showing text when filtering

Hello,

I want to show the text instead of the id when using the Excel-like filter.

Here is the code for my dropdown:

   //Dropdown
    const roles = [
        { roleName: 'Technik', roleID: '1' },
        { roleName: 'Vertrieb', roleID: '2' },
        { roleName: 'Administrator', roleID: '3' }
    ];
   
    const roleParams = {
        params: {
            actionComplete: () => false,
            dataSource: new DataManager(roles),
            fields: { value: "roleID", text: "roleName" },
            query: new Query()
        }
    };
   
    const roleAccessor = (field, data) => {
        var fieldValue = data[field];
        var role = roles.find(element => element.roleID == fieldValue);
        return role ? role.roleName : "";
    };

<GridComponent id='Grid' height="100%" width="100%" allowSorting={true} actionComplete={reloadAfterChanges} commandClick={commandClick} selectionSettings={settings} className={styles.GridComponent} allowFiltering={true} editSettings={editOptions} toolbar={toolbarOptions} filterSettings={filterOptions} ref={g => grid = g} dataBound={renderComplete} enableInfiniteScrolling={true} pageSettings={pageSettings}>
                            <ColumnsDirective>
                                <ColumnDirective field='firstname' headerText='Name' allowEditing={true} width={125} />
                                <ColumnDirective field='surname' headerText='Nachname' allowEditing={true} width={150} />
                                <ColumnDirective field='email' headerText='Email' allowEditing={true} width={200} />
                                <ColumnDirective field='mobilephone' headerText='Telefonnummer' allowEditing={true} width={200} />
                                <ColumnDirective field='shortname' headerText='Kurzzeichen' allowEditing={true} width={125} />
                                <ColumnDirective field='location' headerText='Büro' allowEditing={true} width={150} />
                                <ColumnDirective field='department' headerText='Abteilung' allowEditing={true} width={150} />
                                <ColumnDirective field='role' headerText="Rolle" edit={roleParams} editType='dropdownedit' valueAccessor={roleAccessor} width={150} />
                                {isAdmin && (<ColumnDirective headerText='Aktionen' commands={commands} width={250} />)}
                            </ColumnsDirective>
                            <Inject services={[Edit, Toolbar, Filter, Sort, Search, InfiniteScroll, CommandColumn]} />
                        </GridComponent>



The following picture will make it clear what i want to achieve:

Have a nice day!


7 Replies 1 reply marked as answer

VS Vikram Sundararajan Syncfusion Team April 26, 2023 12:49 PM UTC

Hi Harald,


Greetings from syncfusion support,


Based on your query we have prepared a sample of Grid in React and tried to reproduce your reported problem at our end, but it was unsuccessful. Please refer the below sample for more information.


Sample: https://stackblitz.com/edit/react-wq9vep?file=index.js,index.html


If you still facing this issue, please share the below mentioned details to us for further validation,


  1. Kindly share us the entire grid code snippet.
  2. Video demo of the issue replication.
  3. Share us the simple issue reproducible sample to us or
  4. Try to reproduce the issue with our above attached sample.


Above requested details will be helpful to validate further at our end and provide solution as earlier as possible.


Regards,

Vikram S



HS Harald Stapfer replied to Vikram Sundararajan April 26, 2023 01:17 PM UTC

Hello,

I get the role from my database, here is how my "users" table looks like:

users: This table has the name, email etc. from the user and the "userrole", this is a foreign key to the "userroles" table which contains a number (1-3) and a Value (the rolename).


On the website, I load the data and each user has following code:


How can I achieve the behaviour you send with this?



JC Joseph Christ Nithin Issack Syncfusion Team April 27, 2023 07:10 PM UTC

Herald,


Please share the details requested in the previous update for further validation of the issue.


  1. Kindly share us the entire grid code snippet.
  2. Video demo of the issue replication.
  3. Share us the simple issue reproducible sample to us or
  4. Try to reproduce the issue with our above attached sample.




HS Harald Stapfer replied to Joseph Christ Nithin Issack May 2, 2023 08:02 AM UTC

Hello Joseph,

I attached the code for my employees Grid.

For the User object I get from my API please see my latest answer in this thread.


Attachment: employees_a84787a9.7z


HS Harald Stapfer replied to Joseph Christ Nithin Issack May 4, 2023 07:26 AM UTC

Do you have any updates for me?



HS Harald Stapfer replied to Joseph Christ Nithin Issack May 15, 2023 07:52 AM UTC

Hello Joseph,


Any Updates on this?



SR Srinivas Raju Syncfusion Team May 16, 2023 05:07 PM UTC

Hi Herald,


Sorry for the delay ,

We have reviewed your query and understood that when filtering the RoleID column you want to filter columns with role values but column should be showing id values this can be achieved by using foreignKeyValue and foreignKeyField property by inserting ForeignKey module to the GridComponent .We are attaching the sample API link for your reference.


<ColumnsDirective>

            <ColumnDirective

              field="OrderID"

              headerText="Order ID"

              width="200"

              textAlign="Right"

              isPrimaryKey="true"

            ></ColumnDirective>

 

            <ColumnDirective

              field="CustomerID"

              headerText="CustomerID"

              width="200"

            ></ColumnDirective>

 

            <ColumnDirective

              field="role"

              headerText="Role"

              width="200"

              textAlign="Right"

            ></ColumnDirective>

 

            <ColumnDirective

              field="role"

              headerText="RollID"

              width="200"

              foreignKeyField="role"

              foreignKeyValue="roleID"

              dataSource={roles}

            ></ColumnDirective>

          </ColumnsDirective>

          <Inject services={[Filter, Page, Sort, Edit, ForeignKey]} />

        </GridComponent>


Sample API documentation:  https://stackblitz.com/edit/react-wq9vep-2ngwel?file=index.js


ForeignKey Column documentation: https://ej2.syncfusion.com/react/documentation/grid/columns/foreign-key-column



Kindly get back to us if you need further assistance.


Regards,

Srinivas R.



Marked as answer
Loader.
Up arrow icon