save data in Vuex Store at realtime

[Nurhan Aydogdu]

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?

[Seeni Sakthi Kumar Seeni Raj]

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. 

[Nurhan Aydogdu]

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>

[Seeni Sakthi Kumar Seeni Raj]

Hi Nurhan, 

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

https://ej2.syncfusion.com/react/documentation/api/grid/column/#datasource 

  

 

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

Demo: https://ej2.syncfusion.com/vue/demos/#/material/grid/foreign-key.html 

Regards, 

Seeni Sakthi Kumar S. 

[Nurhan Aydogdu]

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.

 

 

[Seeni Sakthi Kumar Seeni Raj]

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> 

 

 

 

Demo: https://codesandbox.io/s/vue-template-mekin 

Regards, 

Seeni Sakthi Kumar S 

[Nurhan Aydogdu]

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. 

[Balaji Sekar]

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> 

Sample link: https://codesandbox.io/s/vue-template-2zu79 

Regards, 

Balaji Sekar. 

[Nurhan Aydogdu]

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? 

[Seeni Sakthi Kumar Seeni Raj]

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 

[Nurhan Aydogdu]

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

[Seeni Sakthi Kumar Seeni Raj]

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 

[Hani Yasin]

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? 

[Seeni Sakthi Kumar Seeni Raj]

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