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:
Related
There is not a single element in that DOM I haven't tried setting color and background-color to non-black for. And #piechart_3d-1 has no styling at all.
So why does the center turn black? And how can I stop that from happening?
new Chartist.Pie('#piechart_3d-1', {
series: [{ meta: 'Active|' + numAllMachines, value: numActive },
{ meta: 'Standby|' + numAllMachines, value: numStandby }]
}, {
donut: true,
donutWidth: '40%',
showLabel: false,
width: '95%',
height: '95%'
});
I know this is old, but I had the same problem and no one seems to have posted the solution anywhere. This is an issue with the svg fill. The black won't show up on the css inspector so it's hard to figure out. The fix is to add a fill to the path. Something like this:
.ct-series path {fill: white !important;}
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;"
I have placed the following and everything is working great. I have a grid on the left and a grid on the right, but they placed side by side, I would like a thin line between thing. Is this possible?
{
layout: {
type: 'hbox',
pack: 'start',
align: 'stretch'
},
items: [
{
xtype: 'first-grid-panel',
flex: 1
},
{
xtype: 'second-grid-panel',
flex: 1
}
]
}
I was hoping to placer some kind of vertical line between them, very thin.
Or other option would be to place a right border on the "left" grid panel and a left border on the "right" grid panel. I am unsure whether that would work.
I tried setting frame: true, but this puts a big ugly frame around it.
Setting a border as you mentioned is possible, for example:
items: [{
style: {
borderRight: 'solid 1px red'
}
},{
style: {
borderLeft: 'solid 1px green'
}
}]
Example: https://fiddle.sencha.com/#fiddle/umu.
(You better do this using a css class)
I am using nggrid for my data representation and one of the column holds address which is sometimes multiline and long. I want my row to be multiline with size depending on number of lines address is distributed in. How can I have an editable row. I am using nggrid 2.012
"devDependencies": {
"ng-grid": "~2.0.12"
}
I have paging implemented
$scope.gridOptions = {
data: 'myData',
enablePaging: true,
showFooter: true,
totalServerItems: 'totalServerItems',
pagingOptions: $scope.pagingOptions,
filterOptions: $scope.filterOptions,
plugins: [new ngGridFlexibleHeightPlugin()],
columnDefs: [{field:'client_order_id', displayName:'Order Id'}, {field:'customer_name',displayName:'Customer Name'},
{field:'customer_phone', displayName:'Phone Number'},{field:'address', displayName:'Address'}]
};
Following is my current view
<section data-ng-controller="OrdersController" data-ng-init="find()">
<div class="page-header">
<h1>Orders</h1>
</div>
<div class="gridStyle" ng-grid="gridOptions"/></div>
</section>
Want to also have multiline addresses
another common way is to show tooltip with whole long text when mouse hovering on the cell:
columnDefs: [
{
field:'address',
displayName:'Address',
cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><span ng-cell-text title="{{COL_FIELD}}">{{COL_FIELD}}</span></div>'
}
]
you can not have variable rowHeight because ngGrid uses the fixed rowHeight to do virtual scrolling.
you will need to hack into ngGrid style to fix this
follow this way to make a scrollbar in cell to view the whole address
columnDefs: [
{
field:'address',
displayName:'Address',
}
]
overwrite ngGrid style in your own style :
.ngCellText {
overflow: auto;
text-overflow: auto;
}
You can change the row height by setting 'rowHeight' property.
columnDefs: [{
field:'address',
displayName:'Address',
rowHeight: 60,
cellClass: 'wrap-text'
}
]
You can use it with a custom template to show a tooltip as suggested earlier.
Use it with a custom css class.
.wrap-text {
white-space: normal;
}
I need to change the color of the text below. Everything else in the style field works except for the text color.
Can someone tell me what I am doing wrong here?
{
xtype: 'text',
text: "Logged in as:",
textAlign:'left',
style : "color:#3E546B;font-style:italic;font-family: tahoma, arial, verdana, sans-serif;font-size: 11px;",
width: 140,
handler: function() {
document.location.href="";
}
},
EDIT. I am not using a form panel, i am using xtype:text inside a container.
http://jsfiddle.net/nCkZN/4/ (this still uses form panel. But this is to show the text color does not change)
use fieldStyle instead of style
demo
Update
I confused 'text' and 'textfield'.
Now I've got it. The only way to change font style of Ext.draw.Text is to configure it with styleSelector (which has to refer to a valid css rule) like it is done in this demo.
Use The Fill in the Style As below use the type as text (Sprite) instead of using the Xtype as text
Ext.create('Ext.draw.Component', {
renderTo: Ext.getBody(),
width: 200,
height: 200,
items: [{
type: "text",
text: "Hello, Sprite!",
fill: "green",
font: "18px monospace"
}]
});