I am trying to make clicable link in group (group and its child should be clickable, should be like a link)
i'm not able to make it because for a clickable link i need to create a cellrenderer but in this case group cellredered in already there
here is my plunker
https://plnkr.co/edit/gMfQXY?p=preview
Why do you need to have it in one column? You can define 'dummy' column exactly for group handling and then, the first column with own cellRenderer for the link.
Anyway, you can use innerCellRenderer inside cellRendererParams- I suppose it's exactly as you looking for.
innerRenderer: The renderer to use for inside the cell (after grouping functions are added).
cellRenderer:'agGroupCellRenderer',
// provide extra params to the cellRenderer
cellRendererParams: {
suppressCount: true, // turn off the row count
suppressDoubleClickExpand: true, // turn off double click for expand
checkbox: true, // enable checkbox selection
innerRenderer: myInnerRenderer, // provide an inner renderer
footerValueGetter: myFooterValueGetter // provide a footer value getter
}
Code part from official doc
Related
I'm using the vanilla JS version of AgGrid.
Let's say I have a column called ThingType where the rows can have three values: car, bike, plane
If the value of the individual row is car or bike, I want that cell to be static. However if the text value of that cell is plane I'd like that individual cell to have a custom editor type where I allow editing and autocomplete.
I've seen this docs page: https://blog.ag-grid.com/conditional-formatting-for-cells-in-ag-grid/ that seems to suggest I could setup a custom cellrenderer but it's not clear with out that relates to the columntypes API or how I'd setup an individual cell to use the editbility functionality I setup in a custom column def.
Basically it feels like I want to move type off of columnDef and be cell by cell. Any thoughts on how to achieve this?
This can be done using conditional editing. You treat all values the same and prevent cell editing on cells that meet a specific condition (cells value with "Car" & "Bike").
Plunker Example Link
{ field: 'country',
// China & Russia are not editable, rest are
editable: (params) => !(params.node.data.country === 'Russia' ||
params.node.data.country === 'China')
}
noobie_sapui5_developer
I am trying select single row of sap.ui.table with checkbox.
There are 2 modes for this table
Multi
Single
In multi selection mode there are checkboxes for each row and multiple rows can be selected - but I want only a single row to be selected
In single selection mode, it allows only a row to be selected - but there are no check boxes.
How to achieve a table with checkboxes with only one selectable row?
It is possible with sap.m.table, but my requirement is to make it work with sap.ui.table.
Why I wouldn't recommend doing this:
Checkboxes (selectionMode="MultiToggle") are usually used to signal the user that he's able to select no, one or more options, while radio buttons (selectionMode="Single") tell the user that he's only able to choose one option.
See: material.io, nngroup, uxplanet-radio, uxplanet-checkbox
In your case, I'd recommend using the selectionMode="Single" and either set the selectionBehavior attribute to Row, RowOnly or RowSelector (SelectionBehaviour).
As #jasbir pointed out, you could use the rowSelectionChange event in order to invoke a function that grabs the index (getSelectedIndex) of the row that was just selected. You can then call the setSelectedIndex function on the sap.ui.table.Table and pass it the grabbed index. This will remove previously selected rows and set the currently selected row as selected.
<Table id="yourTableId"
selectionMode="MultiToggle"
rowSelectionChange="onSelectionChange">
</Table>
And in the controller.
onSelectionChange: function(oEvent) {
var oYourTable = this.getView().byId("yourTableId"),
iSelectedIndex = oEvent.getSource().getSelectedIndex();
oYourTable.setSelectedIndex(iSelectedIndex);
}
Note: Since the setSelectedIndex function triggers a rowSelectionChange the above function gets triggered twice (another indicator that this solution isn't intended behaviour).
Check the SAP Fiori Guidelines for the sap.ui.table.Table for further information.
You can use rowSelectionChange event whenever a selection is changed you can unselect other rows and keep the selected one.
Hope this helps
Im using Ag-grid to control my table, but i want in my group that stores a list of rows instead of having to make the row group expand in 2 clicks, i want to be on 1 click.
If i click on the icon arrow it works, but if i click on the title row it only opens on 2 clicks.
I already tried to find in the documentation any information about it, but cant find nothing.
Here is a example from the documentation.
https://ag-grid.com/javascript-grid-tree/index.php
example image:
We are now recommended not to use the onGroupExpandedOrCollapsed, so this should now be...
This will also update the icons and animate the rows, which onGroupExpandedOrCollapsed won't.
onRowClicked(params) {
params.node.setExpanded(!params.node.expanded);
}
This will toggle the expansion, use params.node.setExpanded(true) if you want the rows to just stay open.
You can listen to events on either a row or cell clicked, and expand nodes accordingly.
For example to expand a row based on a click you could do the following:
onRowClicked: (params) => {
// update the node to be expanded
params.node.expanded = true;
// tell the grid to redraw based on state of nodes expanded state
gridOptions.api.onGroupExpandedOrCollapsed(params.rowIndex)
}
This should be in the documentation - I'll update it to reflect this information.
In the column definition, you can use the onCellClicked(params) function to tell it to do something when the cell is clicked. I tried looking for an expand function, but I could only find expandAll() which I don't think you will want. So what I would do is just use jquery or simple DOM selection to click on the expand icon inside of that cell.
this one works
onRowClicked(params) {
params.context.setExpand.onExpandClicked(params.rowIndex, params.node.rowHeight);
}
My buttons are input type=button, id field set, and no text in between the tags since it appears to the right of my buttons rather than inside. (sorry, won't let me publish the html for some reason).
I .button() them and set their label. All works as expected, but I can't select them by :contains().
How do you select jQuery UI buttons by their labels?
Thanks in advance!
Edit
I don't select by id because the text of the button changes based upon a variable in my db. Is there a way to select by .data?
You should create a button and look how jQuery creates it. When you look at the example in the documentation you see that .button() creates a span element in the button element that contains the label. So you can query on this inner span element which has a class of ui-button-text.
But I think that you should overthink your code and rework it so that you can select on the ID since they are made to identify things.
Edit: Then go for the first advice
var buttons = $('button').filter(function (index) {
$('.ui-button-text:contains("' + your_string + '")', this).length > 0
});
How can I make this accordion generic? That is, instead of active:2 I want it to point to the next section(may be some function like next() or such...). Similarly, for previous section.
$('#accordion').accordion({collapsible: true, active:2});
Also once if it opens a section , is there a way to focus on the first or last input field of the section?
Any help is appreciated.
$("#selector").accordion({
change : function(event, ui) {
// Your code to expand the next section and/or select the first element
}
// There is also a changestart event you could use instead of change
});