Is it possible to put a custom column definition for select fields in a ui grid and pick up the rest of the fields from the data schema? This use case arises because my json data schema is variable and there's just one column I'm sure about(its presence in data) and would like to apply a custom cell template to just that column.
Grid options:
$scope.gridOptions = {
data: data,
columnDefs: [
{ field: 'name', width: 250, cellTemplate: "../../tpl/grid/name_template.html" }
]
}
where data is the json object of variable schema.
If I define the grid this way, only the name field from my data object will be displayed in the grid. Is it possible to use the custom column def for the name field and also display the other objects in the data object without specifying column definitions for them?
To provide more clarity:
my data object can be:
[{name: 'apple', type: 'fruit', seasonal: true}]
or:
[{name: 'apple', color: 'green', taste: 'sour'}]
Basically my use case is such that there's no way for me to know before hand what columns will be returned from the query that initialises the grid data object but I'm sure of the fact that a name column will be part of the data returned by the query. I would want to supply a custom cell template and other properties to the name field and also display the other columns that might be there.
The normal behaviour is that if I specify a column definition for one column in the field, then I have to specify definitions for all the other columns that are part of the data to make them visible and in my case I don't know what the other field names might be.
$scope.gridOptions = {
data: data,
columnDefs: [
{ field: 'name', width: 250, cellTemplate: $.get('url-to-your-template.html') }
]
}
Check if the above works. You can use your own service for fetching template
Related
In frontend, I have a DataTable built by fields. I need to change one column's filter type from select to input field. Is that possible to do with CUBA's DataTable? I do not have access to ColumnsDefinitions prop
CUBA fronted generator create table components based on DataTable and fields property (which is deprecated). Usage of DataTable could be easily transformed to work with more modern columDefinitions, which provide better control on each column.
As first step we can simply pass the same string array fields as columnDefinitions property.
<DataTable
dataCollection={this.dataCollection}
columnDefinitions={this.fields}
onRowSelectionChange={this.handleRowSelectionChange}
hideSelectionColumn={true}
buttons={buttons}
/>
Then we can change only needed field in array from string to column definition.
ownerColumnDefinition: ColumnDefinition<Pet> = {
field: "owner",
columnProps: {}
}
fields: (string | ColumnDefinition<Pet>)[] = [
"identificationNumber",
"birthDate",
"name",
"type",
this.ownerColumnDefinition
];
And then implement antd filterDropdown as described in Ant Design Customized Filter
ownerColumnDefinition: ColumnDefinition<Pet> = {
field: "owner",
columnProps: {
filterDropdown: () => {/* custom filter implementation here */}
}
}
Complete example based on CUBA Petclinic app available at https://github.com/vadimbasko/cuba-petclinic-custom-table-filter, you can see customized filter with input field implemented in PetList component for owner column https://github.com/vadimbasko/cuba-petclinic-custom-table-filter/blob/0f8e7e62779d0afb0fbd733dfffabf26df754f68/modules/front/src/app/pet/PetList.tsx#L29-L70.
I am using API's to receive multiple row data from a particular user, my doubt is how one can display that data in react using AG-Grid format.
this.setState
({
data: res.data,
columnDefs: [
{
headerName: " CreateDate", field: " CreateDate"
}, {
headerName: "Task Name", field: "TaskName"
}],
rowData:[{
//facing errors while assigning these values
TaskName : data.TaskName,
CreateDate : data[0].CreateDate
}]
})
Hi Aboli I am sharing stackblitz which will help you to do what you are trying to achieve.
I have assumed a lot about your data object since we dont know much about it. usually data should come in key value pair where keys matches to the field name which you have defined in your coldef object so that ag-grid can consume it directly.
But sometimes we need to sanitize data so that it matches with the way column field have been defined. feel free to ask more question and try to be a bit elaborative with code so that you can get solution faster.
here is the stackblitz example.
I'm using MongoDB to store my records and am using Ag-grid react to display them. The grid has several columns including the record's ObjectID (_id), name, type, etc. Using the filter agColumnTextFilter works for the name and type fields with the columnDef of:
{
headerName: 'Column Name',
field: 'name',
filter: 'agTextColumnFilter',
},
which then leads to this query setup (using the contains filter option):
case "contains":
qp[fieldName] = new RegExp(['.*', user input string, '.*'].join(''), 'ig');
this logs the correct query:
"query db { name: /.*query string.*/gi }"
and the proper rows are displayed. Since the displayed _id is a string as well I tried something similar:
{
headerName: 'ID',
field: '_id',
valueGetter: (params) => {
let id = params.data._id;
return id.slice(id.length-5); //only display last part of ID instead of entire thing
},
filter: 'agTextColumnFilter',
},
Using the same contains logic as above the following query is logged to the console:
query db { _id: /.*_id segment.*/gi }
However, no rows are returned in this case (even though there should be rows returned). Do I need to use different logic or is there a problem with this current logic? Any advice is appreciated.
Edit: Turns out even though the ID displays as a String a cast of the string to an ObjectID is needed:
qp[fieldName] = new ObjectID(_id string)
Problem with this is searching for part of a specific ID won't work because it's not a valid ID. Searching for a full ID works but isn't ideal either. If anyone has any ideas on how I can filter just part of the ID I'd appreciate it.
You can probably set a valueFormatter on the column that displays the partial ObjectId. The filtering will be done using the full ObjectId.
Can someone help me to figure out a way to arrange the columns irrelevant of it columns array positioning? For example, in below grid columns array i just want to display Phone as 1st column and Name as 2nd column. How can i achieve that programmatically?
Columns Array:-
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email'
}, {
text: 'Phone',
dataIndex: 'phone'
}]
While debugging the grid column config with Chrome developer tools, i figured out a parameter "fullColumnIndex" which value getting increased for every column. But specifying that explicitly doesn't make any difference :(
Thanks!
You can do it by using reconfigure method. Docs — http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.panel.Table-method-reconfigure
Here is the description of this method:
reconfigure( [store], [columns] )
Reconfigures the grid / tree with a new store/columns. Either the store or the > columns can be omitted if you don't wish to change them.
The enableLocking config should be set to true before the reconfigure method is > executed if locked columns are intended to be used.
Parameters
store : Ext.data.Store (optional)
The new store. You can pass null if no new store.
columns : Object[] (optional)
An array of column configs
I am using Extjs 4.2, so i have a grid with rowediting plugin. All works fine, I want to know how I can update one field value, depending on another field. I mean for example if in my grid I have field1, and field2, I need to update field3 value with field1 + field2 values when one of those were changed. Normally using jquery we can code a change event for each of the fields, but how i can do this on rowediting event?
Is this possible?
You can use edit events of rowedit as follow:
Sencha Fiddle : Grid RowEditor - Change cell value based on condition
grid.on('edit', function(editor, e){
/**
* here I am checking the column name to complete process
* you change what you want
*/
if (e.field == "name") {
e.record.set('result', parseInt(e.record.get('dummy')) + parseInt(e.record.get('age')));
}
})
You have to add editors to the columns, the editor is like any component, has listeners, type etc. then add a change listener
Example:
...
{
header: 'HeaderName',
dataIndex: 'man_peso',
type: 'number',
width: 50,
editor: {
enableKeyEvents: true,
listeners: {
change: function(c, e, eOpts) {
//here you can modify others components
}
},
xtype: 'textfield',
maskRe: /[0-9\.]/,
maxLength: 16
},
...
When you use RowEditor, the e.field value entirely depends on the field that was clicked on to edit the row.
To illustrate the problem:
In the previous answer, open the fiddle link (https://fiddle.sencha.com/#fiddle/4pj).
Double click the email field and change the name.
The handler will not update the result field as e.field will now be 'email' and not 'name'.
That is, Row Editor considers the field on which you click as the edited field. This does not make sense as it is a 'row' editor and is most probably used to edit multiple fields in the row.
To get the list of only modified fields, use e.record.getChanges(). These will give you only the modified fields and their new values.