I am using ag-grid and for any given row I would like the dropdown in one column to be dependent on the value of a different column. Can I do that with agSelectCellEditor or do I have to create a custom component.
You can define your cellEditorParams function in a way that returns different values depending on values of another column.
Here is a sample from the ag-grid site -
cellEditor : 'agSelectCellEditor';
cellEditorParams: function(params) {
var selectedCountry = params.data.country;
if (selectedCountry==='Ireland') {
return {
values: ['Dublin','Cork','Galway']
};
} else {
return {
values: ['New York','Los Angeles','Chicago','Houston']
};
}
}
Take a look at this example from official docs. You will have to replace agRichSelectCellEditor with agSelectCellEditor
Related
I'm wondering what the best practice is for displaying a table (with data from multiple fields) within a cell in ag-grid?
I think I can get it to work with formatting the entire table as an html string and passing that to the grid as the field and using a cellRenderer, however I'd rather not have that kind of view logic on the server-side.
I'd really like for the column definition to be able to take in more than one field, but it doesn't seem like that's possible.
Any ideas? Thanks.
You can define a valueGetter for the desired column in column def.
Here is a sample -
valueGetter:
function sumField(params) {
return params.data.a + params.data.b
}
Value getters example
In your ColDef for the column, you can pass data and then destructure the values you're looking for off of that object, which comes through props in ag-grid.
For example...
In your ColDef array:
{
field: 'data',
headerName: 'Name',
cellRendererFramework: NameDescriptionRenderer
}
Then, in your NameDescriptionRenderer:
export default class NameDescriptionRenderer extends React.Component {
public render() {
const { description, name } = this.props.data;
return <React.Fragment>{`${name}: ${description}`}</React.Fragment>;
}
}
function fullNameGetter(params) {
return params.data.Title + ' ' + params.data.FirstName + ' ' + params.data.MiddleName + ' ' + params.data.LastName;
}
.....
{
headerName: 'Full Name',
field: 'Title&FirstName&MiddleName&LastName',
filter: true,
width: 225,
valueGetter: fullNameGetter,
},
I have a column called Account Verification which return values either true or false. I formatted the value on table to Yes and No, but when filtering the column, I still have to search true or false to be able to filter the column. I made a custom filter condition but it did not work. Anyone has solution?
columns = [
{
headerName: 'Account Verification', field: 'accountVerified', filter: 'agTextColumnFilter',
// Cell renderer
valueFormatter: (data) => {
if (data.value === true) return 'Yes';
else return 'No';
},
// Custom filter
filterParams: {
condition: (searchTerm, cellValue) => {
if (searchTerm === 'Yes' || 'yes') {
return cellValue === true;
} else if (searchTerm === 'No' || 'no') {
return cellValue === true;
} else return cellValue === null;
}
}
}
]
"ag-grid": "^18.0.1"
I think the best way to implement this - is to use built in methods of ag-grid, like:
onFilterModified
onFilterChanged
And there provide the logic, which would be transform the filter value to true/false.
Or, use javascript to add event listener on apply button of the filter (if you are using apply button to apply your filter), which would call fucntion for transform your value.
Have no example in the moment, but I develped solution for filter validation (custom) in the same way.
Try one of these options:
Similar to to valueFormatter in your column definition, use a valueGetter also. There is also this method available in column definition (filterValueGetter(params) - Function or expression. Gets the value for filtering purposes.)
You can add a new field in your data model that you initialize to Yes/No based on the values of the original field that has true/false. Then in the column definitions, you can use this new field to display in the grid.
Alternatively, you can write a custom filter component. See the custom Angular filter example on the ag-grid site.
You can use TextFormatter within the filterParams to modify the filter value during filtering:
filterParams: { textFormatter: (filterValue) => 'yourvalueformatter' }
https://www.ag-grid.com/javascript-grid-filter-text/#text-formatter
I had the same issue and went through all the inbuilt filters.
Finally I was able to fix the issue by following the below steps
Steps :
Install the ag-grid-enterprise package. (npm install ag-grid-enterprise)
Set the filter to agSetColumnFilter. (filter: 'agSetColumnFilter')
Add filterParams and specify the same valueFormatter which you used in the column definition
filterParams: {
valueFormatter: (data) => {
if (data.value === true) return 'Yes';
else return 'No';
}
}
You can try adding this to your column definition:
filterValueGetter: params => params.data.accountVerified ? "Yes" :
"No"
In Ember it is easy to filter an array where you are looking for matching values ( Only return name == "John) What I can't figure out is how to filter with a greater than or less than ( Return all objects whose startDate is before today
In my app I have a collection of deliverables. I want to divide these deliverables into three categories: Due within ten days, Past due, and then the rest.
I found the following example in another SO post, but can't figure out how to use it to accomplish my goal
filterComputed: function() {
return this.get('content').filter(function(item, index, enumerable){
return item.firstName == 'Luke';
});
}.property('content.#each')
You can just do:
this.get('content').filter(function(item){
return item.get('someProperty') > someVar;
});
This should return an array of objects within your defined date range. Should work in Ember ^2.x.
filterComputed: computed('content.#each', 'startDate', 'endDate', function() {
return this.get('content').filter(function(item) {
var contentDate = item.get('date'); // expecting item to have a date property
return contentDate > this.get('startDate') && bookingDate < this.get('endDate');
});
})
With ES6 you could even do something like this:
filterComputed: computed('content.#each', 'startDate', 'endDate', function() {
return this.get('content').filter(item => item.get('date') > this.get('startDate') && item.get('date') < this.get('endDate'));
})
If you have a simpler requirement, computed.filterBy() might be right for you. https://emberjs.com/api/classes/Ember.computed.html#method_filterBy
Also helpful: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
Hello I have a simmiliar question as this one:
BlackBerry 10 Cascades: How do I load data into a DropDown?
The only thing i want to know is how to do this with a ListView instead of a dropdown?
Thanks in advance!
The ListView displays data from a DataModel which is an abstract data type. Which specific type of data model you use depends on the source of your data. You place your data in the appropriate data model then assign the data model to the ListView.
To load data into a dropdown, instead of a listview, use this code:
DropDown {
id: dropdown
attachedObjects: [
ComponentDefinition {
id: compDefDD
Option {
description: "your default value for each Option"
}
},
DataSource {
id: dropDownDataSource
// Load the data from an SQL database, based on a specific query
source: "asset:///database.sql
query: "select * from <yourtable>"
onDataLoaded: {
//the method is the code above
for (var i = 0; i < data.length; i ++) {
var option = compDefDD.createObject();
option.text = data[i].SQLcolumn1;
option.value = data[i].SQLcolumn2;
dropdown.add(option);
}
}
onError: {
console.debug(errorMessage + " : " + errorType);
}
}
]
onCreationCompleted: {
dropDownDataSource.load();
}
}
In this example I load data from a sql database. If you use another source of the data see page reference for more details.
I have utilised the example code at Example Code at this link
and I have got my grid to show a dynamically constructed select dropdown on add and edit. However when it is just showing the data in the grid it shows the dropdown index instead of its associated data. Is there a way to get the grid to show the data associated with the index instead of the index itself.
e.g. the data on my select could be "0:Hello;1:World"; The drop down on the edit/add window is showing Hello and World and has the correct indexes for them. If the cell has a value of 1 I would expect it to show World in the grid itself but it is showing 1 instead.
Here is the row itself from my grid:
{ name: 'picklist', index: 'picklist', width: 80, sortable: true, editable: true,
edittype: "select", formatter: "select", editrules: { required: true} },
I am filling the dynamic data content in the loadComplete event as follows:
$('#mygrid').setColProp('picklist', { editoptions: { value: picklistdata} });
picklist data is a string of "0:Hello;1:World" type value pairs.
Please can anyone offer any help. I am fairly new to JQGrids so please could you also include examples.
I know you have already solved the problem but I faced the same problem in my project and would like to offer my solution.
First, I declare a custom formatter for my select column (in this case, the 'username' column).
$.extend($.fn.fmatter, {
selectuser: function(cellvalue, options, rowdata) {
var userdata;
$.ajax({
url:'dropdowns/json/user',
async:false,
dataType:'json',
cache:true,
success: function(data) {
userdata = data;
}
});
return typeof cellvalue != 'undefined' ? userdata[cellvalue] : cellvalue ;
}
});
This formatter loads up the mapping of id and user in this case, and returns the username for the particular cellvalue. Then, I set the formatter:'selectuser' option to the column's colModel, and it works.
Of course, this does one json request per row displayed in the grid. I solved this problem by setting 10 seconds of caching to the headers of my json responses, like so:
private function set_caching($seconds_to_cache = 10) {
$ts = gmdate("D, d M Y H:i:s", time() + $seconds_to_cache) . " GMT";
header("Expires: $ts");
header("Pragma: cache");
header("Cache-Control: max-age=$seconds_to_cache");
}
I know this solution is not perfect, but it was adequate for my application. Cache hits are served by the browser instantly and the grid flows smoothly. Ultimately, I hope the built-in select formatter will be fixed to work with json data.
If you save in jqGrid ids of the select elements and want to show the corresponding textes then you should use formatter:'select' in the colModel (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:predefined_formatter#formatter_type_select) together with the edittype: "select".
The Usage of stype: 'select' could be also interesting for you if you plan to support data searching.