We Keep Coding

How to add custom styles

I can’t add my own style, when I reload the page in the browser my styles do not add
CKEDITOR.addCss('a{color: inherit; text-decoration: none}')
CKEDITOR.stylesSet.add([{
name: 'My Custom styles',
element: 'span',
styles: {
'padding': '10px',
'border-radius': '8px',
'background-color': '#6950ab',
'color': '#ffffff!important',
'display': 'inline-block'
}
}])
CKEDITOR.replace('container');
</script>```

In a classic editor (with toolbar) you may set config.contentsCss
CKEDITOR.stylesSet.add('myStylesComboBox',[{
name: 'my span style',
element: 'span',
attributes: {
'class': 'box1',
}
},
{
name: 'my span2 style',
element: 'span',
attributes: {
'class': 'box2'
}
}]);
var ContentsCss = [
'span.box1{padding:10px;border-radius:8px;background-color:#6950ab;color: #ffffff!important;display:inline-block}',
'span.box2{padding:10px;border-radius:8px;background-color:#6770ab;color: #ffffff!important;display:inline-block}'];
CKEDITOR.replace( 'editor1',{
stylesSet: 'myStylesComboBox',
contentsCss: ContentsCss
} );
Example:
https://codepen.io/edsonperotoni/pen/JjjvZxz
References:
https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-contentsCss
https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-stylesSet

Please use the following rule while styling in CKEditor for specific use cases (shared by CKEditor support):
Preview & Print
please change default styling either by changing the rules in contents.css file directly or by providing a different file with CKEDITOR.config.contentsCss option https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-contentsCss
Export to PDF plugin:
please provide different styling using https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-exportPdf_stylesheets
OR change default styling with CKEDITOR.config.contentsCss option https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-contentsCss or extended it with the CKEDITOR.addCss() https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR.html#method-addCss.
You can refer to the below link if you are having trouble loading the CSS file defined in the configuration - contentsCss:
ckeditor - contentsCss not loading custom styles

How to add href inside node in Gojs?

I created a diagram with GoJS.
I need that every node will contain a href.
var template = GO(go.Node, "Auto", {
desiredSize: new go.Size(width, height)
},
GO(go.Shape, shapeMap.getValue(shape), new go.Binding("fill", "fill")),
GO(go.TextBlock, {
textAlign: 'center',
margin: 4
}, new go.Binding("stroke", "color"), new go.Binding("text", "text")));
var node = {
key: src,
color: textColor,
fill: backgroundColor,
category: shape,
text: "www.google.com"
};
diagram.model.addNodeData(node);
I tried to insert a Html content.
var node = {
key: src,
color: textColor,
fill: backgroundColor,
category: shape,
text: <a href='www.google.com'>href</a>
};
But it's not working. How can I do that?

A TextBlock does not render HTML, but just a string as a block of text.
If you put the URL in your node data, you can declare a GraphObject.click event handler that opens a window.
GO(go.Node, . . .
{
click: function(e, obj) {
window.open("http://" + encodeURIComponent(obj.part.data.url));
}
},
. . .
GO(go.TextBlock,
{ textAlign: "center", margin: 4 },
new go.Binding("stroke", "color"),
new go.Binding("text", "url"))
),
. . .
)
This is for node data such as:
{ url: "www.example.com" }
You can use a conversion function on the TextBlock.text binding to show a different string than the data.url property value.
It is also demonstrated by the sample at http://gojs.net/latest/samples/euler.html

Add click event to the TextBlock, and in the click function - open new web page.
GO(go.Node,...
GO(go.TextBlock,{textAlign: 'center', click: function(e, obj) {window.open(obj.part.data.url)}}),...);

dojo data grid in custom widget is not rendering

hi all i have created a custom widget which in the future will contain more than a data grid however i have had considerable difficulty trying to get the data grid to render.
I have no errors and all the following seems to be being called as i suspect; perhaps it is an asynch issue?
Any help on this would be great, my code as followed.
AssetGridWidget.js
define([
"dojo/_base/declare",
"dojo/_base/fx",
"dojo/_base/lang",
"dojo/dom-style",
"dojo/mouse",
"dojo/on",
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",
"dojo/text!./templates/AssetGridWidget.html",
"dojox/grid/DataGrid",
"dojo/data/ItemFileWriteStore",
"dojo/store/Memory",
"dojo/data/ObjectStore"]
, function(declare, baseFx, lang, domStyle, mouse, on, _WidgetBase, _TemplatedMixin, template, DataGrid,ifilereadstore, Memory, ObjectStore){
return declare([_WidgetBase, _TemplatedMixin], {
widgetInTemplate : true,
templateString: template,
postCreate: function(){
this.layout =
[
{ name: 'Name', field: 'name', width: '100px' },
{ name: 'Color', field: 'color', width: '100px' }
];
this.data = {
data :
{items :[
{ name : 'John Doe', color: 'green' },
{ name : 'Jane Doe', color: 'red' }
],
label:'name',
identifier:'color'
}
};
this._employeeStore = new Memory({data: this.data, idProperty: "name"});
this._dataStore = ObjectStore({objectStore: this._employeeStore});
this.grid = new DataGrid
(
{
noDataMessage: "Hazza",
store: this._dataStore,
query: { id: "*" },
autoRender : true,
structure: this.layout
},
"grid"
);
this.inherited(arguments);
},
startup: function() {
this.grid.startup();
}
});
});
my template is as follows:
AssetGrididget.html
<div>
<div data-dojo-attach-point="grid" style="width: 800px; height: 800px;"></div>
</div>
finally the page i am calling it from
Index.html
<head>
<script type="text/javascript" src="js/dojo/dojo.js"></script>
</head>
<body>
<div id="gridContainer" style="width: 300px; height: 300px;"></div>
<script>
require(["dojo/request", "dojo/dom", "dojo/_base/array", "tartarus/widget/AssetGridWidget", "dojo/domReady!"],
function(request, dom, arrayUtil, AssetGridWidget){
var gridly = new AssetGridWidget();
gridly.placeAt("gridContainer");
gridly.startup();
});
</script>
</body>
I have been smacking my head against a brick wall for hours on this so any help is greatly appreciated!

You are passing "grid" as the second argument to the DataGrid constructor. This will attempt to find a DOM node in the document with the ID grid and replace that with the grid.
However, based on your template, it looks like what you're actually intending to do is to replace your grid attach point with the grid instead. Instead of "grid", your second argument to the constructor should be this.grid.
(I might also suggest naming the attach point gridNode instead to distinguish it, since you are immediately assigning the actual grid instance to this.grid thereafter.)

EXTJS Display a View within Ext.window.Window

I am using version 4.2.
I currently have a view which extends a panel. On this panel there is a button which displays a modal window. The controller code when the button is clicked is below (which I pulled from the extjs docs):
displaySearch : function(btn) {
var panel = Ext.create('Ext.window.Window', {
title: 'Hello',
height: 200,
width: 400,
layout: 'fit',
modal : true,
items: {
...
}
}).show();
}
I want a View I already have created to be rendered INSIDE the modal window I just defined.
How do I do that?

If you have defined an alias (xtype) for that view, let's say it is 'myview', then you just add it to items like this:
var panel = Ext.create('Ext.window.Window', {
title: 'Hello',
height: 200,
width: 400,
autoShow:true,
layout: 'fit',
modal : true,
items: [{
xtype:'myview'
}]
});
Also, you don't need to call show() on the created window, it is enough if you configure autoShow:true.

Dojo DataGrid Not Showing

In my dojo.xhrGet I have specified this load::
load: function (data) {
// reset data display containers
dojo.addClass("search_results", "hide_on_load");
dojo.byId("search_results_found").innerHTML = "";
// populate table with new results.
dojo.byId("search_results_found").innerHTML = "" + data.length + " search result(s) found.";
// when data is from an XHR request, you must transform it into a store.
// See: http://stackoverflow.com/questions/2423459/datagrid-in-dojo-with-json-data-from-a-servlet
var items = dojo.map(data, function (res_row) {
return {
'Id': res_row.Id,
'Name': res_row.Name,
'VisitType': res_row.VisitType,
'VisitDate': res_row.VisitDate
};
});
var store = new dojo.data.ItemFileReadStore({
data: {
items: items
}
});
var res_layout = [
{field: 'Id', name: 'ID', width: '10%'},
{field: 'Name', name: 'Site Name', width: '50%'},
{field: 'VisitType', name: 'Visit Type', width: '20%'},
{field: 'VisitDate', name: 'Visit Date', width: '20%'}
];
// create a new grid:
var res_grid = new dojox.grid.DataGrid({
store: store,
structure: res_layout,
rowsPerPage: 10
}, document.createElement('div'));
// append the new grid to the div "search_results_table":
dojo.byId("search_results_table").appendChild(res_grid.domNode);
// Call startup, in order to render the grid:
res_grid.startup();
dojo.removeClass("search_results", "hide_on_load");
standby.hide();
},
And, the html is:
<!-- Search Results Table -->
<div id="search_results" class="hide_on_load">
<div id="search_results_found"></div>
<div id="search_results_table"></div>
</div>
At the end of this script, the grid does not show.
I removed the hide_on_load css class selector so that I could exclude it as being the issue. But, that did not help.
Looking at the console, there are no errors logged.
Also, writing the various objects (res_grid, store, etc.) all produce output that looks to be correct.
Can somebody provide some help on how to get it to show?
Thanks!
Update:
When I inspect the DOM after this code has run, I see the tabler created with the headers but then when I go to find the actual table with the search results (under div class=dojoxGridContent), it isn't there.
Update 2:
I have the styles specified too:
<style type="text/css">
#import "http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/Grid.css";
#import "http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/claroGrid.css";
.dojoxGrid table { margin: 0; }
</style>

Make sure you set a size through the style property on the div where you place your grid, and don't forget to import the CSS files for your grid, like :
<style type="text/css">
#import "dojoroot/dojox/grid/resources/Grid.css";
#import "dojoroot/dojox/grid/resources/soriaGrid.css";
.dojoxGrid table {
margin: 0;
}
</style>
Note : Replace soria by whatever theme you are using...
... and don't forget to set a size to your grid's dom node :
<div id="gridnode" style="width:100%; height:500px;"></div>

If you don't want a fix height you can declare the grid withautoHeight: true.
var res_grid = new dojox.grid.DataGrid({
store: store,
structure: res_layout,
rowsPerPage: 10,
autoHeight: true
}, document.createElement('div'));
With This attribute you don't need to add style to the parent container for it to display.