Display only multiple field name in one column in Vue Grid

[Sabina Muminovic]

To Whom It May Concern,

We are using a gridModel definiton as:

const usersGridModel = reactive({

      ...gridPreset,

      dataSource: new DataManager({

        ...dataManagerPreset(),

        url: "/api/users",

      } as DataOptions),

      columns: [

        {

          field: "name",

          headerText: "Name",

        } as ColumnModel,

        {

          field: "surname",

          headerText: "Surname",

        } as ColumnModel,

        ...

        ],

        }
"name" and "surname" fields are coming from an API as it is.

What we want is to show "name" and "surname" inside one column with one headerText, for an example "Full Name".
(We know that we could merge them in API side, but wanted to make a frontend solution here.)

Thanks in advance!

Is there a way to do this?

[Balaji Sekar]

Hi Sabina, 

 

Greetings from the Syncfusion support. 

 

We checked your query with provided the information and we understand that you want concatenate two columns value in single column. We suggest you to achieve your requirement using column.vlaueAccessor we can customer Grid column in UI level it is not update the Grid’s dataSource. 

 

Please refer the below code example, sample and Help Documentation for more information. 

[App.Vue] 

<ejs-grid ref="grid" :dataSource="data" allowPaging="true"> 

        <e-columns> 

          <e-column 

            field="OrderID" 

            headerText="Order ID" 

            textAlign="Right" 

            width="100" 

          ></e-column> 

          <e-column 

            field="ShipCountry" 

            :valueAccessor="valueAccess"  

            headerText="Customer name" 

            width="100" 

          ></e-column> 

          <e-column 

            field="CustomerID" 

            headerText="Customer Name" 

            width="100" 

          ></e-column> 

          <e-column field="ShipAddress" width="100"></e-column> 

        </e-columns> 

      </ejs-grid> 

methods: { 

    valueAccess(field, data, column) { 

      return data["ShipCountry"] + data["CustomerID"];  // Concatenate ShipCountry and CustomerID in Customer Name column  

    }, 

  }, 

 

Sample link: https://codesandbox.io/s/146774-dynamic-grid-modified-forked-tge7x  

 

Please get back to us if you need further assistance. 

 

Regards, 

Balaji Sekar