I have a column with value like this 'A-E'. I want to apply css for each alphabet like this
Padding: 5px;
background-color: red;
I have tried cellrenderer but it does not seems to work. I'm working on angular cli 6
I got the result after several attempts please see the result
What I did is in the colDefs of the column where css was to be applied I added an extra property as below:
cellRenderer: function(params) {
params.value = 'A-B';
const v1 = params.value.substring(0, 1);
const v2 = params.value.substring(2);
return '<span style="background-color:#e585a2;padding:5px;border:1px solid black;">' + v1 + '</span>' +
' <span style="background-color:#42c985;padding:5px;border:1px solid black;">' + v2 + '</span>';
}
Note: I manipulated the params.value because data like that will be coming from my api later after modifications.
Related
I'm trying to set an input field to the value of a jQuery variable but it's refusing to cooperate. Can someone please tell me what I'm doing wrong? Essentially, I'm trying to get equipment failure counts to display in an input textbox so I can write the value back to a table. Each failure counts as 1 and is added to a total (truckFailsTot variable) when users click a Y/N radio button next to each type of failure. The example below just includes one failure for brevity.
HTML
div class="form-row">
<div class="form-group col-lg-12"><label class="col-form-label" for="TruckFailCount">TruckFailCount</label>
<input class="form-control" ${disabled( 'TruckFailCount')} id="TruckFailCount" maxlength="13" name="TruckFailCount" title="truckFailCount" type="text" value="${row.truckFailCount?html}" />
</div>
</div>
jQuery - I've commented out my failed attemps below. It seems like such a simple thing, yet nothing is working.
jQuery('body').on("change",'#TruckAirCompressor',function(){
if (this.value == "Fail") {
fail_TruckAirCompressor = 1;
}
else if (this.value == "Pass") {
fail_TruckAirCompressor = 0;
}
else {
}
truckFailsTot = fail_TruckAirCompressor + fail_TruckAirLines + fail_TruckBattery
+ fail_TruckBeltsHoses + fail_TruckBody + fail_TruckBrakesAccessories + fail_TruckBrakesParking
+ fail_TruckBrakesService + fail_TruckClutch + fail_TruckCouplingDevicesHitch
+ fail_TruckDefrosterHeater + fail_TruckDriveLine + fail_TruckExhaustMuffler
+ fail_TruckFluidLevels + fail_TruckFuelTanks + fail_TruckHorn + fail_TruckLights
+ fail_TruckMirrors + fail_TruckSafetyEquipment + fail_TruckSteeringMechanism
+ fail_TruckTiresRimsWheels + fail_TruckWindows + fail_TruckWindshieldWipers;
// var t = truckFailsTot;
// $('#TruckFailCount').value(t);
// document.getElementById("#TruckFailCount").innerHTML=t;
// var val1 = truckFailsTot;
// $('#TruckFailCount').val(val1);
// var fooBar = 1;
// $('#TruckFailCount').val(fooBar);
});
Thanks in advance!
I stumbled upon the correct syntax needed to assign a jQuery variable to an input text field and wanted to update my question in case someone else runs across a similar issue. All the jQuery documentation I'd come across recommended setting the value of the input field using .val(). Doing so didn't work for me, but the below code did.
var truckFailsTot;
truckFailsTot = fail_TruckAirCompressor + fail_TruckAirLines + fail_TruckBattery;
document.getElementById("TruckFailCount").value = truckFailsTot;
If I set the font like so on a label:
<label id="lblrptgenprogress" class="invisible redfont">Report generation list is being constructed...</label>
...it works (I see the text in red after I remove the "invisible" class).
However, if I try to set the color like so in another label:
<label id="testsettingproduceusage" class="midnightbluefont"></label>
...with no text in the label to begin with, but adding it dynamically later, it doesn't work - the dynamically added text remains the default black. Why? How can I get it to respect the assigned class?
I give the label some text in an AJAX call this way:
. . .
success: function (returneddata) {
var nextgendate = returneddata.testsettings.NextGenDate;
var nextfromdate = returneddata.testsettings.NextFromDate;
var nexttodate = returneddata.testsettings.NextToDate;
var verbiage = 'If you save the current configuration, the Produce Usage report would next be sent on ' +
nextgendate +
' and emailed to ' +
addressees +
'; the report would cover data from ' +
nextfromdate +
' to ' +
nexttodate;
$("#testsettingproduceusage").append(verbiage);
document.body.style.cursor = 'pointer';
},
. . .
The CSS is:
.redfont {
color: red;
}
.midnightbluefont {
color: midnightblue;
}
UPDATE
Specificity it is, as can be seen by the comments:
.midnightbluefont {
/*color: midnightblue;*/ <= doesnt' work
/*color: #191970;*/ <= doesn't work
/*color: #191970 !important;*/ <= works
color: midnightblue !important; <= works
}
The brute force way to work it is either this:
.midnightbluefont {
color: midnightblue !important;
}
...or this:
.midnightbluefont {
color: #191970 !important;
}
I'm struggling making the following razor snippet working
<ul>
#foreach (var lang in umbraco.cms.businesslogic.language.Language.GetAllAsList())
{
var url = Model.Content.Url + "?lang=" + #lang.CultureAlias;
if (currentCulture.TwoLetterISOLanguageName.Equals(lang.CultureAlias))
{
<li class="active">#lang.FriendlyName</li>
}
else
{
<li>#lang.FriendlyName</li>
}
}
If I remove the variable assignment between the foreach and the if it works fine, but otherwise I get a compilation error (like the razor parser understands a } as markup and tries to render it).
Any way to solve this?
Think the issue is in this line
var url = Model.Content.Url + "?lang=" + #lang.CultureAlias;
You don't need the additional # since you are already in 'code' mode
So try changing #lang.CultureAlias to lang.CultureAlias
You've got too many #s here:
var url = Model.Content.Url + "?lang=" + #lang.CultureAlias;
should become:
var url = Model.Content.Url + "?lang=" + lang.CultureAlias;
I am trying to prepare sentence using html tags, but it fails to render HTML, instead it display with escape characters.
<p>
{{ activity | prepareSentence }}
</p>
Created custom filter to use in polymer template.
prepareSentence: function(activity) {
var sentence = [];
if (1) {
sentence.push('<a href="/user/'
+ activity.from_user.entity_id + '/'
+ activity.from_user.name + '">You</a>');
sentence.push(' are following ');
sentence.push('<a href="/user/'
+ activity.to_entity.entity_id + '/'
+ activity.to_entity.name + '">'
+ activity.to_entity.name + '</a>');
}
return sentence.join(' ');
}
Current Output:
name1 are following name2
Expected Output:
[You][1] are following [name2][1]
The TemplateBinding subsystem contains an HTML filter to protect developers against XSS attacks. Therefore, inserting HTML (as opposed to plain text) into DOM has to be done manually.
For example:
<p id="sentence"></p>
...
activityChanged: function(old, activity) {
// build html
this.$.sentence.innerHTML = html;
}
You now have a vulnerability, so make sure you screen the source data.
How can I get access and change CSS like the font color in completely dynamically generated HTML out of XML, if I cannot use an ID as I do not know in advance how many of the same HTML-tags will be generated and which of two different (red/green) colors it will need? (I am new here and very new in JS)
Data will be generated and collected on the server. I get them back and sort them in a "fieldset" and further more in a "collapsible". Data "var a, b and c" come together in one line (fieldset) and should be in a specific font color. So for "var d" there will be a "xx" or "yy" coming back from XML for this font color and be saved in "var d" and therefore the font color should be "red" or "green".
Part of my script in short:
function addPart(currentIndex,currentPart)
{
var a = $(currentPart).find("a").text();
var b = $(currentPart).find("b").text();
var c = $(currentPart).find("c").text();
var d = $(currentPart).find("d").text();
if(d === "xx") {
$("div.productColor").css({"color":"green"});
} else {
$("div.productColor").css({"color":"red"});
};
$("#shoppingTableDiv").append (
"<div data-role='collapsible'>"
+ "<h3>"
+ "<div class='productColor'>"
+ "<fieldset class='ui-grid-b'>"
+ "<div class='ui-block-a'>"
+ a
+ "</div>"
+ "<div class='ui-block-b'>"
+ b
+ "</div>"
+ "<div class='ui-block-c'>"
+ c
+ "</div>"
+ "</fieldset>"
+ "</div>"
+ "</h3>"
+ "</div>");
$('#shoppingTableDiv').collapsibleset('refresh');
}
I didn't fully understand how you want to color your results, but I think you can use your fieldset classes.
For example:
.ui-grid-b div { color: red; }
.ui-grid-c div { color: green; }
If you don't know how many fieldsets you're going to have and you can't use the fieldset classes you showed in your code example, you might find the nth-child selector useful.
Maybe something like this:
fieldset:nth-child(2n) div { color: red; }
fieldset:nth-child(2n+1) div { color: green; }