1. Home
  2. Forum
  3. Vue
  4. How identify one primarykey column in grid and get your values dynamically

How identify one primarykey column in grid and get your values dynamically

Hi support,
I have two doubt:
1) How identifiy automatically one column (isprimarykey=true) and return your stored value in one row selected before button EDIT ou DELETE clicked. (see first four rows in method gridtoolbarClick: ).


export default {
name: 'PackageList',
components: { },
data() {
return {
data: {},
selectedRow: 0,
list: "",
displayFields: "",
grid: new Grid(),
pageOptions: { pageSize: 5, pageSizes: true },
listQuery: {
page: 1,
limit: 20,
offset: 19
}
//DataService: new DataService(),
};
},
mounted() {
// Used vue mounted hook to provide dataSource to Grid and handled the initial paging
let state = { skip: 0, take: this.pageOptions.pageSize };
this.createDataGrid();
//this.dataStateChange(state);
},
methods: {
dataStateChange: function (state) {
// Handled the other Grid actions like paging, sorting etc.. by using dataState change event
this.DataService
.execute(state)
.then((gridData) => (this.data = gridData));
},
createDataGrid: function () {
Grid.Inject(
Page,
Sort,
Filter,
Group,
Toolbar,
Search,
PdfExport,
ExcelExport,
CommandColumn
);
this.grid = new Grid({
width: '100%',
pageSettings: { pageSize: 50 },
allowEditing: true,
allowAdding: true,
allowDeleting: true,
allowSorting: true,
allowGrouping: true,
allowTextWrap: true,
allowPaging: true,
allowExcelExport: true,
allowPdfExport: true,
filterSettings:'filterOptions',
selectionOption: {type: 'Single'},
toolbarClick: function (args) {
this.gridtoolbarClick(args);
}.bind(this),
resizeSettings: { mode: "Normal" },
created: function () {
this.grid.showSpinner();
this.getList();
}.bind(this),
toolbar: [
"Add",
"Edit",
"Delete",
"Search",
"PdfExport",
"ExcelExport",
"Print",
],
selectionSettings: { type: "Single", cellSelectionMode: 'Box' },
filterOptions: { type: "Menu", type: "CheckBox" },
commands: [
{
type: "Edit",
buttonOption: { cssClass: "e-flat", iconCss: "e-edit e-icons" },
},
{
type: "Delete",
buttonOption: { cssClass: "e-flat", iconCss: "e-delete e-icons" },
},
{
type: "Save",
buttonOption: { cssClass: "e-flat", iconCss: "e-update e-icons" },
},
{
type: "Cancel",
buttonOption: { cssClass: "e-flat", iconCss: "e-cancel-icon e-icons" },
},
],
dataBound: function (args) {
this.grid.toolbarModule.enableItems( [this.grid.element.id + "_add"], true);
if (this.grid.getSelectedRecords().length < 1) {
this.grid.toolbarModule.enableItems([this.grid.element.id + "_delete"], false);
this.grid.toolbarModule.enableItems( [this.grid.element.id + "_edit"], false);
}
}.bind(this),
rowSelected: function (args) {
if (this.grid.getSelectedRecords().length > 0) {
this.grid.toolbarModule.enableItems([this.grid.element.id + "_delete"], true);
this.grid.toolbarModule.enableItems( [this.grid.element.id + "_edit"], true);
}
}.bind(this),
rowDeselected: function (args) {
if (this.grid.getSelectedRecords().length === 0) {
this.grid.toolbarModule.enableItems([this.grid.element.id + "_delete"], false);
this.grid.toolbarModule.enableItems( [this.grid.element.id + "_edit"], false);
}
}.bind(this),
actionComplete: function (args) {
setTimeout(() => {
var gridObj = document.getElementById("Grid").ej2_instances[0];
if (gridObj.getSelectedRecords().length < 1) {
gridObj.toolbarModule.enableItems([gridObj.element.id + "_delete"], false);
gridObj.toolbarModule.enableItems([gridObj.element.id + "_edit"], false);
}
});
},
});
this.grid.appendTo("#Grid");
},
gridtoolbarClick: function (args) {
var gridObj = document.getElementById("Grid").ej2_instances[0];
console.log(gridObj);

var UUID_Value = this.grid.getPrimaryKeyFieldNames()[0];
//var id = e.data[0][primaryKeyField];
console.log(UUID_Value);

if (args.item.id === "Grid_pdfexport") {
// 'Grid_pdfexport' -> Grid component id + _ + toolbar item name
this.grid.pdfExport();
}
else if (args.item.id === 'Grid_excelexport') { // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
this.grid.excelExport();
}
else if (args.item.id === 'Grid_add') { // 'Grid_add' -> Grid component id + _ + toolbar item name
alert("Clicou botão ADD...");
}
else if (args.item.id === 'Grid_delete' ) { // 'Grid_delete' -> Grid component id + _ + toolbar item name
console.log(args.item.querySelector("uuid").value);
//handleDelete(args.form.querySelector("#Freight"))
}
else if (args.item.id === 'Grid_edit') { // 'Grid_edit' -> Grid component id + _ + toolbar item name
//var uuid = document.getUidByColumnField ("uuid")
//console.log (uuid);
alert("Clicou botão EDIT...:");
}
},

5 Replies 1 reply marked as answer
VS Vignesh Sivagnanam Syncfusion Team April 8, 2021 12:23 PM UTC

Hi André, 

Thanks for contacting Syncfusion support. 

Based on your query we suspect that you need to get the primaryKey column value of an selected row. In your code example we found that you have used getPrimaryKeyFieldNames method in the toolbarClick event. So, before we proceed with your query, we need the following details, 

1. Have you used multiple PrimaryKeyColumn in the Grid? 

2. Share the purpose of taking PrimaryKeyColumn field name in the toolbarClick event? 

3. Share the exact requirement with video demo or screenshot.  

Regards, 
Vignesh S 


AN André April 8, 2021 03:07 PM UTC

Hi Support, 



1. Have you used multiple PrimaryKeyColumn in the Grid?  


I always use only a primary key that is identified as uuid so I want to capture the stored value of the column called "uuid" in a selected row so that I can pass the uuid value to other screens via parameter


2. Share the purpose of taking PrimaryKeyColumn field name in the toolbarClick event? 

After I return the model's schema using the fetchPropertiesAPI method, I configure the first column of the grid as the primary key and hidden because it will always be the UUID column. 
See code above:

getList: function () {
fetchListAPI(this.listQuery).then(response => {
var data = response.data.items
this.grid.dataSource = data;
})
fetchPropertiesAPI(this.listQuery).then(response => {
var columns = response.data.listviews[0].columns
this.grid.columns = columns;
this.grid.columns[0].visible = false;
this.grid.columns[0].isprimarykey = true;
this.grid.refreshColumns();
})
},



3. Share the exact requirement with video demo or screenshot.  


Regards, 
Vignesh S 

VS Vignesh Sivagnanam Syncfusion Team April 9, 2021 01:20 PM UTC

Hi André 

Thanks for the update 

Based on your query we suspect that you want to get the primarykey value of the selected record while clicking the Edit or Delete button in the toolbar. So, we have prepared a sample and in this sample we get the primarykey value of the selected record using the EJ2 Grid toolbarClick event. Please refer the below Code example and sample for your reference, 


toolbarClick: function (args) { 
      var grid = document.getElementsByClassName("e-grid")[0].ej2_instances[0]; 
      var value = grid.getSelectedRecords()[0][ 
        grid.getPrimaryKeyFieldNames()[0] 
      ]; 
      alert(value); 
    }, 

 

In your code example we understand that you want to fetch the data using API while clicking the edit or delete button. While clicking the edit button the grid moves to the edit state and it is not possible to get the data in asynchronous process. 

Please get back to us for further assistance. 

Regards 
Vignesh Sivagnanam  


Marked as answer
AN André April 12, 2021 03:02 PM UTC 

I have to work funny..
Thank you very much Support !

TS Thiyagu Subramani Syncfusion Team April 14, 2021 05:44 AM UTC

Hi André, 

Thanks for your update. 

We are happy to hear that the provided solution works at your end. 

Please get back to us, if you need any further assistance. 

Regards, 
Thiyagu S 


Loader.
Up arrow icon