I am using Highchart in my application .I am unable to export the chart datapoints to csv format .
I tried using this approach
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="https://rawgithub.com/highslide-software/export-csv/master/export-csv.js"></script>
$('#getcsv').click(function () {
var charts1 = $('#aumChart-container').highcharts();
Highcharts.post('http://www.highcharts.com/studies/csv-export/csv.php', {
csv: charts1.getCSV()
});
});
By using this approach i see the default the highcharts context menu inside my chart control .I want to have a csv export from an external button .Is there a way to remove this default context menu .
I tried removing the context menu by removing the reference to exporting.js but then my export to csv from external BUTTON stops working .
Can someone let me know where exactly i am messing up?
Option 1
There's a plugin that allows you to export CSV (which is what you're using).
On that same page they've shown how you can use an alert box to get the CSV, would that be sufficient?
Direct link to jsfiddle
Option 2
You can code it so that only specific menu items are available
The above link - you're looking for "menuItems"
But instead - you would have:
exporting: {
buttons: {
contextButton: {
menuItems: [{
text: 'CSV',
onclick: function() {
/*
obviously you'd have to post this to a script
to get the results into a csv file
instead of getting an alert.
*/
alert(this.getCSV());
}
}]
}
}
}
Related
I have a jQuery DataTable I am using to load my data. However I am struggling to export huge number of rows ex 15-20k rows.
$('#example').DataTable(
{
dom: 'Bfrtip',
buttons: [
'excel'
],
initComplete: function(){
$('.buttons-excel').style('display', 'none')
$('#custom-excel-button').click(function(){
$('.buttons-excel').trigger('click')
})
}
});
I have a custom button <button id='custom-exel-button' />
When user clicks on this button I want to trigger export functionality It works fine but I am having some UI issues. When its a huge volume, it just hangs on the button.
Instead I want to show some sort of loading icon when an export is happening.
Is there a callback I can use to know when export is completed? So I can just load a loader icon when user clicks the button then hide the loader on the callback.
You can use a custom button action to do this.
In the example below, I am using the SweetAlert2 library, just for convenience in this basic demo.
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#10.15.7/dist/sweetalert2.all.min.js"></script>
The button code in the DataTable:
buttons: [
{
text: 'Excel',
action: function(e, dt, node, config) {
var that = this;
Swal.fire('Data is being loaded...');
setTimeout(function() {
$.fn.DataTable.ext.buttons.excelHtml5.action.call(that, e, dt, node, config);
Swal.close();
}, 1000);
}
}
]
The excelHtml5.action.call() function is how I manually trigger the Excel file creation in this case, instead of the more usual appraoch.
(Having said that, I completely agree with the comments in the question: This is a job which should really be performed on the server. I don't see any reason to show this much data to the user in a web page, even prior to the Excel export. I imagine the browser and DataTables take quite some time to process/display the raw data, also.)
Ok, I have a form in which I am using the wysiwyg editor summernote several times. When I fill in my form, the model is updated correctly, the content is shown and the results are saved correctly to the database. BUT when I want to edit and load the data from the database, the model is showing the contents correctly in the developer tools, but nothing makes it on to the screen.
This is what I have:
I have a component to load and initiate the summernote editor
<template>
<textarea class="form-control"></textarea>
</template>
<script>
export default{
props : {
model: {
required: true
},
height: {
type: String,
default: '150'
}
},
mounted() {
let config = {
height: this.height,
};
let vm = this;
config.callbacks = {
onInit: function () {
$(vm.$el).summernote("code", vm.model);
},
onChange: function () {
vm.$emit('update:model', $(vm.$el).summernote('code'));
},
};
$(this.$el).summernote(config);
}
}
</script>
I have a form (here is only one part of it) where I load the Summernote component as html-editor:
<html-editor
:model.sync="form.areaOfWork"
:class="{ 'is-invalid': form.errors.has('areaOfWork') }"
name="areaOfWork"
id="areaOfWork"></html-editor>
In the props, after loading from the DB, the data shows correctly, i.e.:
model:"<p> ... my content ...</p>"
Likewise, in my form it shows correctly, i.e.:
form: Object
areaOfWork: "<p> ... my content ...</p>"
...
But it is not shown in html-editor. I am stuck - maybe it is something super simple I am overlooking, but I did not find anything that helped me so far. Thanks for ideas and inputs
I think the problem stemmed from using jquery and vue in one project!
Because vue uses virtual DOM and jquery changes the real DOM, this makes the conflict!
So it is better not to use both of them in one project or use jquery safe in it like link below:
https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/
Thanks for your answer, #soroush, but that doesn't seem to be the problem. There is a communication and it seems to work. I do see my form being filled with correct data as well.
After playing around with numerous ideas, I found a simple work-around: watcher
I added
watch: {
areaOfWork: (val) => {
$('#areaOfWork').summernote("code", val);
}
},
to my template and the according variables to my data().
When I call my database and read the item, I provide the data for the watcher and it works.
Still, I do not get why vm.model in the onInit callback is not shown, but as it seems to work, I wanted to provide you with an answer. Maybe it helps someone else
HTML:
<textarea class="summernote-editor"name="memo_content"id="memo_content"</textarea>
JS:
$('#memo_content').summernote("code", response.data.res.memo_content);
The following code snippet, as provided by Snipcart's documentation for v3, does not seem to override their default text label: Continue shopping
document.addEventListener('snipcart.ready', () => {
Snipcart.api.session.setLanguage('en', {
actions: {
continue_shopping: "Go back to store"
}
});
});
I have placed the above code segment directly underneath the following...
<div hidden id="snipcart" data-api-key="[Testing API Key]"></div>
<script src="https://cdn.snipcart.com/themes/v3.0.6/default/snipcart.js"></script>
When I click to activate Snipcart's checkout modal, the default label Continue shopping remains (instead of, Go back to store).
The issue mentioned has been fixed in V3.0.10. The sample code from the question will work as-is.
There was an issue with older releases of Snipcart: if localizations are applied too early with the JS API, they'll get overridden when the localization file is loaded.
To ensure everything loads in order, you can update your code to use the Snipcart.ready promise:
document.addEventListener('snipcart.ready', () => {
Snipcart.ready.then(function() {
Snipcart.api.session.setLanguage('en', {
actions: {
continue_shopping: "Go back to store"
}
});
});
});
Below I've tried to simplify more complex TreeView usage, where I'm failing to implement a ContextMenu on TreeView node items, into a fiddle that exhibits potentially related issues. Steps: In my simplified example one left clicks to select a node, then right clicks on another node, and finally dismisses with escape, and then selection indications are confused. I've tried "return false", select(nothing), and preventDefault() to no avail.
My question is: is this a bug in Kendo UI, or am I missing something in my usage of TreeView?
https://jsfiddle.net/3cp9m8wo/
<div id='Tree_Space'></div>
<script type='text/x-kendo-template' id='Tree_template'>
#= item.Name#
</script>
<script>
$('#Tree_Space').kendoTreeView({
dataSource: [ { Name: 'Top', items: [ { Name:'Item' }, { Name:'Item' } ] } ],
template: kendo.template($('#Tree_template').html())
});
$("#Tree_Space").data("kendoTreeView").expand('.k-item');
</script>
My full goal would be to disable Kendo UI selection on TreeView nodes completely, allowing me to implement left clicks (actions) and right clicks (ContextMenus) for elements I placed within tree nodes. However, I've not seen a way to disable select on TreeView. I do find JQuery.click() does seem to work and deselect Kendo UI selections, but Kendo UI Context Menu fails to popup on right click, and displays other artifacts - one of which I think I've isolated here in hopes of learning something.
You could try using something in your template to control this:
<script type='text/x-kendo-template' id='Tree_template'>
//Ideally, your server will return a collection that determines if the item can be selected, likewise, you could add a IsParentNode or something to indicate the item should be treated differently.
#if (item.CanSelect != 'null' && item.CanSelect==true) { #
<span>#: item.Name#</span>
#}else{#
<span class='no-select'>#: item.Name#</span>
#}#
</script>
<script type="text/javascript">
$(document).ready(function () {
//Add code here to tie into the onmousedown of all .no-select elements
$(document).on("click", "no-select", function (e) {
e.preventDefault();
});
});
</script>
I am using CKEditor on a website and I need to be able to put a special data attributes on some of the links created through the editor. The user would indicate that they need the special attribute put on the link by checking a checkbox in the link dialog. I have managed to add a checkbox to the link dialog with the following code:
CKEDITOR.on('dialogDefinition', function(ev) {
if (ev.data.name == "link") {
var info = dialog.getContents("info");
info.elements.push({
type: "vbox",
id: "urlOptions",
children: [{
type: "hbox",
children: [{
id: "button",
type: "checkbox",
label: "Button",
commit: function(data) {
data.button = this.getValue()
console.log("commit", data.button, data);
},
setup: function(data) {
this.setValue(data.button);
console.log("setup", data.button, data);
}
}]
}]
});
}
});
Now I have two problems. The first one is that despite me adding the code in the commit and setup functions that should save the state of the checkbox, it's not working. It's as if the data can't hold any other parameters but the ones there by default.
The second problem is that I don't know how to add / remove the data attribute on my links. It seems to me that I should be doing that in my onOk callback on the dialog, however, the link dialog already has an onOk callback, so I'm not sure how I should be proceeding. I, of course, do not want to modify any of CKEditor's files directly.
How can I accomplish these things?
You best option is to modify the plugin. So you need to open the source code and find the file links.js in c:\ckeditor_3.6.5\ckeditor\_source\plugins\link\dialogs\
The source code is quite big (40k) but here you can modify the dialog however you want. When you finish just copy it to your plugins folder, and compress it: http://jscompress.com/
I have done what you need myself. The whole uncompressed file is here: https://gist.github.com/3940239
What you need to do:
First add this line just before the dialog "browse" button is appended. Approx. in line: 547:
{
id: "button",
type: "checkbox",
label: "Button",
setup: function (data) {
this.allowOnChange = false;
if (data.button)
this.setValue(data.button);
this.allowOnChange = true;
},
commit: function (data) {
data.button = this.getValue()
this.allowOnChange = false;
}
},
This part is actually your code. I just copied and pasted it.
Then, go to the onOk function, approx. in line 1211: and after commitContent add this code:
this.commitContent( data );
//My custom attribute
if (data.button)
attributes["custom-attribute"] = "button";
else
attributes["custom-attribute"] = "";
This will modify your link adding the attribute to the element such as text
That's it. Although, you may also like to load the current status of the checkbox. Then, go to the function parseLink . Approx. line 179 to load the attributes:
...
if ( element )
{
retval.button = element.getAttribute('custom-attribute');
var target = element.getAttribute( 'target' );
...
I am exploring the same thing now. What I have decided to do at this point is to:
Get a base ckeditor install without the link plugin
create my own fork of the link plugin, and add my changes to it, then activate and use this plugin within the group that link normally shows up in.
...working with it as a custom plugin (albeit a copy of the original) should alleviate the problem of upgrading. You just simply do not use the original link plugin at all. Copy and rename it, and use your custom copy instead.