Dynamically Create Data Grid
1) Create columns & rows
2) pagination, searchbox for datagrid
Please share with example..
|
export default {
components: {},
data() {
return {
selectedRow: 0,
grid: "",
displayFields: [
{ field: "OrderID", headerText: "Order ID" },
{ field: "CustomerID", headerText: "Customer ID" }
]
};
},
---------------------------------------------------------
createDataGrid: function() {
Grid.Inject(Page, Sort);
this.grid = new Grid({
allowSorting: true,
allowPaging: true,
pageSettings: { pageSize: 15 },
selectionSettings: { persistSelection: true }
});
this.grid.appendTo("#Grid");
this.grid.dataSource = [
{ OrderID: "10248", CustomerID: "SDFDS", EmployeeID: 1 },
{ OrderID: "10249", CustomerID: "BAFGE", EmployeeID: 2 }
];
this.grid.columns = this.displayFields;
this.grid.refreshColumns();
} |
Yes, it works great.
I have another query on how to add rowselected event in that, then select row gets value.
Also how to add function in dynamic Data Grid?
|
methods: {
select: function(rec) {
this.selectedRow = rec[this.pkey];
this.$emit("select", rec);
},
createDataGrid: function() {
Grid.Inject(Page, Sort, Search, Toolbar);
this.grid = new Grid({
allowSorting: true,
allowPaging: true,
pageSettings: { pageSize: 15 },
toolbar: ["Search"],
actionBegin: this.actionBegin, // bind the vue methods here
actionComplete: this.actionComplete,
rowSelected: this.rowSelected,
selectionSettings: { persistSelection: true }
});
this.grid.appendTo("#Grid");
this.grid.dataSource = [
{ OrderID: "10248", CustomerID: "SDFDS", EmployeeID: 1 },
{ OrderID: "10249", CustomerID: "BAFGE", EmployeeID: 2 }
];
this.grid.columns = this.displayFields;
this.grid.refreshColumns();
},
actionBegin: function(args) {
console.log(args);
},
actionComplete: function(args) {
console.log(args);
},
rowSelected: function(args) {
console.log(args);
}
}
|
Like I want to open a pop up for display list in that I am using Datagrid to show display list. In my project there are so many pop up for display lists and for all data source are different.
So for that reason, I am creating dynamic Datagrid.
|
<ejs-dialog
id="dialog"
ref="templateDialog"
:target="target"
:height="height"
:width="width"
:visible="false"
:showCloseIcon="true"
:content="contentTemplate"
:beforeOpen="beforeOpen"
:open="dlgOpen"
:close="dlgClose"
></ejs-dialog>
beforeOpen: function(args){
console.log(args);
// get the grid element instances from using its id
var gridObj = args.element.querySelector('#Grid').ej2_instances[0];
// bind the datasource to the grid
gridObj.dataSource = [
{ OrderID: 10248, CustomerID: "SDFDS", EmployeeID: 1 },
{ OrderID: 10249, CustomerID: "BAFGE", EmployeeID: 2 }
];
}
|
These are very useful posts to create a dynamic grid from different data sources.
How would we add a Command Column in the example with the grid.columns assigned to diplayFields above?
I have tried adding an entry in the displayFields array with key ":commands" and value "commands" and then provide the commands function in my component but the grid does not render the buttons.
My displayFields array looks like this:
[
{ field: "authorized", headerText: "Authorized", displayAsCheckBox:true },
{ field: "description", headerText: "Description" },
{ field: "model_name", headerText: "Model Name" },
{ headerText: "Actions", ":commands":"commands" }
]
Update: OK I figured it out. We need to supply and array for the commands in the column. It can be done this way:
[
{ field: "authorized", headerText: "Authorized", displayAsCheckBox:true },
{ field: "description", headerText: "Description" },
{ field: "model_name", headerText: "Model Name" },
{ headerText: "Actions", "commands":[{ buttonOption: { content: "MoreDetails", cssClass: "e-flat" } }] }
]
|
{ headerText: 'Commands', width: 120, commands: [{ buttonOption: { content: 'Details', cssClass: 'e-flat' } }]},
|
Hello Rajapandiyan,
Here is another question for dynamically building grid columns. We are able to specify the column type using the editType parameter but how do we specify the choices if using a dropdownedit as type. We tried specifying the dataSource using a json object but it does now work. Here is our example for one of the column we are trying to implement:
{ field: "unit_id", headerText: "Unit" , editType:"dropdownedit", dataSource: "{json: {\"52\":\"$\\/ln-km\",\"53\":\"$\\/ln-mi\",\"54\":\"$\\/cl-km\",\"55\":\"$\\/cl-mi\",\"56\":\"$\\/sq-m\",\"57\":\"$\\/sq-ft\"}}" }
We are only seeing "request failed" in the grid when using the above.
Thank you,
Claude
Provide custom dataSource to Dropdown: https://ej2.syncfusion.com/javascript/documentation/grid/editing/edit-types/#provide-custom-data-source-and-enabling-filtering-to-dropdownlist
|
[App.vue]
var columns = [
----
{
field: "ShipCountry",
headerText: "Ship Country",
editType: "dropdownedit",
width: 150,
edit: { params: { query: new Query(), dataSource: gridData } },
},
]
|
Hello Rajapandiyan ,
Thanks for your reply. Very helpful. Is there a way to populate the grid with the country_id and provide a dropdownedit configuration that will show the dropdown labels instead of the id's in the table. This is what we were initially trying to do. We tried playing with the fields property inside the params object but have not been able to quite make it work. When the grid display, you can see the id's but when the drop down shows up, the country name shows up. We would like to have the name shown initially but the id's used for transactions. Is this possible?
Here is our sandbox: https://codesandbox.io/s/281713-requirements-forked-v6tyqh?file=/src/App.vue
regards,
Claude
Hello Rajandiyan,
This time, I would like to use a custom column template in my dynamic grid. I tried specifying the custom template from the field object definition like this:
{ headerText: "CustomButton", "template":"cTemplate" }
Where cTemplate is defined as data in the grid definition:
cTemplate: function () {
return { template : Vue.component('columnTemplate',{
template: "<div>test</div>",
data: function() {
return {
data: {}
}
},
method: {
}
})}
}
But it does not render the grid when I use the above.
If I use the same cTemplate but with a static grid e-column, then it works:
<e-column headerText='Logs' width='150' textAlign='Center' :template='cTemplate'></e-column>
Can you help? Utlimately, I would like to pass a view component as the custom column.
Hi Claude,
Thanks for your update.
Query: I would like to use a custom column template in my dynamic grid
By analyzing your code example, we found that you are defining the ColumnTemplate value ({ headerText: "CustomButton", template:"cTemplate" }) as string. This is the cause of reported problem.
While defining the columns in a typescript way, you have to bind the template value directly like the below code.
|
[App.vue] components: {}, data() { return { grid: "", cTemplate: function () { return { template: Vue.component("columnTemplate", { template: `<div class="template_ele"> Hi {{cellValue}} !!! </div>`, data: function () { return { data: {}, }; }, computed: { cellValue: function () { return this.data.CustomerID; }, }, }), }; }, }; }, methods: { createDataGrid: function () { var columns = [ { field: "CustomerID", headerText: "Customer ID", template: this.cTemplate, // define the template width: 120, }, ]; }, }, }; </script>
|
Sample: https://codesandbox.io/s/281713-requirements-forked-ip9ft8?file=/src/App.vue
Please get back to us if you need further assistance.
Regards,
Rajapandiyan S
If this post is helpful, please consider Accepting it as the solution so that
other members can locate it more quickly.
- 13 Replies
- 3 Participants
- Marked answer
-
SH Shivani
- Jun 26, 2020 08:18 AM UTC
- Aug 26, 2022 07:07 AM UTC
