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
  1. Home
  2. Forum
  3. Vue
  4. Different Data Sources and layouts

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


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> 
 
 
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. 
 


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


:isPrimaryKey="true"  in the button click

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. 


Loader.
Live Chat Icon For mobile
Up arrow icon