Different Data Sources and layouts

I have the need to change the datasource with a click of a button.  What I would like is the ability to change the layout.  Let's say I have buttons on a toolbar and if I click the first one then the grid will show ID, First Name, Last Name,  Address but the data source will also have City, State, Zip, email, Phone but I don't want to show those items.  Currently I can do that by putting in Columns into the Grid

   <e-column field="ID" headerText="ID" width="75" :isPrimaryKey="true"></e-column>

   <e-column field="First_Name" headerText="First Name" width="75" ></e-column>

   <e-column field="Last_Name" headerText="Last Name" width="75" ></e-column>

However; with a click of a button I need to show all of the sales by that person in the same location of the first grid. How can I change the Grid to Display

Hi William, 

 

Thanks for contacting Syncfusion support. 

 

From your query we found that you want to change the Grid columns and data source by using button click. We suggest to use Grid columns and dataSource property in button click event to achieve this requirement. Please refer the below code snippet, 

 

 

We have prepared the sample with this requirement and you can find that sample from the below link, 

 

Sample: https://codesandbox.io/s/vue-template-jmkvp 

 

Regards, 

Pavithra S. 

valueAccessor: "iCitePubInformation" 

it does not seem like it gets called.

it does not like having the :valueAccessor added at that stop

Hi William, 

 

In EJ2 Vue Grid, You can add the valueAccessor for the column as below way. Please refer the below code example , help documentation link and sample link for more information. 

 

[App.Vue] 

 

Documentation: https://ej2.syncfusion.com/vue/documentation/grid/columns/#valueaccessor 

 

Sample               : https://codesandbox.io/s/vue-template-du8xu 

 

If the above does not meet your requirement then share more details like Grid code, simple sample, screenshot or video of the issue which will be more helpful for us to provide a better solution as soon as possible. 

 

Regards, 

Pavithra S. 

 

Hi William, 

You can add the valueAccessor dynamically as the below way. Please refer to the below code example and sample link. 

Sample: https://codesandbox.io/s/vue-template-mjpt4 

Please get back to us if you need further assistance. 

 

Regards, 

Pavithra S. 

How would I identify

:isPrimaryKey="true"  in the button click

Also I have tried to format the value using

     grid.columns = [ 

in the button click but it does not seem that the value is formatted.

Hi William, 

 

Query #1: How would I identify :isPrimaryKey="true"  in the button click 

 

We suggest to use getPrimaryKeyFieldNames method of the Grid to find the Grid primaryKey column field names in button click event. Please refer the below code snippet, 

 

 

Documentation for getPrimaryKeyFieldNames method, 

 

https://ej2.syncfusion.com/vue/documentation/api/grid/#getprimarykeyfieldnames 

 

Query #2: but it does not seem that the value is formatted 

 

We suggest to set the type for the new columns to resolve this issue. You can set the type to columns like as below code snippet, 

 

 

Also, from your given code snippet we found that you have applied “D4” string in format property. But currently our Syncfusion controls only has “P”, “C”, “N” format option for the numeric values. Please refer the below link for more details, 

 

https://ej2.syncfusion.com/vue/documentation/common/internationalization/#supported-format-string 

 

Regards, 

Pavithra S.