We Keep Coding

kendo angular menu without typescript

How I can use the kendo menu without typescript?
html
<kendo-menu [items]="menuItems" [vertical]="true" style="display:inline-block;" (select)="onMenuSelected($event)"></kendo-menu>
TS
menuItems: any[] = [
// {
// text: "Rename",
// },
{
text: "Delete",
},
{
text: "Copy",
},
];
I want to use only html to use of menu

Technically, you can enter the data in the template itself, like this:
<kendo-menu [items]="
[{
text: 'Rename'
},
{
text: 'Delete'
},
{
text: 'Copy'
}]">
</kendo-menu>
Now, while it is possible, it's not good practice. Even if the menu, in this case, is static and simple, it's better to have a const on the component containing the menu entries, or perhaps in a dedicated file if you have many such constants which you in several places.

Vue chartjs disables datasets by default

In my project for my clan, Lords of War on the Supercell games. I am trying to make a chart for the current donations with chart.js. I'm using Vue for the front-end and vue-chartjs for the charts. There is only 1 problem. When i open the page, the datasets are not visible. So how can i fix that?
this is the chart data object:
donation_chart_data: {
labels: [],
datasets: [
{
label: 'Donated',
hidden: false,
backgroundColor: '#1D93D3',
data: []
},
{
label: 'Received',
hidden: false,
backgroundColor: '#C7031F',
data: []
}
]
}
This is the DonationChart component:
import { Bar, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins;
export default {
extends: Bar,
name: 'ClashRoyaleDonationChart',
mixins: [reactiveProp],
mounted () {
// Overwriting base render method with actual data.
this.renderChart(this.chartData,
{
responsive: true,
maintainAspectRatio: false
})
}
}
PS: when I click the legend, the data is displayed properly

Well, I guess you are using an API to get your data?
Then you need to check if the data is available. Axios / Ajax requests are async. So most of the time, your chart will be rendered without data.
Just add a v-if="loaded" on your chart component and in your
axios.get().then() method, set loaded = true and you should be fine.

Why does this datagrid sort in a weird order?

I have a datagrid where each row has a column where I have defined a formatter to format the display result depending on what it says in the database and create a div with a background color depending on the database.
I have this structure for my datagrid:
structure: [
{
name: "Name",
field: "name",
width: "auto"
},
{
name: "Initials",
field: "initials"
},
{
name: "E-mail",
field: "email",
width: "auto"
},
{
name: "Kerberos",
field: "kerberos",
width: "120px",
formatter: function(kerberos){
var format = "";
if(kerberos == "password expired" || kerberos == "account expired"){
format = '<div class="yellow" title="'+kerberos+'">'+kerberos+'</div>';
}else if(kerberos == "ok"){
format = '<div class="green" title="'+kerberos+'">'+kerberos+'</div>';
}else{
format = '<div class="red" title="Has no kerberos account">not available</div>';
}
return format;
}
},
When I press the column header to sort, it sorts the rows, put not consistent, so I don't know if it sorts correctly (see image below). How do I define the way the datagrid have to sort this column?
I was thinking it was the HTML <div...> part I do in the formatter due to the <> characters, but it still sorts weird if I only output the text (which by my understanding, should be sorted alphabetically). Does anyone know why this happens and how I can fix it?
EDIT:
forgot to add how i get/assign data. I get a lot of data from a xhr.post in JSON format, then i do as follows:
dojo.xhr.post({
url: "/cgi-bin/users.cgi",
handleAs: "json",
content: {
psearch: "dojoXhrBlank"
},
load: function(jsondata){
// Creating a store for the datagrid
var personStore = new Memory({ data: jsondata });
// Create datastore for datagrid
var gridStore = ObjectStore({objectStore: personStore});
...

I found an answer. The problem lies in ObjectStore. This store (for some reason) wont sort properly and after changing the store type to ItemFileReadStore it sortet properly. The other reason for switching store was that ItemFileReadStore also supports the comparatorMap attribute which allows for custom sorting, ObjectStore dose not support this attribute.
solution:
load: function(jsondata){
var store = new ItemFileReadStore({
data: { identifier: "id", items: jsondata }
});
pgrid = new DataGrid({
store: store,
...

ExtJS: share store between grid and chart

I'm writing a simple application storing and displaying timestamped messages. Messages are JSON objects containing, say 2 main fields like:
{
"emitted": "2011-12-08 12:00:00",
"message": "This is message #666"
}
I have a model to describe these messages:
Ext.define('Message', {
extend: 'Ext.data.Model',
fields: [
{ name: 'emitted', type: 'date' },
{ name: 'message', type: 'string' }
]
});
I have no problem displaying these messages in a grid. However, i would now like to display these messages in a chart. For instance, I would be able to grab numbers (like the #666 in the above example) and display a line chart.
Ideally, i don't want to create a new store for the chart, i would like to reuse the same message store, but apply a filter on the fields to grab the proper value. I don't know, something that might look like:
var chart = {
xtype: 'chart',
...
series: [{
type: 'line',
axis: ['left', 'bottom'],
xField: 'emitted',
yField: {fieldName:'message', fieldGrabber: function(v) {
new RegExp("This is message #(\d+)$", "g").exec(v)[1]
}}
}]
};
Does this kind of thing is possible in ExtJS ?
I just tried to explain what I'm trying to do, i have no idea where to find such a feature: in the chart class, in the store class, or using a kind pf proxy to the store.
Side note:
I cannot ask the data to be properly formatted to the server. The messages I receive are not backed up anywhere, they are just live events streamed to the client via socketIO.
Any advices greatly appreciated!

You should extract the value inside you model to a separate field:
Ext.define('Message', {
extend: 'Ext.data.Model',
fields: [
{ name: 'emitted', type: 'date' },
{ name: 'message', type: 'string' },
{ name: 'nr', convert: function(v, r){
return r.get('message').replace(/^.*#/, '');
} }
]
});
Or you might be better off just having the 'nr' field and using a renderer in Grid that displays it as "This is message #{nr}".
Then you can use the 'nr' field directly in you chart.

I switched to Highcharts and threw ExtJS out to the trash :P

How to set ckeditor config when using the jquery version?

I'm using the jquery version of ckeditor, like this:
$(".textarea").ckeditor();
I need to specify the toolbar buttons, but I don't know how. All the help I found here on stackoverflow or using google was for the old javascript ckeditor version, OR I don't know how to use it with jquery (code above).
Also, how do I specify the css file location, so that the ckeditor loads my css and displays the data the same way it will be displayed on the site?
Anyone can help with this mess?

$(".textarea").ckeditor(function() {
// Instance loaded callback.
}, {
// Config here.
});

Not sure if this is a new feature of CKEDITOR, but just want to share my solution (in case it helps anyone looking for this now):
$("textarea.youreditor").ckeditor
(
{
customConfig: "/path/to/custom/config.js"
}
);
... and my config looks like this (simply copied the default config.js:
CKEDITOR.editorConfig = function(config)
{
config.toolbar_Full =
[
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'] },
{ name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] }
];
};
** I am cross posting my solution from here: How do I pass in config info to CKEditor using the jQuery adapter?

This is how I set the config using jQuery....
var config = {
toolbar: [ /* Whatever toolbars you wish go here. */ ],
height: 250,
width: 500,
align: "left",
contentsCss: ["body { /* Style your body any way you like */ } otherCSSStuff { /* Style away. */} "]
/*and whatever other options you wish to config... */
};
$( 'textarea.editor' ).ckeditor( config, function() { /* Your callback function. */ } );