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

How to prevent Row selection on custom elements click in UI-GRID

I'm facing a problem in using UI-GRId with row selection and custom cell elements:
The sample plunker is here : http://plnkr.co/edit/Ed6s6CGFGXyUzj2cyx2g?p=preview
$scope.gridOptions = { showGridFooter:true,enableRowSelection: true, enableRowHeaderSelection: false };
$scope.gridOptions.columnDefs = [
{ name: 'id' },
{ name: 'name'},
{ name: 'age', displayName: 'Age (not focusable)', allowCellFocus : false },
{ name: 'address.city' },
{ name:'address.pin',cellTemplate:'<select><option value="122002">122002</option><option value="122001">122001</option></select>'}];
You can see that on row click, the respective row gets selected, while if you tend to select the dropdown options implicitly the row selection event also gets fired, I want that on elements click like dropdown here the row selection event should not be triggered.
Pls guide.

Interesting question, haven't run into it yet, but I am sure it's only time before I do. I've created a plunk to demonstrate my solution.
Basically, what I have do is registered a watcher, as mentioned by AranS. From there, we have two objects to work with: the row, and the event that occured. Since the event object discloses which element was selected (clicked), we can identify if it was a DIV, or something else. In the event of the change in the select list, the value of evt.srcElement.tagName is 'SELECT'.
http://plnkr.co/edit/k2XhHr2QaD1sA5y2hcFd?p=preview
$scope.gridOptions.onRegisterApi = function( gridApi ) {
$scope.gridApi = gridApi;
gridApi.selection.on.rowSelectionChanged($scope,function(row,evt){
if (evt)
row.isSelected = (evt.srcElement.tagName === 'DIV');
});
};

ui-grid's API allows controlling row selection. Look at this answer from another thread: https://stackoverflow.com/a/33788459/5954939. Basically you can use the event rowSelectionChanged or the isRowSelectable. Let me know if you need an example.

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 );
}
}

Kendui Grid Change Cell Edit Mode After Initialisation

All the cells in my grid are editable initially.
I want to disable cell editing for certain cells based on a value.
How can this be done?
I have the trigger setup as follows:
dataBound: function() {
$('td').each(function() {
if ($(this).children('span').data('route') == 2) {
$(this).css('background', '#CCC')
// Disable cell editing for this cell
}
})
},
All I need to know is what the line is to set the parameter for this cell to editable: false, e.g. this.something.editable = false