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
Related
I am trying to deselect a specific row in aggrid.
I have gone through the documentation but couldn't find one.
gridOptions.api.deselectAll();
This is what I am using to deselect all rows.But is there any way to deselect specific rows in Aggrid
I tried so many ways.Please help me to get through this.
You can use the row node api to deselect a node.
Based on docs -
setSelected(newValue: boolean, clearSelection: boolean)
Select (or deselect) the node. newValue=true for selection, newValue=false
for deselection. If selecting, then passing true for clearSelection
will select the node exclusively (i.e. NOT do multi select). If doing
deselection, clearSelection has no impact.
You need to first get the id of the node you want to deselect and do something like -
const node = gridOptions.api.getRowNode(id);
node.setSelected(false);
ag-Grid doesn't have toggling for the single row selection out of the box. That's just my understanding based on official docs, I sure can be wrong about this.
So for the multiple row selection it's easy and supported out of the box:
you just need to set rowMultiSelectWithClick to true and rowSelection to 'multiple' in the gridOptions (or whatever you call the config object).
For the single row select/deselect I've come up with the following (working plunker):
const gridOptions = {
columnDefs: [
{ field: 'name' },
{ field: 'continent' },
{ field: 'language' },
],
defaultColDef: {
flex: 1,
resizable: true,
},
rowData: rowData,
// here i'm just checking for the right selection mode
// and firing my custom little function when the row is clicked
onRowClicked: this.rowSelection === 'single' && toggleRowSelection,
rowMultiSelectWithClick: true,
rowSelection: 'single'
};
let selectedRow = null;
// this function is just for keeping track of selected row id
// and programmatically deselecting the row by doing node.setSelected(false)
function toggleRowSelection({ node }) {
if (selectedRow !== node.id) {
selectedRow = node.id;
} else {
selectedRow = null;
node.setSelected(false);
}
}
I have a tooltip in Kendo UI which I'm trying to filter cells based on their column name, because the standard td:nthchild won't work (users can move columns around). I want to engage the tooltip based on if someone hovers over MY COLUMN NAME'S CELLS. How do I accomplish that in the filter field? Or should I do it in the show function?
this.$el.kendoTooltip({
filter: "th:contains('MY COLUMN NAME')",
show: function (e) {
if (this.content.text().length > 0) {
this.content.parent().css("visibility", "visible");
}
},
hide: function(e) {
this.content.parent().css("visibility", "hidden");
},
content: function (e) {
var target = e.target;
return $(target).siblings().first().text();
}
});
Like this ?
this.$el.kendoTooltip({
filter: "thead th:contains('ColumnA')"
});
Demo
UPDATE
As you want to show the tooltip on the row cell based on the column's title, you can't use filter parameter for that, it is meant to be used to filter only the target element, which is not your case. You will need some programming there, e.g:
show: function(e) {
let index = this.target().index(), // Get hovered element's column index
columns = grid.getOptions().columns, // Get grid's columns
column = columns[index]; // Get current column
// If target TD is not under 'ColumnA', prevent tooltip from being showed
if (column.title != "ColumnA") {
this.hide();
}
}
Demo
Thanks to kendo, you can't prevent their own events, so using hide() works but the tooltips still opens blinking before it is hidden again, it's possible to catch it opening. Tried using e.preventDefault() and return false that would a reasonable way to say "cancel the widget showing" but with no luck. This was the best I could do.
I am working on setting up a scenario as following:
1) User is shown existing results on first grid
2) User can select multiple results and click an 'Edit' button which will extract the selected items from the first grid
3)Second grid will be populated with the rows the user has selected from the first grid and will allow them to make edits to the content
4)Pressing save will update the results and show the first grid with the rows updated
So far using drips and drabs of various forum threads (here and here), I have managed to accomplish the first two steps.
$("#editButton").kendoButton({
click: function () {
// extract selected results from the grid and send along with transition
var gridResults = $("#resultGrid").data("kendoGrid"); // sourceGrid
var gridConfig = $("#resultConfigGrid").data("kendoGrid"); // destinationGrid
gridResults.select().each(function () {
var dataItem = gridResults.dataItem($(this));
gridConfig.dataSource.add(dataItem);
});
gridConfig.refresh();
transitionToConfigGrid();
}
});
dataItem returns what i am expecting to see with regards to the selected item(s) - attached dataItem.png. I can see the gridConfig populating but with blank rows (gridBlankRows.png).
gridConfig setup:
$(document).ready(function () {
// build the custom column schema based on the number of lots - this can vary
var columnSchema = [];
columnSchema.push({ title: 'Date Time'});
for(var i = 0; i < $("#maxNumLots").data("value"); ++i)
{
columnSchema.push({
title: 'Lot ' + i,
columns: [{
title: 'Count'
}, {
title: 'Mean'
}, {
title: 'SD'
}]
});
}
columnSchema.push({ title: 'Comment'});
columnSchema.push({ title: 'Review Comment' });
// build the datasource with CU operations
var configDataSource = new kendo.data.DataSource({
transport: {
create: function(options) {},
update: function(options) {}
}
});
$("#resultConfigGrid").kendoGrid({
columns: columnSchema,
editable: true
});
});
I have run out of useful reference material to identify what I am doing wrong / what could be outstanding here. Any help/guidance would be greatly appreciated.
Furthermore, I will also need functionality to 'Add New' results. If possible I would like to use the same grid (with a blank datasource) in order to accomplish this. The user can then add rows to the second grid and save with similar functionality to the update functionality. So if there is any way to factor this into the response, I would appreciate it.
The following example...
http://dojo.telerik.com/EkiVO
...is a modified version of...
http://docs.telerik.com/kendo-ui/framework/datasource/crud#examples
A couple of notes:
it matters if you are adding plain objects to the second Grid's dataSource (gridConfig.dataSource.add(dataItem).toJSON();), or Kendo UI Model objects (gridConfig.dataSource.add(dataItem);). In the first case, you will need to pass back the updated values from Grid2 to Grid1, otherwise this will occur automatically;
there is no need to refresh() the second Grid after adding, removing or changing its data items
both Grid dataSources must be configured for CRUD operations, you can follow the CRUD documentation
the Grid does not persist its selection across rebinds, so if you want to preserve the selection in the first Grid after some values have been changed, use the approach described at Persist Row Selection
I need a way to only allow the user to select a row or a column (or multiple selection of entire rows, and entire columns) using handsontable.
After a bit of research and experimentation, I was able to achieve single-row highlighting without the cell and row handles.
Handsontable options:
var x = new Handsontable(element, {
...
multiSelect: false,
disableVisualSelection: ['current', 'area'],
currentRowClassName: 'currentRow'
}
CSS:
.currentRow, .highlight {
background-color: lightblue;
}
There is an way to select multiple cells, range cells and even single cell by setting: selectionMode='multiple' checkout this link: https://docs.handsontable.com/pro/3.0.0/Options.html#selectionMode
I ended up with this solution:
beforeOnCellMouseDown: function restrictSelectionToWholeRowColumn(event, coords) {
if(coords.row >= 0 && coords.col >= 0) event.stopImmediatePropagation();
}
works like charm!
I needed the combobox with checkboxes in front of each option, to select multiple options. I tried using CheckedMultiSelect using "dropdown:true",
It shows the value in the combobox like, 2 item(s) selected, 1 item(s) selected,etc when I select items.
How to show the values selected in the text area of combobox separated by delimiter??
Should css or HTML or someotherthing has to be changed for checkedMultiSelect??
Thanks in advance.
As for your second question, you have to extend dojox.form.CheckedMultiSelect class and override _updateSelection and startup methods:
var MyCheckedMultiSelect = declare(CheckedMultiSelect, {
startup: function() {
this.inherited(arguments);
setTimeout(lang.hitch(this, function() {
this.dropDownButton.set("label", this.label);
}));
},
_updateSelection: function() {
this.inherited(arguments);
if(this.dropDown && this.dropDownButton) {
var label = "";
array.forEach(this.options, function(option) {
if(option.selected) {
label += (label.length ? ", " : "") + option.label;
}
});
this.dropDownButton.set("label", label.length ? label : this.label);
}
}
});
Use MyCheckedMultiSelect instead of dojox.form.CheckedMultiSelect:
var checkedMultiSelect = new MyCheckedMultiSelect ({
dropDown: true,
multiple: true,
label: "Select something...",
store: dataStore
}, "placeholder");
checkedMultiSelect.startup();
Again, I added this to the jsFiddle: http://jsfiddle.net/phusick/894af/
In addition to #Craig's solution there is also a way to add only a look&feel of checkboxes via CSS. If you inspect generated HTML, you can see that each row is represented as a table row <tr> with several table cells <td>. The table row of the selected item gets CSS class .dojoxCheckedMultiSelectMenuItemChecked, so I suggest to change styling of the first cell which always has class .dijitMenuItemIconCell:
td.dijitMenuItemIconCell {
width: 16px;
background-position: center center;
background-repeat: no-repeat;
background-image: url('some-unchecked-image-here.png');
}
tr.dojoxCheckedMultiSelectMenuItemChecked td.dijitMenuItemIconCell {
background-image: url('some-checked-image-here.png');
}
So you will get:
I added this to the jsFiddle I was helping you with before: http://jsfiddle.net/phusick/894af/
The CheckedMultiSelect does not provide checkboxes when the dropDown is set to true. It simply allows the user to click to click multiple items to select.
To implement what you want, take a look at my answer here:
Custom dojo Dropdown widget by inheriting _HasDropdown and _AutoCompleterMixin
In MyCustomDropDown, you will need to build the list of checkboxes and items as a custom widget. I would recommend looking at dojox.form._CheckedMultiSelectMenu and dojox.form._CheckedMultiSelectMenuItem and mimic the functionality there and just give a different ui (with checkboxes).
dojox.form.CheckedMultiSelect should have been showing the checkboxes, this ticket fixes the problem. https://bugs.dojotoolkit.org/ticket/17103