I have multi select box to which I am adding boostarp select plugin for styling, I want to remove tick i have tried options of boostarp select to remove it, But it doesn't seems like removing tick icon, I ended up 'data-tick-icon': '' with this option, Is there any other way to remove tick icon on the left of the option
<%= select_year(Date.today, { start_year: 2000, end_year: Time.current.year + 50 }, multiple: true, class: 'bs-lg', id: 'incidentOccurredYears', 'data-style': 'form-control','data-tick-icon': '', 'data-actions-box':"true", 'data-live-search': 'true') %>
I've tried many different ways as well but it seems by simply adding the data-tick-icon="" to the select element will do the trick
Related
I am using v5 of TinyMCE. By default, the style selected is 'Paragraph', as shown in this image :
[tinyMCE toolbar, as the user sees before he mades any format configuration]
But I know my users will all prefer to use 'Div' style. So I would like 'Div' to be selected by default. The toolbar should therefore appear like in this image :
[tinyMCE toolbar, as I want it to be configured by default]
Is it possible ?
I haven't find my answer in tinyMCE documentation.
Same question if you want for instead "bold" button to be selected by default, etc.
Thank you !
To replace the default <p> blocks with <div>, use forced_root_block: https://www.tiny.cloud/docs-3x/reference/Configuration3x/Configuration3x#forced_root_block/
tinymce.init({
// ...
forced_root_block : 'div'
});
To select the bold button by default, you could use execCommand: https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#execcommand
tinymce.init({
// ...
setup: function(editor) {
editor.on('init', function() {
this.execCommand('Bold');
});
}
});
Example fiddle combining both: https://fiddle.tiny.cloud/YShaab/1
I have an ag-grid where rows are grouped by first column. The group are expanded by default. I want to disable group collapse on click.
colDefs = [{
field: 'colA',
rowGroup: true,
hide: true
}, {
field: 'colB'
},
...
];
gridOptions = {
groupDefaultExpanded: -1,
...
}
How do i prevent from collapsing the group open by default
I guess the colB has a showRowGroup: 'colA' and a cellRenderer: 'agGroupCellRenderer'.
You can remove the cellRenderer from it and it will display the group title as a simple string without showing the collapse icon and without the collapse abililty too.
I managed to do that by adding the following css:.ag-group-expanded {pointer-events: none;}
I also set to true suppressDoubleClickExpand and suppressEnterExpand so there is no way to collapse the rows.
I'm working on using treeData, but was wondering if it is possible to hide the text next to the chevron.
For example, can I hide the letters from the column in this table, and just show the chevron? Maybe using cell renderer?
You can do that even without using cellRenderer.
Include below styles in your component declaration.
styles: [`
::ng-deep [class^='ag-row-group-indent-'] .ag-group-value {
display: none;
}
`]
Working plunk: Ag-Grid treeData: Possible to hide text next to chevron
Figured out an easy fix within the column def:
cellRendererParams: {
innerRenderer: () => ''
}
In my Angular application I have a grid that is almost identical to the Group Selection example in the ag-Grid docs: https://www.ag-grid.com/javascript-grid-selection/#gsc.tab=0
My requirement is slightly different in that my expand button needs to both expand the row and select the row. As you see in the plunker example selection and expansion are two separate click events, but I am looking to select the row and expand that same row in one click, without having the user click on the checkbox and the expand button. I have tried doing this with css by making the checkbox transparent and placing it over the expand icon, but the click is highjacked so only one event will fire...
Is this possible in ag-Grid?
In my component by columnDefs for the column that has my checkbox and expand icon looks like so:
...
this.gridOptions.columnDefs = [
{
headerName: '', width: 100, cellRenderer: 'group',
// for parent row selection - checkboxes for parent rows
checkboxSelection: function(params) {
return params.node.canFlower;
},
cellRendererParams: { value: ' ' }, colId: 'PlusIcon', pinned: 'left', cellClass: 'center'
},
...
Listen to the rowGroupOpened event and set the row to selected:
// inside the ag-grid tag
(gridReady)="onGridReady($event)"
// inside the AppComponent class
onGroupOpened(event){
event.node.setSelected(true)
console.log(event)
}
plnkr example
I have requirement to get a drop down from a column which should have three values. I marked the column as editable with editable: true keyword, even then I am not able to edit. I just need a drop down with two values when i double click on the cell.
{headerName: "O", width: 70, valueGetter: this.geValue, editable: true, cellEditor: 'select',
cellEditorParams: {
values: ['Yes', 'No']}
}
I am using select here but not rick select because i am not using ag-grid enterprise. I am also setting these below properties for all the rows.
suppressCellSelection: true,
suppressMovableColumns: true,
suppressRowClickSelection: false,
I need help to find if I am missing anything here. I am not getting a drop down when I double click on cell.
I could finally figure out why I could not edit the cell even if I declare it editable. Because css is adding a class as shown below
<div class="ag-cell-no-focus ag-cell ag-group-cell ag-cell-not-inline-editing ag-cell-value" colid="O" style="width: 54px; left: 48px;"></div>
I have to remove ag-cell-not-inline editing class from the div. I am not sure how. Is there any option to remove default class from grid options?