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

Only have remove buttons for some rows?

I have a handsontable with data that would have a property that indicates a specific status (hasShipped if specifics are required). Is there a way to remove the "remove row" button from a row where the hasShipped value is true?
Table definition, in case it's important:
var hot = new Handsontable(container, {
data: hotData,
dataSchema: { Product: null, UOM: "EA", QtyShipped: 0 },
columns: [
{
data: 'Product',
title: "Product",
type: "text",
readOnly: isShipped
},
{
data: 'UOM',
title: "UOM",
readOnly: true,
type: "text"
},
{
data: 'QtyShipped',
title: "Qty<br />Shipped",
type: "numeric",
readOnly: isShipped
}],
allowInsertRow: true,
//allowRemoveRow: true, //TODO: Depending on mode and row
autoWrapCol: true,
colHeaders: true,
columnSorting: { column: 0, sortOrder: false },
contextMenu: ['undo', 'redo', 'row_above', 'row_below', 'remove_row'],
currentColClassName: 'activeCol',
currentRowClassName: 'activeRow',
dropdownMenu: true,
fixedColumnsLeft: 1,
outsideClickDeselects: false,
readOnly: <%= IsWatchList.ToString().ToLower() %>,
removeRowPlugin: true,
rowHeaders: true,
stretchH: "all", //used in conjunction #hot-container styling to make the table take up 100% of parent width
});

Given that I was already implementing the code to remove a row and had altered the code to insert my own custom styled button, I knew where the buttons were being injected.
Thanks to MonkeyZues's comment, I looked at the code where I was injecting the remove row button and, depending on the value of the HasShipped property, was able to inject (or not) the required row buttons
if (jsonObject != "") {
if (jsonObject.LoadDetails[row]["HasShipped"] == true) {
div.appendChild(btnNode);
elem.appendChild(div);
}
}

JS Bootstrap table to display boolean values as YES and NO instead 1 and 0

I have bootstrap table which fetches data from mysql db where I am having Boolean values which I want to display as YES or NO instead of 1 or 0 in my bootstrap table. My JS bootstrap table code
var $table = $('#table');
$table.bootstrapTable({
url: 'list-user.php',
search: true,
pagination: true,
buttonsClass: 'primary',
showFooter: true,
minimumCountColumns: 2,
columns: [{
field: 'num',
title: '#',
sortable: true,
}, {
field: 'first',
title: 'Available',
sortable: true,
},],
});
I am a learner, tried various online solutions but couldn't make it work.

Use the formatter function - for example
function formatYesNo(value,row,index){
return value==0 ? 'No' : 'Yes';
}
Define your column formatter like this:
formatter: formatYesNo,
See this JSFiddle

Agroup data using ag-grid

I am currently using ag-grid in my project. Am trying to agroup the data using the agrouping feature.
In my col def I have this:
{headerName: "Parent", field: "ParentID",width: 120,rowGroup:true},
{headerName: "Name", field: "Name"},
{headerName: "Level", field: "Level"},
{headerName: "Active", field: "Active"},
{headerName: "Actions",
field: "Actions",
cellRenderer: function (params) {
/*Generate a link and return it*/
return EditLink;
}
}
Then, the ag-grid options:
var gridOptions = {
columnDefs: columnDefs,
rowData: rowData,
onGridReady: function () {
gridOptions.api.sizeColumnsToFit();
},
animateRows: true,
enableRangeSelection: true,
enableSorting: true,
enableFilter: true,
enableColResize: true,
domLayout:'autoHeight',
rowHeight: 48,
enableStatusBar: true,
rowSelection: 'single',
groupMultiAutoColumn:true,
groupRemoveSingleChildren:true,
icons: {
checkboxChecked: '<img src="data:image/png;base64,SOMECODEHERE"/>'
}
};
However, I am not getting the expected behaviour, I have the table rendered with the data and the column to agroup the data, but it's not agrouped, it's like ordered but I don't see the button to dropdown the children

Are you sure the ParentID is shared amongst several rows? The groupRemoveSingleChildren option will show no groups if no ids are shared.
You can also try using rowGroupIndex as opposed to rowGroup
i.e
this.columnDefs = [
{headerName: "Clan", field: "clan", editable: true, rowGroupIndex: 0 },
The rowGroupIndex allows sub groups to be defined so you can nest groups (if you need to).
I would also recommend removing the groupRemoveSingleChildren just to see if you get the checkbox or whether the data is at fault..

Button click does not work in Celltemplate angular grid

I m trying to work with celltemplate. But click event did not work.
$scope.format = function(val){
return val.replace(/\//g, "");
};
var executionColumns = {
data: [],
enableSorting: true,
paginationPageSizes: [25, 50, 75],
paginationPageSize: 25,
enableColumnMenu: true,
enableFiltering: true,
columnDefs: [
{ field: 'StartDate', cellTemplate: '<button ng-click="format (row.entity)">log</button>' },
{ field: 'Status' },
]
};
So what should I do? What is the wrong?

It works for me like the 2nd code
columnDefs: [
{ field: 'StartDate', cellTemplate: '<button ng-click="format(grid.getCellVale(row.entity) )">log</button>' },
{ field: 'Status' },
]
or move your format function to an externalscope defined as
$scope.globalExternalScope = {
format:function(entity){..........}
}
and then use the template like
columnDefs: [
{ field: 'StartDate', cellTemplate: '<button ng-click="getExternalScopes().format(grid.getCellVale(row.entity) )">log</button>' },
{ field: 'Status' },
]

Use
<button ng-click="grid.appScope.format (row.entity)">log</button>
it is working for me now!

In case you are using .component inside of which you render a ui-grid and your method is defined as:
this.handleClick = function(){...}
It will be available to you in cellTemplate via
cellTemplate: '<button ng-click="grid.appScope.$ctrl.handleClick()">log</button>' }