Develop Reference

How to select column in ag-grid

I an using Ag-Grid.
I want to select column horizontal and vertical like under picture.
How to solution??

I think you would have to do this manually. You could watch for cell selection yourself, and then keep track of the selected column. Then you could use cellStyle in the column definition params to set the background color when the column is selected. You have to redraw the rows, since the cellStyle function only gets run when the rows are drawn. For example:
onCellFocused: function(params) {
if (params.column) {
selectedColumn = params.column.colDef;
params.api.redrawRows();
}
},
defaultColDef: {
cellStyle: function(params) {
if (params.colDef === selectedColumn) {
return {'background-color': '#b7e4ff'};
}
}
}
Unfortunately, it looks like redrawing the rows clears the selection, so you either have to reselect the row manually, or use a row style.
Check it out here: https://stackblitz.com/edit/ag-grid-select-column?embed=1&file=index.js

Issue while styling a cell on onCellValueChanged in ag-grid

I am trying to style a cell with a particular background color if the 'oldValue' and 'newValue' are not equal in the 'onCellValueChanged' handler.
var gridOptions = {
columnDefs: columnDefs,
rowData: rowData,
onCellValueChanged: function(params) {
if(params.oldValue !== params.newValue) {
params.colDef.cellStyle = function(params) {
return { backgroundColor: 'green'};
}
}
}
};
When I am editing the cell value to a new value, I don't see the style change being applied on tabbing out or clicking any other cell. Rather, I have to click back on the edited cell again and click outside after that to see the style being applied. I am not sure what is happening, can someone guide me here. I am also adding the demo

Bind it to your template
<ag-grid-angular (cellValueChanged)="onCellValueChanged($event)">
</ag-grid-angular>

Button inside slickgrid to call modal with another slickgrid

This is based on slickgrid example 1. I would like to have the button inside slickgrid call another instance of slickgrid in another modal. At the moment i am unable to interact with the button inside the grid aside from getting it to display.
Here is my fiddle JSfiddle
{id: "newgrid", name: "newgrid", field: "newgrid", width: 80, sortable: true, formatter:reportFormatter}
function reportFormatter(row, cell, value, columnDef, dataContext) {
return "<button class='show-report'>show</button>";
}
Ive tried to use
myGrid.onClick.subscribe(function(e,args) {
if ($(e.target).hasClass('show-report')) {
alert("hello");
}
});

Use the onClick subscribe like this instead (and also right after it has been instantiated)
grid.onClick.subscribe(function(e,args) {
if ($(e.target).hasClass('show-report')) {
alert("hello");
}
});
Since the grid instance is like this
grid = new Slick.Grid("#myGrid", data, columns, options);

Add click event to the summary row of grid in extjs

Asked this question yesterday but not getting any response to posting it again in diffrent words-
I have two columns with summary row-
var cols = [
{ id: 'myCol1', header: 'Price1', dataIndex: 'PRICE1', type: 'float', width: 50, summaryType: 'sum' },
{ id: 'myCol2', header: 'Price2', dataIndex: 'PRICE2', type: 'float', width: 50, summaryType: 'sum' },
];
I want to add cellclick event to these summary row so that on click I can open a new window
If I use cellclick event of grid, it works for all cells except this summary row.
Is there any other event which I can use so that I would be able to click on it.
UPDATE:
I have used following listener which is not working for summary row
listeners: {
cellclick: function(grid, rowIndex, cellIndex) {
// do whatever
},
scope: this
}

As far as I know, there's no built-in event for summary row click. What you can do is add a listener to the cell element itself.
You can do that easily by using the delegate option of the listener. But this option is only available for DOM elements events, so we also have to use the element option to hook our event on the grid's body element (alternatively, you can use something like myGrid.getEl().on({ ... })).
Here's an example of listeners that you would add directly to your grid's config:
listeners: {
scope: this
,click: {
element: 'body'
// Would have been great to use '.x-grid-row-summary .x-grid-cell',
// but delegate only accept a *simple selector* which, seemingly,
// means just one class...
,delegate: '.x-grid-cell'
,fn: function(e, target) {
// Remove the condition if you want to catch all cells. You won't
// have all the arguments that are available in the cellclick
// event, though.
if (Ext.fly(target).up('tr').is('.x-grid-row-summary')) {
// The cellIndex is assigned by the table view when it render the
// cell element.
alert('Click on summary cell at index ' + target.cellIndex);
}
}
}
}
Unfortunately, this kind of code relies on class names and the cellIndex property that are set by Ext, and that may change in the future... Keep that in mind when you upgrade the lib!

I am not sure about the code u have used adding event for row click, but still i am adding this code to grid panel hope it helps,sry if u have tried already.. I have edited this below will do i believe..
listeners: {
cellclick: function(iView, iCellEl, iColIdx, iRecord, iRowEl, iRowIdx, iEvent) {
var fieldName = iView.getGridColumns()[iColIdx].dataIndex;
console.log(fieldName );
}
}

dojo dgrid multiple cells edit

Is it possible to edit multiple cells of the dgrid at the same time ?
I know that we can edit a single cell at a time by double/single clicking that cell and update it. And on the onBlur of that cell, the edited data gets updated for that cell.
But my requirement is:
click edit-link/edit-button for each row, which will display editors for the all the editable cells of that row,
update/edit the cells,
then click the save button(which will be next to the edit button) for that same row,
on clicking the Save link/icon , the edited cell's value should get saved to the store/server.
Below are some of the columns of the Grid.
// one of the editable columns others are also similar to this one..
editor({
label:"Outcome",
field:"outcome",
sortable: false,
editorArgs: {
options:[
{value: "1", label: "Opt1"},
{value: "2", label: "Opt2"},
{value: "3", label: "Opt3"},
]
},
renderCell: function(row, value, td, options){
put(td, "div", outcomeOptionsMap[value] || '');
}
}, Select, "dblclick" ),
// last column
{label:"Actions", field:"actions",sortable: false,
renderCell: function(row, value, td, options){
newValue = "<a href=\"#\" title=\"Edit\" onclick='editEntireRow(testgrid,event);'><img src='../static/images/edit.gif'/></a>";
newValue = "<a href=\"#\" title=\"Save\" onclick='saveRow(testgrid,event);'><img src='../static/images/edit.gif'/></a>";
newValue += " <a href=\"#\" title=\"Delete\" onclick='testgrid.store.remove("+row.id+");'><img src='../static/images/delete_icon.png'/></a>";
td.innerHTML = newValue;
}
BTW, I am using the dojo.store.JsonRest as store .
Grid Declaration
var MyGrid = declare([Grid, Selection, Keyboard]);
window.testgrid = new MyGrid(
{
store : Observable(Cache(jsonRest, Memory())),
selectionMode : "none",
getBeforePut: false,
columns: getColumns,
allowSelectAll: true,
minRowsPerPage: 5,
maxRowsPerPage: 20,
}, "gridContainer");
currently I am trying something like this, but not working...
function editEntireRow(grid,event){
// cols 3,5,7,8 steps to the left of the Action column are editable
grid.edit(grid.left(grid.cell(event),3));
grid.edit(grid.left(grid.cell(event),5));
grid.edit(grid.left(grid.cell(event),7));
//grid.edit(grid.left(grid.cell(event),8));
}