I have rendered a grid that way:
myGrid = new Slick.Grid("#grid", myDataView, myColumns, myOptions);
myDataView.beginUpdate();
myDataView.setItems(myDataset);
myDataView.endUpdate();
it is ok.
Now i need to change css class name in certain column. I do:
myGrid.onSort.subscribe(function(e, args) {
args.sortCol.headerCssClass = 'newClassName';
});
What i need to do now to see changes in DOM?
I found this solution:
myGrid.onSort.subscribe(function(e, args) {
args.sortCol.headerCssClass = 'newClassName';
var columns = myGrid.getColumns();
myGrid.setColumns(columns);
});
Is this solution most elegant? Is there a proper method?
Are you trying to change the style of the "sorted-by" header column. If this is indeed the case, why don't you modify the slick-header-column-sorted CSS selector?
For instance, the following rule would bold the title of the "sorted-by" header column:
.slick-header-column-sorted
{
font-weight: bold;
}
Related
I had used SpringRestDoc and want to collapse Table of Contents.
Below my index.adoc
= Service Rest Docs API Document
:doctype: book
:icons: font
:source-highlighter: highlightjs
:toc2: left
:theme: flatly
:toclevels: 1
:sectlinks:
[[introduction]]
== information
----
Spring Rest Document
----
...
Thanks,
The default template for Asciidoctor does not include functionality to expand/collapse the ToC. You would need to add your own CSS/JavaScript to achieve that goal.
The simplest way to do that is to use a "docinfo" file. See https://docs.asciidoctor.org/asciidoctor/latest/docinfo/ for details.
Here is a very simplistic implementation that demonstrates the concept:
In your document, in the header (say, just under the :doctype: attribute definition), add the line :docinfo: shared.
Create a file called "docinfo.html" in the same folder as your document; this file contains your custom CSS and JavaScript.
Add the following content to the docinfo.html file:
<style>
button.tocSwitch {
position: absolute;
top: 0;
left: 0;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
var target = document.querySelector('#header')
var button = document.createElement('button')
button.className = 'tocSwitch'
button.innerHTML = 'ToC'
button.addEventListener('click', function (e) {
e.stopPropagation()
var toc = document.querySelector('#toc')
var body = document.querySelector('body')
if (body.classList.contains('toc2')) {
body.classList.remove('toc2')
body.classList.remove('toc-left')
toc.style.display = 'none'
}
else {
body.classList.add('toc2')
body.classList.add('toc-left')
toc.style.display = 'block'
}
})
target.appendChild(button)
})
</script>
This content defines some CSS styling for a button, and some JavaScript the dynamically creates the button, adds the button to the header of the page, and an event listener such that when you click the button, the appropriate class name and CSS style adjustments are made to show/hide the ToC.
Good Day! Can the Column Header Color can be changed in Odoo?
Many Thanks
Good Day I found some solutions to my problem Just create a css file and JavaScript get class name of your Field..
Create first a JavaScript
Example:
openerp.your_module_name= function (instance) {
instance.web.list.columns.add('field.your_field_name', 'instance.your_module_name.your_field_name');
instance.your_module_name.your_field_name = instance.web.list.Column.extend({
_format: function (row_data, options) {
res = this._super.apply(this, arguments);
var amount = parseFloat(res);
return "<font color='#0000CD'>"+amount.toFixed(2)+"</font>";
}
});};
This Javascript I only Found it some Forums this code is to change the font color of some columns.
To Change the Column Header is to Call the your_field_name define in JavaScript and Just create a CSS File
CSS
Example:
.openerp .oe_list_your_field_name{
background-color: #FF3333;}
Hope to help with this code :D
I read all the posts regarding freezing column. But still I am unable solve my problem.
When I called setFrozenColumns my column has frozen but along with another column header is added to the grid. So the column headers one more than the columns. How to resolve this. Here is my over view of code.
makeJqueryGridInstance(grid, gridSettings);
window.prepareSortableColumns(grid);
makefrozenColumns(grid);
function makeFrozenColumn( grid )
{
var colmodel = grid.jqGrid('getGridParam', 'colModel');
if (colmodel[0].name === 'cb')
{
grid.jqGrid('setColProp', colmodel[0].name, { frozen: true });
grid.jqGrid('setFrozenColumns');
fixPositionsOfFrozenDivs.call(grid[0]);
}
}
function prepareSortableColumns(grid)
{
var gridSettings = grid.data('settings');
var gridId = gridSettings.gridId;
var columnHeaders = $("#" + "gview_" + gridId.replace("#", "")).find(".ui-jqgrid-htable > thead > tr > th");
var colModel = grid[0].p.colModel;
$.each(columnHeaders, function (index, columnHeader)
{
if (colModel[index].sortable == false)
{
$(columnHeader).find("div").removeClass("ui-jqgrid-sortable");
}
});
}
For the first time, it is working fine and the column has frozen.
But second time when the call made to prepareSortableColumns(grid), the columnHeader having one more than colModel (I debugged through devTools). So I am getting error for that particular columnHeader sortable is undefined.
Can anybody help me with this. Thanks in advance.
The code of prepareSortableColumns seems be wrong. Its not oriented on dives added in case of usage of frozen columns (see the answer for more details and use Developer Tools to examine the structure of the grids). You can try to use grid[0].grid.headers array instead of selecting columnHeaders in the way like you do this.
Additionally it's in general wrong to remove ui-jqgrid-sortable class. The meaning of the class will be frequently misunderstood because of the name. Non-sortable columns have to have the class too. What you need to do instead is to set CSS style cursor: default on the headers. See the old answer for the corresponding code example.
how can i add a font-size:bold to the groupingName using jqgrid ?
$("#ddGrupare").change(function () {
var groupingName = $(this).val();
if (groupingName != -1) {
$("#list2").jqGrid('groupingGroupBy', groupingName, {
groupOrder : ['desc']
});
}else{
$("#list2").jqGrid('groupingRemove');
}
});
this is my code and i want to add css to groupingName. How can i do that ?
Add this CSS to your stylesheet:
tr.jqgroup td {
font-weight: bold !important;
}
Make sure your stylesheet where you define this CSS rule is included AFTER the jQGrid stylesheet.
Add a style via the .jqgroup class that is applied to your group headers.
I just wonder if anyone know if it's possible to add a break point on a specific css property on a specific element in Chrome Dev Tools, i.e when #mydiv's height property has changed, break.
You can only break on all inline style (<div style="height: 20px; width: 100%">) changes using the Elements panel context menu's Break on... | Attributes modifications.
You can do it this way:
function observe(el, property) {
var MutationObserver = window.WebKitMutationObserver;
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
console.log('old', mutation.oldValue, 'new', mutation.target.style.cssText, 'mutation', mutation);
if (mutation.attributeName == property) debugger;
});
}
);
var config = {
attributes: true,
attributeOldValue: true
}
observer.observe(el, config);
}
Then you can set breakpoint on style change like this: observe(element, "style")
It will break when it changes and also print in console old and new value.