Develop Reference

Ag-Grid : Modify data in one grid while applying filter in another Grid

I have 2 grids side by side as per design and both will have same no.of rows. i need to apply filter in one column of grid1 and same amount rows should be in both the grids after applying filter also.
Component.ts
GridOptions = <GridOptions>{
enableFilter: true,
rowSelection: 'multiple',
enableSorting: false,
enableColResize: true,
singleClickEdit: true,
animateRows: true,
headerHeight: 50,
rowClass: 'rowClass',
headerClass: 'GridHeader',
overlayNoRowsTemplate: " ",
context: {
componentParent: this
},
onFilterModified: this.GridFilter
};
GridColumnDefs = [{
headerName: "Student Name", field: "name", width: 90, editable: true,
filter: 'agTextColumnFilter'
},];
releaseFilter(params: any) {
var data = params.api.getRenderedNodes()
}
I got the filtered rows of grid1 but dont know how to set the filtered index for the second grid. Thanks in advance

Ag-grid with AngularJS - header width is not aligning with data columns

[Update] I will add an additional 200 points (total 300) if anyone gets my snippet working, with headers and data columns aligned.
This is my first attempt with ag-grid. I assign the grid header like this:
var stationAnalyticsColumnDefs = [
{headerName: "Station #", field: "station_id", width: 150, sort: 'asc'},
{headerName: "Station name", field: "station_name", width: 150, sort: 'desc'},
{headerName: "Total visitors", field: "total_visit_count", width: 150, sort: 'desc'},
{headerName: "Busiest day (visitors)", valueGetter: BusiestDayValueGetter, width: 150, comparator: BusiestDayComparator},
];
I am fetching the data by AJAX, so when my $http.get returns success, accoding to the docs, I should be able to
$scope.stationAnalyticsGridOptions.api.refreshView();
or
$scope.stationAnalyticsGridOptions.api.refreshRows(data);
but neither of those seems to work (no data is shown), so I use
$scope.stationAnalyticsGridOptions.api.setRowData(data);
and the data shows just fine.
My problem is that the headers don't align with the data. How do I do that? I also want the grid columns to resize as I drag the headers to resize them.
[Update] Still working on the Plunk. Can anyone see what's wrong with this?
View
<div ag-grid="stationAnalyticsGridOptions"
class="ag-fresh ag-basic"
style="height:400px; width:80%">
Controller
var stationAnalyticsColumnDefs = [
{headerName: "Station #", field: "station_id", width: 150, sort: 'asc'},
{headerName: "Station name", field: "station_name", width: 150, sort: 'desc'},
{headerName: "Total visitors", field: "total_visit_count", width: 150, sort: 'desc'},
{headerName: "Busiest day (visitors)", valueGetter: BusiestDayValueGetter, width: 150, comparator: BusiestDayComparator},
];
$scope.stationAnalyticsGridOptions = {
columnDefs: stationAnalyticsColumnDefs,
rowData: $scope.eventStationsAnalyticData,
enableColResize: true,
enableSorting: true,
enableFilter: true,
};
[Update] I tried to create a working Fiddle, to reproduce the question, but failed; the table does not even display. You can find the Fiddle at https://jsfiddle.net/mawg/9ex225ye/4/
Can anyone get it working - with the header width and data column width aligning?
Please fork my Fiddle, rather than starting from scratch, and retain the variable names, etc

Try setup your gridOptions including angularComileHeader: true to ensure your headers does work with AngularJS in the right way. Please check this runnable plnkr and compare it with your solution. Also ensure you using the latest version of ag-grid.
$scope.gridOptions = {
columnDefs: columnDefs,
rowData: $scope.rowData,
angularCompileHeaders: true,
enableColResize: true,
enableSorting: true,
enableFilter: true
};

Populate a column in Kendo Grid based on separate Datasource

I have a kendo grid like what I've posted below. I'm populating the grid based on the data in the url I provided for it. However, there is one column on the grid, the flag column, which I would like to be a separate datasource to populate that column, based on the id. The datasource for that column would look something like:
[{id:1234, flag: 'N'}, {id:5678, flag:'Y'}]
Is there a way where I can populate just 1 column in the grid based on a completely different datasource from the rest of the grid? The flag would need to be placed on the row of its corresponding id. If so, how can I implement this? Any help would be appreciated.
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: url
},
pageSize: 30
},
height: 400,
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
field: "id",
title: "ID",
width: 240
}, {
field: "FirstName",
title: "First Name"
}, {
field: "LastName",
title: "LastName"
}, {
field: "flag",
title: "Flag",
width: 150
}]
});

Consider using a foreign key column.
http://demos.telerik.com/kendo-ui/grid/foreignkeycolumn

Set cell value based on a condition

I have a column binded to a field called state, which has the values: S or L. I want to map this to following:
S => Short,
L => Long
This is how the binding is defined:
$scope.gridOptions = {
enableSorting: true,
enableFiltering: true,
enableHorizontalScrollbar: 0,
columnDefs: [
{name: 'action', field: 'state', width: 110, enableFiltering: false}
]
};
I am already using cellclass and celltemplating, but either one is used for class application or event binding respectively. How do I set cell value based on an ng-if?

If it helps anyone, I ended up doing this:
let stateTemplate = "<div>{{row.entity.state == 'L' ? 'Buy' : 'Sell'}}</div>"
$scope.gridOptions = {
enableSorting: true,
enableFiltering: true,
enableHorizontalScrollbar: 0,
columnDefs: [
{name: 'action', field: 'state', cellTemplate: stateTemplate, enableFiltering: false}
],
data: someData
};

Angularjs and ng-grid: how handle checkbox

in angulajs i have a ng-grid that i fill with data returned from a server. The field "Active" is a boolean so i have make a template to show a checkbox:
$scope.gridOptions = { data: 'myData', enableCellSelection: true,
enableRowSelection: false, enableCellEdit: true,
columnDefs: [{ field: 'Id', displayName: 'Id', visible: false },
{ field: 'Name', displayName: 'Name', enableCellEdit: true },
{ field: 'Active', displayName: 'Active', enableCellEdit: true, cellTemplate: '<input type="checkbox" ng-model="row.entity.Active" >' }]
Now, when i edit some cell, i want save back to the database the edited row and so i handle the ngGridEventEndCellEdit:
$scope.$on('ngGridEventEndCellEdit', function (data) {
....
}
event. In effect when i edit the cell "Name" the above handler is called but when i check/uncheck the checkbox Active, that event isn't called.
How can i emit the ngGridEventEndCellEdit when i check/uncheck the checkbox? Or how can handle that?

What about emitting ngGridEventEndCellEdit from the checkbox ng-change function?
ng-change="emitEndCellEdit()"
with
$scope.emitEndCellEdit = function() { $scope.$emit('ngGridEventEndCellEdit') }

Try to add ng-change="edit(row)" to your cell template. Handle all your stuff inside $scope.edit function. You should receive clicked grid data as a parameter.