I'm trying to look through the jquery-ui.js file at the autocomplete function. I have autocomplete working just as I would like, however I would like to add a feature. I would like the color of the results to change for that single line item based on the value.
For example if the text value contains the substring test, the color of the text should be red instead of what is defined using the css color.
Found the answer. I had to edit this part of the code in the auto complete section of the file. I added a check that looked at the item.label value, if the value called for a color change I added the red style to the anchor tag (style="color:red;").
_renderItem: function( ul, item ) {
return $( "<li>" )
.append( $( "<a>" ).text( item.label ) )
.appendTo( ul );
},
Related
I have a Tabulator (4.9.3) with values that use an editor of type text. As I tab through the table, I want each value to be selected so I can overwrite it without having to clear it first. I have tried putting the usual range selection code into the cellEditing callback and the Tabulator source code where the input gets created. Here is one variation of the code (I can't show them all because the node differs based on context):
try {
if (document.selection) {
// IE
var range = document.body.createTextRange();
range.moveToElementText(input);
range.select();
} else if (window.getSelection) {
var range = document.createRange();
range.selectNode(input);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
}
} catch (e) {console.log(e);}
If I double-click on the cell, the value selects as desired. How can I get this to work with keyboard navigation as well?
Since the editor is not assigned an id, finding a selector that could find it reliably was problematic without editing the source code. Since I was going to have to edit the source, I ended up adding the following line to the onRendered function of the input element under Edit.prototype.editors.
input.select();
Working with Scala.js, I have created some SVG elements like Text, Line, Rect, and now I am trying to set the style attribute with code like this, where element is of type svg.Stylable:
element.style.fillOpacity = "0.0"
element.style.stroke = "yellow"
element.style.strokeWidth = "2"
I tried different variations of above code, but the desired style does not realize, and when I inspect the element in the Browser, the style attribute is an empty String (""). I am able to set other attributes with no problem (e.g. x, y, width, height).
How do I set the style? Thanks!
For SVG modications in Scala.js I normally use the d3 library (scala.js facade: https://github.com/spaced/scala-js-d3).
Then u can use:
d3.select("#mySvgElement").attr("style", "stroke:yellow; stroke-width:2") // etc.
*Edit: mySvgElement would be the ID of the element i want to change the style for. You can also other different kind of selectors.
I have this code in my Dialog:
//other code
dialog.addText(strFmt("Delete this field's value: %1?", MyTable.FieldTable));
//other code
I have an output looklike:
I know the strUpr function:
dialog.addText(strFmt("Delete this field's value: %1?", strUpr(MyTable.FieldTable)));
Does there exist a method or function to convert only the FIELDValue to bold text?
You can set the bold property to 7 on FormBuildStaticTextControl.
Control can be obtained via the control method on DialogText returned by addText method.
The integer that is returned contains the weight of the font as follows:
0 Use the default font weight.
1 Thin.
2 Extra-light.
3 Light.
4 Normal.
5 Medium.
6 Semibold.
7 Bold.
8 Extra-bold.
9 Heavy.
Example:
Dialog dialog = new Dialog();
DialogText dt = dialog.addText("Test");
FormBuildStaticTextControl txtCtl = dt.control();
txtCtl.bold(7);
dialog.run();
A working example using addFieldValue (similar to Matej's solution):
Dialog dialog = new Dialog("Dialog example");
DialogField f1 = dialog.addFieldValue(extendedTypeStr(String30), 'Value', "Delete this field's value?");
FormBuildStringControl c1 = f1.control();
c1.allowEdit(false);
c1.skip(true);
c1.bold(7);
c1.viewEditMode(ViewEditMode::View);
dialog.run();
I doubt that Dialog class has the ability to display bold text, at least I haven't seen such, neither did I find any method to format text in a dialog. One solution would be to create custom form that looks like a dialog box, but I think it is redundant.
Regarding uppercase, you can use strUpr (link) method:
//other code
dialog.addText(strUpr(strFmt("Delete this field's value: %1?", MyTable.FieldTable)));
//other code
i need to insert a title (not a tooltip, a text on the top) inside the svg rendered by Dojo. How can i do that?
Here my Dgauge:
http://jsfiddle.net/MacroX/pZU93/1/
PD: The line
gauge.title = 'Test Report'
doesnt show the title
EDIT: The question is regarding a label at the top of the gauge, not the title attribute as I originally thought.
You can use a TextIndicator much like you did for the value label below the needle, but you can set a labelFunc property that defines a function called to set a label and displays whatever string is returned from it.
var labelText = new TextIndicator();
labelText.set('x', 73.3);
labelText.set('y', 55);
labelText.set('labelFunc', function() {return 'Test Report';});
gauge.addElement('labelText', labelText);
Here is a modified version of your fiddle with the title text in place.
Original answer remans below in case someone else needs it
Pass the title in when you create the gauge:
var gauge = new CircularLinearGauge({
title: 'Test Report'
}, dojo.byId("gauge"));
You can also use set to set it after the gauge is created:
gauge.set('title', 'Test Report'); //does work :)
The reason for this is that the gauge widget needs to set the text you give as the title on a specific element within the widget's template. gauge.title just sets the title property of the gauge widget, and the widget has no idea when or with what value that property is being set and thus is not able to make it show up as a title attribute on the gauge.
Finally i got a way to resolve this, and this is useful when you need to personalize your dgauge. Here the example:
http://jsfiddle.net/MacroX/THJqV/
What i did is basicly create a gauge, fill it with background white, and then add elements inside
var baseWidth = 400;
gauge.addElement("background", function (g) {
var auxHeight = baseWidth * objGauge.offsetHeight / objGauge.offsetWidth;
g.createRect({
width: 400, height: auxHeight
//width: 400, height: 300
}).setFill("#FFF");
});
I dont know if is the best way, but works and i didnt find something similar in other sites
And what I think is great, this support multiple chart dgauges in only one SVG
I hope this will useful to someone else
I have some CSS I am applying to a view header and view column.
Here is a sample
.viewHeaderName {
width:235px;
background-color:rgb(192,192,192);
color:rgb(0,0,0);
font-family:Trebuchet MS,sans-serif;
font-size:10t;
font-weight:bold;
text-align:left;
}
.viewColumnName {
font-family:Trebuchet MS,sans-serif;
font-size:9pt;
}
Basically I am trying to set the width of the column to what I want. I don't want the text in the header or in the column to wrap. This works perfectly for categorized views for all the columns.
But for simple sorted views, the header is being offset to the right from the text in the column several characters.
If I remove the width parameter in the CSS then everything lines up fine but I don't get the width I want.
you can use td/th nowrap attribute described here
http://www.w3schools.com/tags/att_td_nowrap.asp
or
use white-space element in css described here
http://www.w3schools.com/cssref/pr_text_white-space.asp
white-space:nowrap;