I'm using AgularJs Selectize plugin, in docs have posibility to change dropdown direction, but i can't realize how it works... Maybe somewho also using this plugin and can tell me how to change drop down direction from bot to up?
I find the solution from members on github, add this part of code to your controller file:
if (!window.Selectize.prototype.positionDropdownOriginal) {
window.Selectize.prototype.positionDropdownOriginal = window.Selectize.prototype.positionDropdown;
window.Selectize.prototype.positionDropdown = function () {
if (this.settings.dropdownDirection === 'up') {
let $control = this.$control;
let offset = this.settings.dropdownParent === 'body' ? $control.offset() : $control.position();
this.$dropdown.css({
width: $control.outerWidth(),
left: offset.left,
bottom: 'calc(100% + 4px)'
});
this.$dropdown.addClass('direction-' + this.settings.dropdownDirection);
this.$control.addClass('direction-' + this.settings.dropdownDirection);
this.$wrapper.addClass('direction-' + this.settings.dropdownDirection);
} else {
window.Selectize.prototype.positionDropdownOriginal.apply(this, arguments);
}
};
}
My config object is:
vm.config = {
delimiter: ',',
persist: false,
plugins: ['remove_button' ],
create: false,
dropdownDirection: 'up' <= also add this part
};
And it works perfect, thanks to guys from this topic
Related
I am building a project using React with a doughnut and bar chart. Working with Chart.js 3.xx.
I am trying to make my custom legend functional. I want to make data fractions disappear when the user clicks my legend items - like in the native legend, and optimally also remove the data and make the chart present it's updated data after removal.
I also use data labels to present percentage of the data on the fractions.
import ChartDataLabels from 'chartjs-plugin-datalabels';
I came across this topic: ChartJS - Show/hide data individually instead of entire dataset on bar/line charts
and used this suggested code there:
function chartOnClick(evt) {
let chart = evt.chart
const points = chart.getElementsAtEventForMode(evt, 'nearest', {}, true);
if (points.length) {
const firstPoint = points[0];
//var label = myChart.data.labels[firstPoint.index];
//var value = myChart.data.datasets[firstPoint.datasetIndex].data[firstPoint.index];
let datasetIndex = firstPoint.datasetIndex, index = firstPoint.index;
if (firstPoint.element.hidden != true) {
chart.hide(datasetIndex, index);
} else {
chart.show(datasetIndex, index);
}
}
}
options: { // chart options
onClick: chartOnClick
}
It almost works, but the hide() method doesn't remove the fraction's percentage data label when activated, whereas when clicking the native legend it does remove it entirely.
I tried looking in the plugin's docs but didn't manage to find how to remove a single label.
How can I achieve what I am looking for?
EDIT:
Options Object:
export const doughnutOptsObj = {
onClick: chartOnClick,
responsive: true,
maintainAspectRatio: false,
layout: { padding: { top: 16, bottom: 16 } },
hoverOffset: 32,
plugins: {
legend: {
display: true,
position: 'bottom',
},
datalabels: {
formatter: (value, dnct1) => {
let sum = 0;
let dataArr = dnct1.chart.data.datasets[0].data;
dataArr.map((data) => {
sum += Number(data);
});
let percentage = ((value * 100) / sum).toFixed() + '%';
return percentage;
},
color: ['#fbfcfd'],
font: { weight: 'bold' },
// display: false, <-- this works and makes all of the data labels disappear
},
},
};
It seems that the onClick function is working properly.
I have tried the attached code, leveraging on toggleDataVisibility API, and it's working as requested (codepen: https://codepen.io/stockinail/pen/abKNJqJ):
function chartOnClick(evt) {
let chart = evt.chart
const points = chart.getElementsAtEventForMode(evt, 'nearest', {}, true);
if (points.length) {
const firstPoint = points[0];
chart.toggleDataVisibility(firstPoint.index);
chart.update();
}
}
I'm using the grid from http://ui-grid.info/ in a project. I've created a hierarchical grid, which works nicely, but when I do an export, it only exports the data from the top-level grid.
This is by design and is standard functionality for the grid, so there's no point in me putting up any example code. Any example from http://ui-grid.info/docs/#/tutorial will do.
Is there a way to export the subgrid (preferably both the main grid AND the subgrid together as they appear in the grid)?
Sadly the answer is no.
As you can see here the function getData iterates through all rows and then through all columns, adding to an array of extractedFields the columns to be extracted and aggregating those in an array of extractedRows.
This means that no data, other than what's defined in gridOptions' columnDef will be read, converted and extracted.
By design, subgrid information are stored inside a property of any row entity's subGridOptions but this property is never accessed inside of the exporter feature.
The motivation behind this behaviour is that expandable grid feature is still at an alpha stage, so, supporting this in other features is not a compelling priority.
Furthermore, adding subgrid to a CSV could be quite hard to design, if we wanted to provide a general solution (for example I don't even think it would be compliant to CSV standard if you had different number of columns in the main grid and in subgrids).
That said, ui-grid is an open source project, so, if you have a working design in mind, feel free to open a discussion about it on the project gitHub page or, even better, if you can design a working (and tested) solution and create a pull request, even better!
I managed to get it working, although if I had the time I would do it a bit better than what I've done by actually creating a branch of the code and doing it properly, but given time constraints, what I've got is working nicely.
FYI, here's the way I ended up getting it to do what I wanted:
In my grid options, I turned off the CSV export options in the grid menu (because I've only implemented the changes for PDF).
I made a copy of exporter.js, named it custom.exporter.js and changed my reference to point to the new file.
In custom.exporter.js, I made a copy of the getData function and named it getGridRows. getGridRows is the same as getData, except it just returns the rows object without all the stuff that gets the columns and so on. For now, I'm coding it to work with a known set of columns, so I don't need all that.
I modified the pdfExport function to be as follows:
pdfExport: function (grid, rowTypes, colTypes) {
var self = this;
var exportData = self.getGridRows(grid, rowTypes, colTypes);
var docContent = [];
$(exportData).each(function () {
docContent.push(
{
table: {
headerRows: 1,
widths: [70, 80, 150, 180],
body: [
[{ text: 'Job Raised', bold: true, fillColor: 'lightgray' }, { text: 'Job Number', bold: true, fillColor: 'lightgray' }, { text: 'Client', bold: true, fillColor: 'lightgray' }, { text: 'Job Title', bold: true, fillColor: 'lightgray' }],
[formattedDateTime(this.entity.JobDate,false), this.entity.JobNumber, this.entity.Client, this.entity.JobTitle],
]
}
});
var subGridContentBody = [];
subGridContentBody.push([{ text: 'Defect', bold: true, fillColor: 'lightgray' }, { text: 'Vendor', bold: true, fillColor: 'lightgray' }, { text: 'Status', bold: true, fillColor: 'lightgray' }, { text: 'Sign off', bold: true, fillColor: 'lightgray' }]);
$(this.entity.Defects).each(function () {
subGridContentBody.push([this.DefectName, this.DefectVendor, this.DefectStatus, '']);
});
docContent.push({
table: {
headerRows: 1,
widths: [159, 150, 50, 121],
body: subGridContentBody
}
});
docContent.push({ text: '', margin: 15 });
});
var docDefinition = {
content: docContent
}
if (self.isIE()) {
self.downloadPDF(grid.options.exporterPdfFilename, docDefinition);
} else {
pdfMake.createPdf(docDefinition).open();
}
}
No, there is no direct way to export subgrid. rather you can create youur own json data to generate csv file.
Please check the below code
function jsonToCsvConvertor(JSONData, reportTitle) {
//If JSONData is not an object then JSON.parse will parse the JSON string in an Object
var arrData = typeof JSONData !== 'object' ? JSON.parse(JSONData) : JSONData,
csv = '',
row,
key1,
i,
subGridData;
//Set Report title in first row or line
csv += reportTitle + '\r\n\n';
row = '';
for (key1 in arrData[0]) {
if(key1 !== 'subGridOptions' && key1 !== '$$hashKey'){
row += key1 + ',';
}
}
csv += row + '\r\n';
for (i = 0; i < arrData.length; i++) {
row = '';
subGridData = '';
for (key1 in arrData[i]) {
if(key1 !== 'subGridOptions' && key1 !== '$$hashKey'){
row += '"' + arrData[i][key1] + '",';
}
else if(key1 === 'subGridOptions'){
//csv += row + '\r\n';
subGridData = writeSubGridData(arrData[i][key1].data);
}
}
csv += row + '\r\n';
csv = subGridData ? csv + subGridData + '\r\n' : csv;
}
if (csv === '') {
console.log('Invalid data');
}
return csv;
}
//Generates subgrid Data to exportable form
function writeSubGridData(subgridData){
var j,
key2,
csv = '',
row = '';
for (key2 in subgridData[0]){
if(key2 !== '$$hashKey'){
row += key2 + ',';
}
}
csv = row + '\r\n';
for (j=0; j < subgridData.length ; j++){
row = '';
for(key2 in subgridData[j]){
if(key2 !== '$$hashKey'){
row += '"' + subgridData[j][key2]+ '",';
}
}
csv += row + '\r\n';
}
return csv;
}
jsonToCsvConvertor(exportData, 'New-Report');
I am building a section in my app where you can send emails.
In order to do that, this user needs to paste a complete html content and preview it with the html editor in extjs.
The problem is that Extjs remove head and body and changing the doctype tag
have a look here, click on the buttons at the bottom: http://jsfiddle.net/LKJSm/
Ext.onReady(function () {
Ext.tip.QuickTipManager.init();
var top = Ext.create('Ext.form.Panel', {
items: [{
xtype: 'htmleditor',
name: 'htmlContent',
height: 300,
anchor: '100%'
}],
buttons: [{
text: 'Set doctype with head and body',
handler: function () {
top.down('htmleditor').setValue("<DOCTYPE /><head></head><body>body here</body>");
}
}, {
text: 'Alert Content',
handler: function () {
var editor = top.getForm().findField('htmlContent');
alert(editor.getValue());
}
}]
});
top.render(document.body);
});
here is a solution provided in Extjs forums: http://www.sencha.com/forum/showthread.php?146160-HTMLEditor-strips-dtd-head-and-body-tags
Ext.define('MyHTMLEditor', {
extend:'Ext.form.HtmlEditor',
alias: 'widget.myhtmleditor',
tagsToComment: ['!DOCTYPE', 'html', 'head', 'body'],
/**
* Pushing value to wysiwyg iframe loses dtd, html, head and body tags.
* Override hack to comment them out when pushing to iframe, and then uncomment
* them on the way back (see this.cleanHtml).
*/
pushValue: function() {
var me = this,
v;
if(me.initialized){
v = me.textareaEl.dom.value || '';
if (!me.activated && v.length < 1) {
v = me.defaultValue;
}
if (me.fireEvent('beforepush', me, v) !== false) {
///////////// change
for (var i=0;i<me.tagsToComment.length;i++) {
v = v.replace(RegExp('<(\s*\/?'+me.tagsToComment[i]+'.*?)>', 'ig'), '<!--$1-->');
}
/////////////
me.getEditorBody().innerHTML = v;
if (Ext.isGecko) {
// Gecko hack, see: https://bugzilla.mozilla.org/show_bug.cgi?id=232791#c8
me.setDesignMode(false); //toggle off first
me.setDesignMode(true);
}
me.fireEvent('push', me, v);
}
}
},
/**
* Uncomment the tags mentioned in pushValue
*/
cleanHtml: function(html) {
var me = this, i,
result = me.callParent(arguments);
for (i=0;i<me.tagsToComment.length;i++) {
result = result.replace(RegExp('<!--(\s*\/?'+me.tagsToComment[i]+'.*?)-->', 'ig'), '<$1>');
}
return result;
},
});
use of html tags are not allowed, in fact they are identified as thereat. if you want the tags to be displayed you need to change as follows
top.down('htmleditor').setValue("<DOCTYPE /> <head></head><body>body here</body>");
this will display the tags on the editor for now.
if you don't want them to show up on the editor you need to concatenate the tags when you pass it to the email client.
I'm looking a way to:
hide title on the HTML page result
show title on the highcharts graph when I export it (PDF,PNG,JPEG or print)
I don't know how to proceed. There is someone able to help me?
You can define this parameter in exporting.
http://api.highcharts.com/highcharts#exporting.chartOptions
http://jsfiddle.net/BdHJM/
exporting:{
chartOptions:{
title: {
text:'aaaaa'
}
}
},
put this function in your document ready function below is a code for changing highcharts print prototype and just for the patch or to make it work put rangeSelector option in your exporting and set it to false as mentioned below you can set it to your needs in future
Highcharts.wrap(Highcharts.Chart.prototype, 'print', function (proceed) {
var applyMethod = function (whatToDo, margin) {
this.extraTopMargin = margin;
this.resetMargins();
this.setSize(this.container.clientWidth , this.container.clientHeight , false);
this.setTitle(null, { text: 'SET TITLE HERE' :'});
this.rangeSelector.zoomText[whatToDo]();
$.each(this.rangeSelector.buttons, function (index, button) {
button[whatToDo]();
});
};
if (this.rangeSelector) {
var extraMargin = this.extraTopMargin;
applyMethod.apply(this, ['hide', null]);
var returnValue = proceed.call(this);
applyMethod.apply(this, ['show', extraMargin]);
this.setTitle(null, { text: '' });
} else {
return proceed.call(this);
this.setTitle(null, { text: '' });
this.yAxis[0].setExtremes();
} }
});
and in chart option set this (change it according to you need to, i am just putting my code for reference
)
exporting: {
scale: 1,
sourceWidth: 1600,
sourceHeight: 900,
chartOptions: {
rangeSelector: {
enabled: false
},
}
I create a window like this:
_target = new Ext.Window({
layer: 'top',
width: _width,
height: _height,
constrainTo: aBody,
constrain: true,
renderTo: aBody,
autoScroll: true,
flex: 1,
modal: (targetParams.Modal != undefined) ? targetParams.Modal : false,
resizable: (targetParams.Resizable != undefined) ? targetParams.Resizable : true,
minimizable: (targetParams.Minimizable != undefined) ? targetParams.Minimizable : true,
maximizable: (targetParams.Maximizable != undefined) ? targetParams.Maximizable : true,
closable: (targetParams.Closable != undefined) ? targetParams.Closable : true,
maximized: _maximized,
minimzed: _minimized,
isInFront: true
});
and then do this:
_target.on("render", function (items) {
if (items.length > 0) {
this.show();
this.add(items);
this.doLayout();
var buttonText = targetParams.ButtonText || this.title;
createToolbarButton(this.id, buttonText, targetParams.UIConfigurationId);
} else {
_target.destroy();
}
});
The problem is on this line this.show();. On 4.0 this line calls this function
show: function() {
this.callParent(arguments);
this.performDeferredLayouts();
return this;
},
But on the 4.1 the same line calls another function:
show: function(animateTarget, cb, scope) {
var me = this;
if (me.rendered && me.isVisible()) {
if (me.toFrontOnShow && me.floating) {
me.toFront();
}
} else if (me.fireEvent('beforeshow', me) !== false) {
me.hidden = false;
if (!me.rendered && (me.autoRender || me.floating)) {
me.doAutoRender();
}
if (me.rendered) {
me.beforeShow();
me.onShow.apply(me, arguments);
if (me.ownerCt && !me.floating && !(me.ownerCt.suspendLayout || me.ownerCt.layout.layoutBusy)) {
me.ownerCt.doLayout();
}
me.afterShow.apply(me, arguments);
}
}
return me;
},
In which down the line tries to do layout.renderChildren() and then it gives an error.
I think it's obvious that the objects created are different, but i haven't seen this question addressed in the "Upgrade 4.0 to 4.1" document.
So my question is what i have to do to make this work?
Thanks in advance for the help.
UPDATE:
The app structure after adding the window would look something like this:
ViewPort
North
...
West
...
Center
Window
Panel
Panel
Label
...
BorderSplitter
Panel
Label
...
Panel
List
South
...
I've made some changes to the code and it doesn't generated that error anymore.
_target.on("beforeRender", function (items) {
if (items.length > 0) {
_target.add(items);
_target.doLayout();
var buttonText = targetParams.ButtonText || _target.title;
createToolbarButton(_target.id, buttonText, targetParams.UIConfigurationId);
} else {
_target.destroy();
}
});
_target.show();
_target.toFront();
But now it generates another when I call _target.add(items);.
The error is "Unable to get the value of property 'dom'" on this line
me.container = container.dom ? container : Ext.get(container);
I've tried to analyze the call stack and found out why it give this error. When it calls this function:
renderChildren: function () {
var me = this,
items = me.getLayoutItems(),
target = me.getRenderTarget();
me.renderItems(items, target);
},
where "this" refers to the layout object of the window, to where I'm adding the items, the call "getRenderTarget()" returns undefined. Then tries to access the dom property of undefined, throwing the error I mentioned above.
This is where I'm lost because, as you can see, when I'm creating the window I pass an object (aBody) to the renderTo property.
Any ideas??
It had to do with the layout. With layout 'fit' it seems to work.