I would like to change "config" values in existing Jodit editor instances. I have following code:
var editor = Jodit.make(textarea,{allowResizeY: false, showCharsCounter: false,
showWordsCounter: false,
showXPathInStatusbar: false,
inline: isDisabled,
defaultLineHeight: 1,
minHeight: 40,
style: { fontFamily: 'monospace'}});
Let's say later I would like to add and have effect: style: { backgroundColor: "white" } or minHeight: 100. What should be correct approach to do that ?
Related
I am trying to create a multiline footer with pdfmake; what I was able to do until now:
const docDefinition = {
footer: [
{
stack: [
{ text: "Line 1" },
{ text: "Line 2" },
{ text: "Line 3" },
{ text: "Line 4" }
], style: 'footer'
}
],
styles: {
footer: {
fontSize: 6, bold: true, alignment: 'center'
}
}
};
While this creates what I want, the style is not correct. As soon as I increase the font size, the bottom line starts to disappear. If I set the font size to 12, only the first two lines appear in the generated PDF on the server-side.
What change do I need to make here?
You just need to add margin to the page and you can accommodate as many lines as you want. e.g. Enter the code below in pdfmake playground: http://pdfmake.org/playground.html
// playground requires you to assign document definition to a variable called dd
let textFooter = `
A 12.4% discretionary service charge will be added to your bill. All prices are inclusive of VAT. Thank You!\n\n
This is line 2 - 263139\n
Line 3 comes here\n
Go big or go home!!!
`;
var dd = {
header: function(currentPage, pageCount, pageSize) {
return [
{ text: 'simple text\naaa\nbbb\nccc\nddd', alignment: 'center', fontSize: 9 },
]
},
footer: function(currentPage, pageCount, pageSize) {
return [
{ text: textFooter, alignment: 'center', fontSize: 9 },
]
},
// margin: [left, top, right, bottom]
pageMargins: [ 40, 60, 40, 100 ],
content: [
'First paragraph',
'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines'
]
}
In the code above, I have set margin bottom to 100 which gives us space to include 4 lines.
I have a basic Rect shape like this:
var rectShape = new joint.shapes.basic.Rect({
position: { x: 60, y: 10 },
size: { width: 160, height: 35 },
attrs: {
rect: {
fill: '#F5F5F5'
},
text: {
fill: '#FC8A26',
'font-size': 12,
'font-weight': 'bold',
'font-variant': 'small-caps'
}
}
});
I use clone() to create more rectangles like that one:
var rect1 = rectShape.clone().translate(520, 10).attr('text/text','rect1');
I want to have 2 different words inside the rect, one at the size 12 and the other at the size 8. Any idea on how I can do that?
Thank you!
you need to create a custom shape with new SVG markup containing a text element that contains a <tspan> for each word that you want. You could adapt the markup from the standard Rect element. Give each element a different class name, for example replace the <text/> element in the Rect markup with <text><tspan class="word1"/><tspan class="word2"/></text>. The shape definition would look like this:
joint.shapes.my.twoTextRect = joint.shapes.basic.Generic.extend({
markup: '<g class="rotatable"><g class="scalable"><rect/></g><text><tspan class="word1"></tspan> <tspan class="word2"></tspan></text></g>',
defaults: joint.util.deepSupplement({
type: 'my.twoTextRect',
attrs: {
rect: { fill: 'white', stroke: 'black', 'stroke-width': 1, 'follow-scale': true, width: 160, height: 35 },
text: { ref: 'rect' },
'.word1': { 'font-size': 12 },
'.word2': { 'font-size': 8 }
},
size: { width: 160, height: 35 }
}, joint.shapes.basic.Generic.prototype.defaults)
});
Then to create your shape instance:
var rectShape = new joint.shapes.my.twoTextRect();
To set the text of the <tspan> SVG elements you can use
rectShape.attr('.word1/text', 'word 1');
rectShape.attr('.word2/text', 'word 2');
This results in an element that looks like this:
You can clone the element like this:
var clone = rectShape.clone().translate(520, 10).attr({'.word1': {text: 'clone1'}, '.word2': {text: 'clone2' }});
And this makes a new element:
I'm trying to specifically target the first and last x-axis labels, which are text elements, and alter their attributes.
To preface this issue, I was trying to keep the first and last x-axis labels within the confines of the Highcharts container. Unfortunately, they are cutting off in the UI.
This is my configuration:
xAxis: [{
type: 'datetime',
showFirstLabel: true,
showLastLabel: true,
labels: {
step: 3,
formatter: function(){
return options.labels[this.value];
},
style: {
fontSize: '10px',
color: '#9c9c9c'
},
// x: 5,
y: 10
},
startOnTick: true,
// lineColor: 'transparent',
tickLength: 0,
minPadding: 0,
maxPadding: 0
}],
The step key is causing this I realize. Otherwise, I would be able to use overflow:justify, but I wanted the step. So, I then decided that perhaps altering the SVG would be a good solution. It worked when the chart is first loaded, but it does not work when being redrawn.
This was my solution on 'load', which I'd like to replicate on 'redraw':
Highcharts.Chart.prototype.callbacks.push(function(chart){
$('.highcharts-axis-labels.highcharts-xaxis-labels text').first().attr('x', 25);
$('.highcharts-axis-labels.highcharts-xaxis-labels text').last().attr('x', 813);
});
You should configure these callbacks in the options of your chart. It's cleaner that way:
function moveLabels(){
$('.highcharts-axis-labels.highcharts-xaxis-labels text').first().attr('x', 25);
$('.highcharts-axis-labels.highcharts-xaxis-labels text').last().attr('x', 813);
}
$('#container').highcharts({
chart: {
events: {
load: moveLabels
redraw: moveLabels
}
}
},
...
I'm trying to search for a particular field based on what a user searches in a textfield. For instance:
items: [
{ xtype: 'panel', padding: 5, height: 500, width: '35%',
items: [
{ xtype: 'textfield', padding: 5, region: 'west', fieldLabel: 'Criteria 1', itemId: 'criteria_1' }, ...
And here's code from my view class:
store.filter('KBE_ID', '#criteria_1');
I want to return a filtered search that uses the value of my textfield. Could this be done by giving it an itemId?
Get your reference to the field using the itemId, then do the filter using getValue():
var searchField = myPanel.down('#criteria_1');
store.filter('KBE_ID', searchField.getValue());
I am facing issue while loaidng the data in JQGrid at a later stage in place of at the time of ceating grid. I am using filter toolbar for search.
following is the code I am using:
Creating Grid
jQuery("#list").jqGrid({
datatype: 'local',
colNames: [my col names],
colModel: [my col model],
jsonReader: {
root: "rows",
page: "page",
total: "total",
//records: "records",
repeatitems: false
},
height: 300,
viewrecords: true,
gridComplete: this.onGridComplete,
ondblClickRow: this.rowDblClick,
onSelectRow: this.selectRow,
headertitles: false,
loadtext: "Loading...",
sortable: true,
altRows: true,
loadonce: true,
rowNum: 100,
pager: '#pager',
root: "rows",
rowList: [100, 200, 300],
pagination: true,
ignoreCase: true
})
Load data at later stage
if(gridDataStr != "none") // gridDatStr has data
{
grid.initialize(); // create the grid
var myjsongrid = JSON.parse(gridDataStr);
grid.table[0].addJSONData(myjsongrid);
grid.table.jqGrid('setGridParam',{datatype:'json', data:myjsongrid}).trigger('reloadGrid');
if (myjsongrid["rows"].length > 1)
{
grid.table.filterToolbar({
stringResult: true,
searchOnEnter: false
});
}
}
However if I load the same data at the time of creating the grid with datatype:json and using some valid url, searching is working well.
Any suggestions?
The method addJSONData can not be used to work with the jqGrid having the 'local' datatype.
You can use addRowData and to use localReader instead of jsonReader or set data parameter of jqGrid with respect of setGridParam method and then call jQuery("#list")[0].refreshIndex() (see here) and reload the grid.