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
<e-column field="ID" headerText="ID" width="75" :isPrimaryKey="true"></e-column>
<e-column field="Product_Sale" headerText="Product" width="75" ></e-column>
<e-column field="Customer" headerText="Customer" width="75" ></e-column>
<e-column field="Location" headerText="Location" width="75" ></e-column>
If the data that I am pulling back includes all of those fields plus "Country", "Referred_By", "Delivered_Date", "email" etc
I know that I can change the :dataSource="ReportData"
Should I have two or more different grids and toggle the grid I need to show? Is there a way to clean the grid and build it in code?
Thanks
SIGN IN To post a reply.
8 Replies
PS
Pavithra Subramaniyam
Syncfusion Team
June 12, 2019 04:30 PM UTC
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,
|
btnClick: function(event) {
var grid = this.$refs.grid.ej2Instances;
grid.dataSource = customerData; // Changed the Grid datasource
grid.columns = [// changed the Grid columns
{
field: "CustomerID",
headerText: "Customer ID",
width: 120
},
{
field: "CompanyName",
headerText: "Company Name",
width: 120
},
{
field: "ContactName",
headerText: "Contact Name",
width: 120
}
];
} |
We have prepared the sample with this requirement and you can find that sample from the below link,
Regards,
Pavithra S.
WM
William Morgenweck
June 14, 2019 02:19 PM UTC
Thanks-- I'll give that a try
WM
William Morgenweck
June 16, 2019 03:31 AM UTC
How would I add a
valueAccessor: "iCitePubInformation"
it does not seem like it gets called.
it does not like having the :valueAccessor added at that stop
PS
Pavithra Subramaniyam
Syncfusion Team
June 17, 2019 05:10 AM UTC
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]
|
<template>
<div id="app">
<ejs-grid :dataSource="data" height="315">
<e-columns>
. . .
<e-column field="Freight" headerText="Freight" textAlign="Right" :valueAccessor="currencyFormatter" width="80"></e-column>
<e-column field="ShipCity" headerText="Ship City" width="130" :valueAccessor="valueAccess"></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
export default {
. . .
methods: {
currencyFormatter: function(field, data, column) {
return "€" + data["Freight"];
},
valueAccess: function(field, data, column) {
return data[field] + "-" + data["ShipRegion"];
}
}
};
</script> |
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.
WM
William Morgenweck
June 18, 2019 06:54 AM UTC
Thank you but I need to add the :valueAccessor with the button click.
btnClick: function(event) {
var grid = this.$refs.grid.ej2Instances;
grid.dataSource = customerData; // Changed the Grid datasource
grid.columns = [// changed the Grid columns
{
field: "CustomerID",
headerText: "Customer ID",
width: 120 ,
:isPrimaryKey="true"
},
{
field: "CompanyName",
headerText: "Company Name",
width: 120 ,
valueAccessor ????????
},
{
field: "ContactName",
headerText: "Contact Name",
width: 120
}
];
}
Also add
:isPrimaryKey="true"
PS
Pavithra Subramaniyam
Syncfusion Team
June 18, 2019 07:34 AM UTC
Hi William,
You can add the valueAccessor dynamically as the below way. Please refer to the below code example and sample link.
|
btnClick: function(event) {
var grid = this.$refs.grid.ej2Instances;
grid.columns = [
{
field: "CompanyName",
headerText: "Company Name",
width: 160,
valueAccessor:function(field, data, column) {
return "Accessed " + data["CompanyName"];
}
},
. . .
];
}
}
}; |
Please get back to us if you need further assistance.
Regards,
Pavithra S.
WM
William Morgenweck
June 18, 2019 03:48 PM UTC
How would I identify
Also I have tried to format the value using
grid.columns = [
{
field: "relative_citation_ratio",
headerText:"relative_citation_ratio",
width: 160,
format: "D4"
}
in the button click but it does not seem that the value is formatted.
PS
Pavithra Subramaniyam
Syncfusion Team
June 20, 2019 07:29 AM UTC
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,
|
var grid = this.$refs.grid.ej2Instances;
console.log(grid.getPrimaryKeyFieldNames()); |
Documentation for getPrimaryKeyFieldNames method,
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,
|
{
field: "Quantity",
headerText: "Quantity",
format: 'N2',
type: 'number',
width: 120
} |
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,
Regards,
Pavithra S.
SIGN IN To post a reply.
