It use to be easy to do this, but this was my first time generating the GridView dynamically. Each GridView cell has its own CSS Styling when created. In RowDataBound event I set up the highlighting as usual:
e.Row.Attributes.Add("onmouseover", "this.style.cursor='pointer';HilightRow(this);")
e.Row.Attributes.Add("onmouseout", "HilightRow(this);")
On the script side I have the following:
var curSelRow = null;
function HilightRow(row) {
var selRow = row;
var i;
.
.
if (selRow != null) {
curSelRow = selRow;
curSelRow.style.backgroundColor = '#FFEEC2';
}
}
I've traced this in the script and it works fine, there are no errors and when I do a watch on the row in question, it does correctly show the correct background color value (i.e. #FFEEC2), however, the hover does not change the color of the row. I'm puzzled. Not sure why this is happening and as I said, I've done this many times before without a problem but the gridviews were not dynamic in the past.
I'm not sure if you've shown all your code, but it appears that both the over and out function are setting the same bgcolor (#FFEEC2).
Both onmouseover and onmouseout are calling HilightRow(this). Does the initial onmouseover set the bgcolor?
A nicer solution I think is adding a class to the row.
Like class="Hilightrow".
And avoid script in the html-elements and separate structure from behaviour.
var hiliclass = "Hilightrow";
var trhilight = document.getElementById("mytable").getElementsByTagName("tr");
var len = trhilight.length;
for(var i=0;i<len;i++) {
if(trhilight[i].className == hiliclass) {
trhilight[i].onmouseover = function() {
trhilight[i].style.backgroundColor = "red";
}
....
}
}
And have the script inside a function and call it inside window.onload or
use a self-invoking function like this:
function highlightrows() {
..// my code
}();
I figured out the problem finally. What you have to do before you set the highlighting is to remove the currently applied Style to the row by setting the curSelRow.cells[i].style.backgroundColor = ''. Now you can highlight the row by using curSelRow.style.backgroundColor = '#FFEEC2', which will set the row to the highlight value.
In addition, you must save each cell's own style before you reset the values and restore each cells value when the cursor leaves that row. Otherwise you'll get white for each row that you hover over. Again, remember to reset the style for the highlighted row before you setting each cell's style to what it was originally.
What a pain!
Related
I am trying to figure out how to modify some properties of a section (such as text color or visibility) when clicking one element of a grid that has multiple colors (see image_1). I have already done the function to get the color of the clicked element but now I want to send this color value to the other section of the page (which has its own id).
when i use getElementById() function it returns null and i do not know how to solve it...
IMAGE_1
function getColor(cell) {
var actual = document.getElementById(cell.id);
color = actual.style.background;
idWrap = actual.id.substr(0,3);
alert("#"+idWrap);
var element = document.getElementById("#"+idWrap)
element.style.backgroundColor = 'red';
}
The problem is that you are passing the # to the document.getElementById(...) function. Simply remove it and it should work:
var element = document.getElementById(idWrap)
I'm able to render table cells using ngHandsOnTable.
On clicking a submit button, I want to be able to change the background color of a particular cell. Problem with ngHandsOnTable wrapper is, I don't have a way to access to 'td' property. (using which I can modify it like this td.style.background = "yellow" for example)
I tried using a customRenderer and tried to save td object in two dimensional array. But, if I save td object reference, background property change does not work.
I have happened to solve the problem by using afterRender callback. If I use td.style.background in this call, cells are changing its background color.
Not sure if some default callbacks were overwriting the cell background to white previously.
In NgHandsontable, I got hold of hot instance using afterInit callback.
refer my comments here: https://github.com/handsontable/handsontable/issues/3206
var afterRender= function (color) {
var td = hotInstance.getCell(row, col);
td.style.background = color;
}
var afterInit = function () {
hotInstance = this;
}
$scope.adjSettings = {
afterInit: afterInit,
afterChange: onCellEdit,
afterRender: afterRender
};
I'm using CKEditor and I want to indent just the first line of the paragraph. What I've done before is click "Source" and edit the <p> style to include text-indent:12.7mm;, but when I click "Source" again to go back to the normal editor, my changes are gone and I have no idea why.
My preference would be to create a custom toolbar button, but I'm not sure how to do so or where to edit so that clicking a custom button would edit the <p> with the style attribute I want it to have.
Depending on which version of CKE you use, your changes most likely disappear because ether the style attribute or the text-indent style is not allowed in the content. This is due to the Allowed Content Filter feature of CKEditor, read more here: http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter
Like Ervald said in the comments, you can also use CSS to do this without adding the code manually - however, your targeting options are limited. Either you have to target all paragraphs or add an id or class property to your paragraph(s) and target that. Or if you use a selector like :first-child you are restricted to always having the first element indented only (which might be what you want, I don't know :D).
To use CSS like that, you have to add the relevant code to contents.css, which is the CSS file used in the Editor contents and also you have to include it wherever you output the Editor contents.
In my opinion the best solution would indeed be making a plugin that places an icon on the toolbar and that button, when clicked, would add or remove a class like "indentMePlease" to the currently active paragraph. Developing said plugin is quite simple and well documented, see the excellent example at http://docs.ckeditor.com/#!/guide/plugin_sdk_sample_1 - if you need more info or have questions about that, ask in the comments :)
If you do do that, you again need to add the "indentMePlease" style implementation in contents.css and the output page.
I've got a way to indent the first line without using style, because I'm using iReport to generate automatic reports. Jasper does not understand styles. So I assign by jQuery an onkeydown method to the main iframe of CKEditor 4.6 and I check the TAB and Shift key to do and undo the first line indentation.
// TAB
$(document).ready(function(){
startTab();
});
function startTab() {
setTimeout(function(){
var $iframe_document;
var $iframe;
$iframe_document = $('.cke_wysiwyg_frame').contents();
$iframe = $iframe_document.find('body');
$iframe.keydown(function(e){
event_onkeydown(e);
});
},300);
}
function event_onkeydown(event){
if(event.keyCode===9) { // key tab
event.preventDefault();
setTimeout(function(){
var editor = CKEDITOR.instances['editor1'], //get your CKEDITOR instance here
range = editor.getSelection().getRanges()[0],
startNode = range.startContainer,
element = startNode.$,
parent;
if(element.parentNode.tagName != 'BODY') // If you take an inner element of the paragraph, get the parentNode (P)
parent = element.parentNode;
else // If it takes BODY as parentNode, it updates the inner element
parent = element;
if(event.shiftKey) { // reverse tab
var res = parent.innerHTML.toString().split(' ');
var aux = [];
var count_space = 0;
for(var i=0;i<res.length;i++) {
// console.log(res[i]);
if(res[i] == "")
count_space++;
if(count_space > 8 || res[i] != "") {
if(!count_space > 8)
count_space = 9;
aux.push(res[i]);
}
}
parent.innerHTML = aux.join(' ');
}
else { // tab
var spaces = " ";
parent.innerHTML = spaces + parent.innerHTML;
}
},200);
}
}
i need to change the color of kendo grids row by using it's index no.
i tried using this but nothing happened.
var gview = $('#SearchResult').data().kendoGrid;//searchresult is grid's id
var dataRows = gview.items();
var rowIndex = dataRows.index(gview.select());
gview.tbody.find("tr:eq("+rowIndex+")").css("background-color", "green");
It's not throwing any error in debugger but not giving any result.
You need to find Uid of a row by its index and find tr by its data-uid, check below function
function ChangeGridRowByIndex(index) {
var grid = $("#SearchResult").data("kendoGrid");
var gridData = grid.dataSource.view();
var currentUid = gridData[index].uid;
var currenRow = grid.table.find("tr[data-uid='" + currentUid + "']");
$(currenRow).addClass("red");
}
Hope this will help you :)
Given that kendo does not give an option to control the background color of a single row directly (that I know of). But you must apply the new color after the table is rendered and you might also need to apply it after every refresh of the table also (kendo should have events thrown for this). Once kendo finshes painting it, grab the table element in your page, by default kendo gives it a class="k-grid-content". Using jquery it would look something like this
var differentRowElement = $('.k-grid-content').find('tr').eq(index).css('background-color', 'red');
Tested it on http://demos.telerik.com/kendo-ui/grid/index running this in the console
$('.k-grid-content').find('tr').eq(3).css('background-color', 'red');
I have an element in my document that has a background color and image set through a regular CSS rule.
When a certain event happens, I want to animate that item, highlighting it (I'm using Scriptaculous, but this question applies to any framework that'll do the same).
new Effect.Highlight(elHighlight, { startcolor: '#ffff99', endcolor: '#ffffff', afterFinish: fnEndOfFadeOut });
The problem i'm facing is that after the animation is done, the element is left with the following style (according to FireBug):
element.style {
background-color:transparent;
background-image:none;
}
Which overrides the CSS rule, since it's set at the element level, so I'm losing the background that the item used to have...
What I'm trying to do is, in the callback function I'm running after the animation is done, set the style properties to a value that'll make them "go away".
var fnEndOfFadeOut = function() {
elHighlight.style.backgroundColor = "xxxxx";
elHighlight.style.backgroundImage = "xxxxx";
}
What I'm trying to figure out is what to put in "xxxx" (or how to do the same thing in a different way).
I tried 'auto', 'inherit', and '' (blank string), and neither worked (I didn't really expect them to work, but I'm clueless here).
I also tried elHighlight.style = ""; which, expectably, threw an exception.
What can I do to overcome this?
I know I can put a span inside the element that I'm highlighting and highlight that span instead, but I'm hoping I'll be able to avoid the extra useless markup.
Chances are you're not setting the style on the correct element. It's probably being set somewhere up the line in a parent node.
elHighlight.style.backgroundColor = "";
elHighlight.style.backgroundImage = "";
You can also remove all the default styling by calling:
elHighlight.style.cssText = "";
In any case, you'll still have to do this on the specific element that is setting these properties, which means you may need to do a recursion on parentNode until you find it.
Try
elHighlight.style.removeProperty('background-color')
elHighlight.style.removeProperty('background-image')
have you tried elHightlight.style.background = "";?
I have a highlighter code on my site and this works
function highlight(id) {
var elements = getElementsByClass("softwareItem");
for (var ix in elements){
elements[ix].style.background = ""; //This clears any previous highlight
}
document.getElementById(id).style.background = "#E7F3FA";
}
An HTML element can have multiple CSS classes. Put your highlight information inside a CSS class. Add this class to your element to highlight it. Remove the class to undo the effect.