I am trying to hide/show column based on headername using ag-grid. As you can see below, I have used setColumnsVisible to achieve the same. But I need to this based on headername amd not field.
{ headerName: 'Rating Name', field: 'newRatingName', filter: true}
this.gridColumnApi.setColumnsVisible(['newRatingName', 'newRatingReleaseDate'], false);true }
Is some other way to achieve it?
If you have access to the columnApi, then I'd suggest you get the column using the columnApi and the headerName, and then use that to set the visibility.
For example:
const ratingNameColumn = this.gridColumnApi.getAllColumns().find(x => x.colDef.headerName == 'Rating Name');
this.gridColumnApi.setColumnVisible(ratingNameColumn, false);
Here's a StackBlitz for you.
You can use hide property in the column definition to conditionally hide your column. This is a boolean property that can be set to true/false. For example:
{ headerName: 'Rating Name',
field: 'newRatingName',
filter: true,
hide: this.shouldHide(),
}
shouldHide = () => (true);
Related
Is there a way to programmatically trigger filtering on Antd Table Columns?
I'm building a custom Header which is a standalone styled component (So, I set the prop showHeader={ false } on the table and use my custom header to communicate with the table by setting states).
I want to be able to use it to trigger filtering on the table columns.
For sorting, I can pass a value to the sortOrder prop and trigger the sorter function externally. For filtering however, I don't have any obvious way to trigger the filter function.
{
title: 'Title',
dataIndex: 'title',
width: '40%',
key: 'title',
sorter: (a, b) => a.title.localeCompare(b.title),
sortOrder: { this.state.columns['title'].sortOrder }
},
{
title: 'Type',
dataIndex: 'operation',
key: 'defectType',
width: '10%',
filters: Object.keys(topicType).map(key => ({ text: topicType[key], value: key })),
onFilter: (value, record) => String(value) === record.defectType
},
Just managed to get this figured.
If you want to explicitly filter your items on a table and manage the filter state on your own; you need to pass the filteredValue prop on the column configuration.
Setting this to null renders the whole list without filtering.
I am using 'ui-grid/dropdownEditor' for one of my column and I want to dynamically load the drop down options which is unique for each row. I want to load the drop down options dynamically on demand via async http call.
I tried the following without success,
$scope.gridOptions = {
columnDefs: [
{ field: 'priority',
displayName: 'Priority',
editableCellTemplate: 'ui-grid/dropdownEditor',
editDropdownIdLabel: 'id',
editDropdownValueLabel: 'name',
},
]}
onRegisterApi: function(gridApi) {
gridApi.edit.on.beginCellEdit($scope, function(rowEntity, colDef) {
if (colDef.field === "priority") {
localServices.getPriorityById(rowEntity.id).then(function(data) {
colDef.editDropdownOptionsArray = data;
});
}
});
Any suggestion or help to achieve this is appreciated.
You should look into the usage of editDropdownRowEntityOptionsArrayPath instead of editDropdownOptionsArray
editDropdownRowEntityOptionsArrayPath can be used as an alternative to
editDropdownOptionsArray when the contents of the dropdown depend on
the entity backing the row.
Here is a link to tutorial
I have a table done with ui-grid and this table has a column with cellFilter definition like this:
{ field: 'company', cellFilter: 'mapCompany:row.grid.appScope.companyCatalog' }
My gridMenu custom item is configured like this:
gridMenuCustomItems: [
{
title:'Custom Export',
action: function ($event) {
var exportData = uiGridExporterService.getData(this.grid, uiGridExporterConstants.ALL, uiGridExporterConstants.ALL, true);
var csvContent = uiGridExporterService.formatAsCsv([], exportData, this.grid.options.exporterCsvColumnSeparator);
uiGridExporterService.downloadFile (this.grid.options.exporterCsvFilename, csvContent, this.grid.options.exporterOlderExcelCompatibility);
},
order:0
}
]
The table is displayed correctly, but when I try to export to CSV, the Company column is exported with empty value. Here is my Plunkr.
Any suggestion will be appretiated
References
I did some research and according to ui-grid Issue #4948 it works good when the Company column is filled with an static catalog. Here is a Plunkr demostrating that.
As you mentioned, there is an export issue when the values in the column are not static, so I forked your plunker with a solution that creates the company mapping for each data object and adds it as a key-value once you get the company catalog back:
$http.get('https://api.github.com/users/hadley/orgs')
.success(function(data) {
$scope.companyCatalog = data;
angular.forEach($scope.gridOptions.data, function(item) {
var compMap = uiGridFactory.getMapCompany(item.company, $scope.companyCatalog);
item.mappedCo = compMap;
});
});
I've kept the original company column but made it invisible (rather than overwriting it), so it exports with the rest of the data in the csv. New column defs:
columnDefs: [
{ field: 'name' },
{ field: 'mappedCo', name: 'Company'},
{ field: 'company', visible: false }
]
Also, in the case that you were getting your data from a server, you would have to ensure that the data and the catalog returned before you run the mapping function. This solution may not work in your particular use case; I don't know.
I found a solution to the CSV export to be able to display the cell display value.
My mistake was using row.grid instead of this.grid at the mapCompany cell filter:
columnDefs: [
{ field: 'name' },
{ field: 'company', cellFilter: 'mapCompany:row.grid.appScope.companyCatalog' }
],
The right way to use it is using this:
columnDefs: [
{ field: 'name' },
{ field: 'company', cellFilter: 'mapCompany:this.grid.appScope.companyCatalog' }
],
Here is my Plunkr.
I have two select2 dropdowns and I want to change options the second dropdown depending on first dropdown.
For example,
{
data: 'country_id',
editor: 'select2',
renderer: customDropdownRenderer,
select2Options: {
data: {!! $production_units !!} ,
dropdownAutoWidth: true,
}
},
{
data: 'state_id',
editor: 'select2',
renderer: customDropdownRenderer,
select2Options: {
data: [],
dropdownAutoWidth: true,
width: 'resolve'
}
},
Depending on country_id, I want to change select2 options of state_id. I know how to make this work with just select2, but I am not able to figure out how to make it work with handsontable.
I have change select2Options in afterChange, but how to do that?
afterChange: function (change, source) {
if(change)
{
if(change[0][1] == 'country_id')
{
$.get("/api/states?country="+change[0][3], function(data){
//What should be done here?
});
}
}
},
You retrieve all the states for that country. Make sure the states list is in the same format that select2 expects.
Then loop through the columns list and determine the dependent column for the current column that has been modified.
Get the cell properties:
var cellProperties = instance.getCellMeta(rowIndex, dependentColumnIndex);
Update the select2 source:
cellProperties['select2Options'].data = [states list];
I have a JQGrid with 3 columns. The third column, I want it as a dropdownlist based on some value in the second column. Is this Possible?
Also in the JQGrid demo, do add a dropdown we need to set the edittype to "select" and pass the values in JSON.
edittype:"select",editoptions:{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}},
My next question is how to pass values to this column from a model object in the format it is expecting.
You can use dataUrl or postData property of editoption defined as function. See the answer or here and here. If you need to send standard URL parameters like /mySetectUrl?status=StatusValue then you can use
name: "Field5", edittype: "select",
editoptions: {
// it produces URL like /mySetectUrl?status=StatusValue
dataUrl: "/mySetectUrl",
postData: function (rowid, value, name) {
return { status: $(this).jqGrid("getCell", rowid, "Status") };
}
}
If you need to construct some another URL like /mySetectUrl/StatusValue you can use dataUrl defined as function:
name: "Field5", edittype: "select",
editoptions: {
// it produces URL like /mySetectUrl/StatusValue
dataUrl: function (rowid, value, name) {
return "/mySetectUrl/" +
encodeURIComponent($(this).jqGrid("getCell", rowid, "Status"));
}
}