Develop Reference

Style AG Grid's rowGroup

I am currently using AG GRID in my project and have implemented the RowGroup functionality for one of the columns,
Here's my code:
HTML
<div id="myGrid" style="height: 400px;width:80%; display:none" class="ag-theme-alpine">
</div>
JS:
var gridOptions_PortCd = {
suppressClickEdit: true,
columnDefs: [
{ headerName: "Col1", field: "Col1", rowGroup: true, hide: true },
{ headerName: "Val1", field: "val2", minWidth: 200 },
],
defaultColDef: {
sortable: true,
filter: true,
resizable: true,
},
autoGroupColumnDef: {
headerName: 'ColA',
minWidth: 200,
},
groupDisplayType: 'singleColumn',
animateRows: true,
};
I'm able to feed the grid some JSON data, and all looks great (I'm not including the rest of the code as I do not think it is relevant to the question).
Now what's happening is, the Grid looks totally great, however I want to be able to style to rowGroup row in my grid because it is dark and I'd want it to just to be plain white.
here's what mine looks like:
mygrid
Sorry for the link only (SO won't let me paste image).
In essence, how do I set the COLOR of the ROW GROUP to something different, I've tried things like:
.ag-theme-alpine .ag-row.ag-row-level-0 {
background-color: #dddbdb!important;
}
but that doesn't work. I'm not sure why it shows up as navy blue rather than just plain white or grey or something, but my hopes are to change it. Any pointers?
Goal is for it to look like this (In AG GRID website example)
Example
I've looked on AG GRID website's documenation but they do not provide info as how to style it.
EDIT: I changed it like so, and now it looks like this:
.ag-cell {
background-color: yellow !important;
}
updated

If you want to chage the color of cells in RowGroup,try to use:
.ag-cell {
background-color: #dddbdb !important;
}
result:
Update:
Try to change the background color of ag-cell-wrapper:
.ag-cell-wrapper {
background-color: #dddbdb !important;
}
result:

How we can format the box size of timeline highchart

I'm using HIghchart timeline in which I want to modify the specific box width and height.
Ex: I want to modify the width and height of the 3rd box containing some data info.
I have tried to inject below code in the 3rd loop but it doesn't work
dataLabels: {
allowOverlap: false,
format: '<span style="color:{point.color}"></span>
<span style="font-weight: bold; width:500px height:660px" > ' +
'</span><br/>{point.label}'
}
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/series-timeline/datetime-axis
Shown in figure I want to increase 3rd box width and height like a squared bracket.

You can define individual dataLabel for a point:
series: [{
...,
data: [..., {
x: Date.UTC(1966, 1, 3),
dataLabels: {
useHTML: true,
borderRadius: 0,
format: '<div style="height: 100px; width: 200px">{point.name}</div>'
},
name: 'First soft landing on the Moon'
}]
}]
Live demo: https://jsfiddle.net/BlackLabel/1apcewdt/
API Reference: https://api.highcharts.com/highcharts/series.timeline.data.dataLabels

Dynamically change datatables column width via API

I know we can set the columns width on a datatable via the columns.width option. But now I want to change that option on the xhr event.
Based on the ajax response I get from the server I want to hide/show a column and adjust the other columns width accordingly (they are all fixed size). Is there any way to achieve that via API?
I looked around all docs but seems it's not possible to achieve.

You cannot change settings once the dataTable is initalised. But if you are using column.width and you have turned autoWidth off, then the width of each column is easy to change. Here is an example :
var table = $('#example').DataTable({
autoWidth: false,
ajax: {
url: 'https://api.myjson.com/bins/avxod'
},
columns: [
{ data: 'name', width: 50 },
{ data: 'position', width: 50 },
{ data: 'salary', width: 50 },
{ data: 'office', width: 50}
]
})
$('#example').on('xhr.dt', function() {
$('#example thead th:eq(1)').width('400');
})
demo -> http://jsfiddle.net/cc7x6h64/
It works because column.width is injected into each <th> as style="width: xxx;"

Quill Link tooltip is invisible by default

Today I discovered Quill while looking for a rich text editor, and have tried following the documentation to get it working. So far, most of it works just fine.
My only problem is, that when I click on the Link icon, the tooltip doesn't appear due to the following class being mysteriously added to the ql-tooltip <div> element: ql-out-bottom.
This class adds the following CSS rule at quill.snow.css:391:
.ql-snow .ql-out-bottom, .ql-snow .ql-out-top {
visibility: hidden;
}
This class does not get added in Quill's documentation demo which really perplexes me..
Here's my current setup which is entirely copypastarino'd from the documentation:
var snowQuill = new Quill('.quill', {
placeholder: 'Skriv noget hyggeligt her...',
modules: {
toolbar: [
[{ header: [] }],
['bold', 'italic', 'underline', 'link'],
[{ color: [] }, { background: [] }],
[{ list: 'ordered' }, { list: 'bullet' }],
['clean']
]
},
theme: 'snow'
});
I'm using Quill v1.0.0-beta.11 and grabbing the JS and CSS from cdn.quilljs.com. Hope this post follows all formalities, as I dont post on Stackoverflow often.

For those having problems in Angular:
QuillModule.forRoot({
modules: {
toolbar: [
[{ header: [false, 1, 2] }],
["bold", "italic", "underline"],
["blockquote"],
['link', 'image', 'video'],
['clean']
],
},
bounds: "document.body",
theme: "snow"
})
The link maybe hidden in Angular, and changing the bounds here does not work because of the way Angular is generated. However, this will fix it:
<quill-editor bounds="self">
https://github.com/KillerCodeMonkey/ng-quill/issues/145

The two classes .ql-out-bottom and .ql-out-top are added when the tooltip would appear beyond the vertical bounds of the editor.

ExtJS 4.2.1 - border layout with dynamic height

i need a layout something like this:
https://fiddle.sencha.com/#fiddle/21i
I need the west filter panel to be collapsable and my content panel has a dynamic height.
A possibility could also be that the panel with the boarder layout has a full height and the overflow is just scrollable...
Though i dont get a valid border layout without setting a total height to my panel.
Please help
UPDATE
A nice workaround would be appreciated too...
EDIT
a new fiddler with dynamic generated content
https://fiddle.sencha.com/#fiddle/221

A quick and dirty workaround is to let render the body of the dynamic panel and adjust the height of your main container accordingly. You'll need to account for anything that adds height to the center panel's body.
For example, with your code, you can add a listener like this to your border layout container:
listeners: {
delay: 1,
afterrender: function() {
this.setHeight(
this.down('[region=center]').body.getHeight()
+ this.getHeader().getHeight()
// also account for borders, margins, etc. if needed
);
}
}
See your updated fiddle.
Update Toward a more robust solution
As I said in the comment, Ext4 makes it quite easy to make a panel collapsible with 'hbox' layout, and probably most other kinds.
Here's a good starter (fiddled there):
Ext.onReady(function() {
Ext.widget('viewport', {
layout: {
type: 'hbox'
,align: 'stretch'
}
,items: [{
title: 'left'
,width: 150
,resizable: true
,resizeHandles: 'e'
,style: {
borderRight: '2px solid #157FCC'
}
,collapsible: true
,collapseDirection: 'left'
,defaultType: 'button'
,layout: {
type: 'vbox'
,align: 'stretch'
}
,items: [{
text: "Foo"
},{
text: "Bar"
},{
text: "Baz"
}]
},{
title: 'center'
,flex: 1
,autoScroll: true
,tbar: [{
text: "Add content"
,handler: function() {
this.up('panel').add({
html: "<p>Lorem ipsum dolor sit amet...</p>"
})
}
}]
}]
});
});

You can use:
layout: {
type: 'vbox',
align : 'stretch',
pack : 'start'
}
in a container ( window, panel, ..)
and:
Flex: 1
in a component within, like a grid.
Works pretty good, in my experience. ( as suggested in the layout examples from the Sencha site and Forum remarks )

Remove the 'border' layout and replace it with
layout: {
type: 'hbox',
pack: 'start',
align: 'stretch'
},
Now you can remove the heights and it will fit dynamically