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

save data in Vuex Store at realtime

Hello,
İ have a Project with vuetify Frontend which contains a syncfusion component (datagrid).
My Datagrid has a delete add and update toolbar. İf i add a new row i want to save this data in Vuex Store. How can i store the dynamic data into vuex state?

13 Replies

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team July 11, 2019 01:43 PM UTC

Hi Nurhan, 

Thanks for contacting Syncfusion support. 

From your query, we found that you get the edited data from the Grid and store it in Vuex store. We suggest to use Grid actionBegin (If you have used “Normal” editing in Grid) or beforeBatchSave (If you have used “Batch” editing in Grid) events to achieve this requirement. You can get the edited data’s in these events like as below code snippet, 

actionBegin: 
 
actionBegin: function(args) { 
  if (args.requestType === "save") { 
    console.log(args.data); // edited data 
    // PLease store this data in Vuex store 
  } 
} 
 
BeforeBatchSave: 
 
beforeBatchSave: function(args) { 
  console.log("Edited records :" + args.batchChanges.changedRecords); // edited records 
  console.log("Deleted records :" + args.batchChanges.deletedRecords); // deleted records 
  console.log("Added records :" + args.batchChanges.addedRecords); // added records 
 
  // you can collected edited record details like as above code 
} 
 
If we misunderstood you query, please share more details about your requirement. This will help us to provide a better suggestion for your requirement as early as possible. 

Regards, 
Seeni Sakthi Kumar S. 



NA Nurhan Aydogdu July 20, 2019 10:02 AM UTC

Hi,

thank you for reply.

i can fetch data in Vuex Store from two different tables (Products and Categories). the first datasource = "todos().data" shows all Products from the products table.
know i have İn products table a column calls "categories_id" as foreignkey and can see the data in Store. Know i want to know how can i define a second datasource for the foreign column to show the data at the same time with my products

<ejs-grid
ref="grid"
:dataSource="todos().data"
:allowPaging="true"
:toolbar="toolbar"
:editSettings="editSettings"
:actionBegin="actionBegin"
>
<e-columns>

<e-column field='id' headerText='İD' textAlign='Right' width=100 ></e-column>
<!--categories_id column will be foreignkey and show data from a second table-->
<e-column field='categories_id' headerText='CategoriesİD' textAlign='Right' width=100></e-column>
<e-column field='product_name' headerText='Product name' textAlign='Right' width=100></e-column>
<e-column field='product_description' headerText='Product description' width=120></e-column>
</e-columns>
</ejs-grid>




SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team July 22, 2019 11:24 AM UTC

Hi Nurhan, 

Using the dataSource property of the Grid columns, data for the foreignkey column can be bound. Refer to the following API Reference.  

  
 
<template> 
    <div class="col-lg-12 control-section"> 
        <div> 
            <ejs-grid :dataSource="data" :allowPaging='true'  
                      :editSettings='editOptions' :toolbar='toolbarItems' > 
                <e-columns> 
                    <e-column field='OrderID' headerText='Order ID' width='120' :isPrimaryKey='true'></e-column> 
                    <e-column field='CustomerID' headerText='Customer Name' width='150' :validationRules='orderidrules' 
                              foreignKeyValue='ContactName' foreignKeyField='CustomerID' :dataSource='customerData'></e-column> 
                </e-columns> 
            </ejs-grid> 
        </div> 
 
 
    </div> 
</template> 
<script lang="ts"> 
import Vue from "vue"; 
import { GridPlugin, ForeignKey, Toolbar, Page } from "@syncfusion/ej2-vue-grids"; 
import { orderDetails, customerData } from "./data-source"; 
 
Vue.use(GridPlugin); 
 
export default Vue.extend({ 
  data: () => { 
    return { 
      data: orderDetails.slice(0), 
      toolbarItems :  ['Add', 'Edit', 'Delete', 'Update', 'Cancel'], 
      customerData : customerData, 
    }; 
  }, 
        provide: { 
            grid: [ForeignKey, Page, Toolbar] 
  } 
}); 
</script> 

Please refer the below online demo for further assistance, 


Regards, 
Seeni Sakthi Kumar S. 



NA Nurhan Aydogdu August 27, 2019 09:09 AM UTC

Hi, I can fetch data from the database into datagrid with the help of vuex. Actually it brings the same columns from the database into the datagrid. How can i show only the columns as i wanted. I want a dynamic solution, not static. 


Attachment: productssample_5f621785.zip


Also i want to know how can i change the size of my generated datagrid. 

Another problem i have is that actually the columnnames from my datagrid comes from the database column. İ don't want this. İ want to set the Columnnames as i want. 
How can i solve this.
 

 


SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team August 27, 2019 11:28 AM UTC

Hi Nurhan,  
 
We can update the Grid columns and datasource dynamically as shown in the following code example.  
 
<template> 
  <div id="app"> 
    <input @change="change" type="checkbox"> 
    <ejs-grid id="Grid" ref="grid" :height="400" :dataSource="data" :columns="columns"></ejs-grid> 
  </div> 
</template> 
 
<script> 
import Vue from "vue"; 
import { GridPlugin } from "@syncfusion/ej2-vue-grids"; 
import { data, employee } from "./datasource"; 
 
Vue.use(GridPlugin); 
 
export default { 
  data() { 
    return { 
      data: data, 
      columns: [ 
        { 
          field: "OrderID", 
          headerText: "Order ID", 
          width: 120, 
          textAlign: "Right" 
        }, 
        { field: "CustomerID", headerText: "Customer Name", width: 150 } 
      ], 
      cTemplate: function() { 
        return { 
          template: Vue.component("columnTemplate", { 
            template: `<span>{{modify(data.index)}}</span>`, 
            data: function(e) { 
              return { 
                data: {} 
              }; 
            }, 
            methods: { 
              modify: function(e) { 
                return parseInt(e, 0) + 1; 
              } 
            } 
          }) 
        }; 
      } 
    }; 
  }, 
  provide: {}, 
  methods: { 
    change: function(e) { 
      if (e.target.checked) { 
        this.data = employee; 
        this.columns = [ 
          { 
            field: "EmployeeID", 
            headerText: "Employee ID", 
            textAlign: "Right", 
            width: 125 
          }, 
          { field: "FirstName", headerText: "Name", width: 120 } 
        ]; 
      } else { 
        this.data = data; 
        this.columns = [ 
          { 
            field: "OrderID", 
            headerText: "Order ID", 
            width: 120, 
            textAlign: "Right" 
          }, 
          { field: "CustomerID", headerText: "Customer Name", width: 150 } 
        ]; 
      } 
    } 
  } 
}; 
</script> 


 
 
 

Regards, 
Seeni Sakthi Kumar S 



NA Nurhan Aydogdu September 2, 2019 02:56 PM UTC

Hi Seeni Sakthi Kumar Seeni Raj, 

thank you for reply. İt works for me. Can you please show me how can i add a vuecomponent like a dropdown into the dynamically generated datagrid with the İtems which contains dynamic data from database. 

i found your documentation (
https://ej2.syncfusion.com/vue/documentation/grid/how-to/render-other-components-in-column/ but here he define the template into the column tag like: 

  <e-column headerText='Order Status' :template="dropdownTemplate" width=200></e-column>

My template looks like your suggestion actually.

<div id="Grid">
<ejs-grid
ref="grid"
:dataSource="branches"
:allowPaging="true"
:toolbar="toolbar"
:editSettings="editSettings"
:dataBound="dataBound"
:actionBegin="actionBegin"
:columns="columns"
></ejs-grid>
</div>

How can i add a component as i want.

Also i want to know how can i change the size of my generated datagrid. 




BS Balaji Sekar Syncfusion Team September 4, 2019 05:56 PM UTC

Hi Nurhan, 

As per your concern, we have achieved the EJ2 DropdownList component rendered in the Grid column using columnTemplate. In below code example, we have bind the EJ2 DropDownList component on template column using queryCellInfo event of EJ2 Grid. 
[App.Vue] 
<template> 
  <div id="app"> 
    <input @change="change" type="checkbox"> 
    <ejs-grid 
      id="Grid" 
      ref="grid" 
      :height="400" 
      :queryCellInfo="onQueryCellInfo" 
      :dataSource="data" 
      :columns="columns" 
    ></ejs-grid> 
  </div> 
</template> 
 
<script> 
import Vue from "vue"; 
import { GridPlugin } from "@syncfusion/ej2-vue-grids"; 
import { 
  DropDownListPlugin, 
  DropDownList 
} from "@syncfusion/ej2-vue-dropdowns"; 
import { data, employee } from "./datasource"; 
 
Vue.use(GridPlugin); 
Vue.use(DropDownListPlugin, DropDownList); 
 
export default { 
  data() { 
    return { 
      data: data, 
      columns: [ 
        { 
          headerText: "Order Details", 
          template: 
            '<div><select class="e-control e-dropdownlist"><option value="1" selected="selected">Order Placed</option><option value="2">Processing</option><option value="3">Delivered</option></select></div>' 
        },         
      ], 
    }; 
  }, 
  provide: {}, 
  methods: { 
    onQueryCellInfo: function(args) { 
      var ele = args.cell.querySelector("select"); 
      if (ele) { 
        var dropdown = new DropDownList({ popupHeight: 150, popupWidth: 150 }); 
        dropdown.appendTo(ele); 
      } 
    }, 
      } 
    } 
  } 
}; 
</script> 




Regards, 
Balaji Sekar. 



NA Nurhan Aydogdu September 7, 2019 07:41 AM UTC

Hi Balaji Sakar,


thank you for your support. İ am succeed to add your dropdownlist component into my datagrid. Actually i have problem fetch the items dynamically from my database. İ don't want define the items in template statically instead of it i want to bring a column from my database and use the rows as items. 

Also i have problem with fetch data from tables which have associations to another tables. For example: 
Postman response output looks like this: 

{
    "total": 3,
    "limit": 10,
    "skip": 0,
    "data": [
        {
            "currency_code": "EUR",
            "symbol": "€",
            "status": "A",
            "coefficient": 1.28,
            "Currencydescriptions.description": "euro"
        },

How can i fetch the data "description". How can i handle this two problems? 




SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team September 10, 2019 12:51 PM UTC

Hi Nurhan, 

Query #1: Need to bind the columntTemplate in the EJ2 Grid while using AutoGenerate columns 

By default, any customizable property like column template, edit template or any other property can be added to the Grid only if the Grid columns were defined at the initial render. So, Auto-generated columns cannot included the column template property with the dynamic update.  

Query #2: Complex Column is not working properly while using AutoGenerate columns 

We have validated the possibility of including the complex property as a column and we have considered “Complex data is not rendering properly while using autogenerate columns” as a usability feature and logged a report for the same. We will include the defect fix in our upcoming October 02, 2019 patch release. 
 
You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link. It is pending for review and once it has been reviewed, this can be viewed.
 
https://www.syncfusion.com/feedback/8761/complex-data-is-not-rendering-properly-while-using-autogenerate-columns 

Regards, 
Seeni Sakthi Kumar S 



NA Nurhan Aydogdu September 17, 2019 11:37 AM UTC

Hi Seeni, 

thank you for your support. 

İ have a table in my project. This datagrid contains data from three more tables. İ have a Syncfusion Actionbegin method and i want to execute delete, add and save actions. To execute an add action my datagrid contains a dialog template. When I trigger a new entry I get an error message in console; 



name: "BadRequest", message: "notNull Violation: products.id cannot be null 



This error may be due to the fact that in our ORM model and in our database table the id fields are not allowed to be null. Also my dialog template from datagrid does not contain an idfield to fill when creating or editing a entry. 


İn my product table i have named primarykeyfield as id for test purposes (see attachments). The remaining tables were named as table name + _id can this lead to this error message? How can i solve this?


Attachment: products_a27e9969.zip


SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team September 18, 2019 01:19 PM UTC

Hi Nurhan, 

Query #1: How to resolve the “BadRequest” error when we do add/edit in the EJ2 Grid. 

We have validated your query and we suspect that primaryKey column value is null while add/edit the Grid row using dialogTemplate editing which is the cause of the problem. Based on the primarykey column only, records will be saved in the Grid. So we suggest to bind the PrimaryKeyColumn field input element on the DialogTemplate editing. If you were not wishing to add field in the form, please add field and hide them and ensure to add some value to them. 

Query #2: We got error message while bind the Grid columns in “tablename+_id” 

We have analyzed your code and we suspect that you have tried bind the Grid field( field name traverse from table like tablename+_id) with table name. we suggest to use following way to merge the multiple tables into single table then you will defined the Grid column without table name and you can resolve the reported error.  
 

// Join the three tables into single 
var query = from a in _context.Orders join b in customer on a.CustomerID equals b.CustomerID select new { a.CustomerID, a.EmployeeID,a.OrderDate,a.OrderID,a.ShipCity,b.CustomerName}; 
            IEnumerable MergeTable = from x in query join y in employee on x.CustomerName equals y.CustomerName select new { x.OrderID, x.CustomerName, x.CustomerID, x.EmployeeID, x.OrderDate, x.ShipCity, y.Address }; 


Regards, 
Seeni Sakthi Kumar S 



HY Hani Yasin November 22, 2019 06:21 AM UTC

Hi Seeni, 

any updates about this question:


Query #1: Need to bind the columntTemplate in the EJ2 Grid while using AutoGenerate columns 

By default, any customizable property like column template, edit template or any other property can be added to the Grid only if the Grid columns were defined at the initial render. So, Auto-generated columns cannot included the column template property with the dynamic update.  


İ need a solution for dynamic updates? 


SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team November 25, 2019 06:47 AM UTC

Hi Hani,  

As discussed earlier in this thread, we cannot provide support to update the column template in the auto-generated column. Since Grid is unaware about the Grid columns, we cannot assign to them more specifically. 

Regards,  
Seeni Sakthi Kumar S 


Loader.
Live Chat Icon For mobile
Up arrow icon