I want a column in ng-table-dynamic that has a field which is an object property.
{
field: 'customer.name',
title: "Customer Name",
show: true
}
I tried lot of different way like
'customer.name'
'customer["name"]'
'customer[name]'
But none of this works.
Please help me out.
Thanks
Related
I recently changed my tables to Mui-datagrid on Material UI 5, and I have a special use case with an array of objects. I want to enable the phone number filter in this column, but the number is provided as an object list.
phone: [
{ type: "home", number: "795-946-1806" },
{ type: "mobile", number: "850-781-8104" }
]
I was expecting a 'customFilterAndSearch' or an option to customise how to search in this specific field.
customFilterAndSearch: (term, rowData) =>
!!rowData?.suppressedOptions.find(({ description }) =>
description?.toLowerCase().includes(term.toLowerCase())
),
I have made some tries with the filterOperators, but no success yet. I have made a full example here https://codesandbox.io/s/mui-data-grid-vs05fr?file=/demo.js
As far as I can see from the DataGrid documentation I don't see any way to change the filter function for a specific function.
Likely the best workaround for your use case will be converting this to a string be converting the data to a string before you pass it to the datagrid. Though you will lose the styling that you currently do by making the phone type bold.
On second though your best best would probably be to split the phone column into two columns which would probably be the cleanest way of solving your problem
Add helper function.
You could potentially add a helper function to just map all the phone lists to something like mobilePhone or homePhone
const mapPhoneObject = (rows) => {
rows.forEach((row) => {
row.phone.forEach((phone) => {
row[`${phone.type}Phone`] = phone.number;
});
});
return rows
};
I've added a fork of your snippet with my function, it is I think the most viable solution for your problem: https://codesandbox.io/s/mui-data-grid-forked-ppii8y
I need to introduce object with my own properties in columnDefs object.
After, I did it, I see in dev console
So, here has been written, that I could mean __metadata__ property. Does this property suit to mine purpose?
I've not found any information in types and docs about this property
ColDef has no custom state property that you could use. Certainly do not touch __metadata__. The name sounds like some internal implementation detail.
You can store your metadata in a separate object, for example using colId as a key:
columnDefs: ColDef[] = [
{
colId: 'id',
field: 'id'
},
{
colId: 'name',
field: 'name'
}
];
columnMetadata: {
id: 'something custom',
name: 'custom data'
}
private getColumnMetadata(column: Column) {
return this.columnMetadata[column.getColId()];
}
When using Ag-Grid's server side row model, I am unable to send a custom group key to the server in order to do proper group by queries.
My row data is a simple JSON structure but with one composite object.
row = {
athlete: '',
age: '',
country: {
name: 'Ireland',
code: 'IRE'
},
...
}
I am using the server side row model. To get the grid to display the country name is simple enough as I use the following column definition.
{
headerName: "Country",
colId: "country",
valueGetter: "data.country.name",
enableRowGroup: true
}
However, when I group by the Country column ag-grid sends the groupKey as 'Ireland' from my example above. But I need the group key to be the country code, 'IRE'. I cannot figure out how to generate a groupKey when using the server-side row model.
I have seen the keyCreator method, but this only works for client-side row model. In addition, I have seen the Tree Data Mode which has a callback for getServerSideGroupKey(dataItem) but then callback only gets used when gridOptions.treeData = true and when the treeData option is set to true, a "Group" column is always displayed regardless if a grouping is happening or not. I tested this out by setting isServerSideGroup: function(dataItem) {return false;}
Any help would be appreciated.
I was able to solve this issue by using the dot notation for the column definition's field attribute and a custom cellRenderer.
{
headerName: "Country",
colId: "country",
field: "country.code",
enableRowGroup: true,
cellRenderer: function (params) {
return params.data.country.name;
}
}
This allowed me to display the correct data point from the custom object and when doing server side actions, ag-grid will send the datapoint contained within the field attribute.
I'm referring to Hero guide passing the object to empty all the fields in the model like this.
this.form.reset({
"firstName": "",
"lastName": "bzz",
"reporter": ""
});
The problem is that it only sets the fields that are non-empty, i.e. bzz in the sample above. I've tried with setValue(...) but that gave the same effect. Goolearching the issue gave rather nothing other than references to the Hero examples.
I also tried to use the following. Same effect as well.
this.form.get("firstName").patchValue("");
What am I missing?
Don't pass an object, and It will set all the form controls to null:
this.form.reset();
this.form.reset({
firstName: {value: '1', disabled: true}
})
I've made a combo box and its working fine except when I select one of the items in the combobox, it removes all other values in it. Here is a piece of code:
var comboitemarray = new Array();
for(var comboitems=0;comboitems<listitems.length;comboitems++){
comboitemarray[comboitems] = listitems[comboitems].item;
}
dynamicformfield = new Ext.form.ComboBox({
id: fieldname,
fieldLabel: fieldlabel,
name: fieldname,
editable: false,
autoSelect : true,
store: comboitemarray,
queryMode: 'local',
});
Any idea? Or am I missing anything here?
You gave an Array as store :
store: comboitemarray
Where it expects an Ext.data.Store. Implement an Ext.data.ArrayStore() from that comboitemarray array . Check the documentation of ArrayStore and always test in firebug for the errors.
I behaves that way because it's not a select-box, it's a combo-box.
If you had the following items:
a
aa
aaa
and you selected "aa", there would then be two options in the box: 'aa', and 'aaa'.
If you think carefully about how you'd like it to work, you'll realize that to get what you want will break ability to have any sort of meaningful type-ahead functionality.