I have code to export datatable pdfhtml like this
$('#example3').DataTable( {
dom: 'lBfrtip',
buttons: [
{
extend: 'pdfHtml5',
title: 'Data Cucian Kain Cartiva '+d,
orientation:'portrait',
download: 'open',
orientation:'landscape',
customize: function(doc) {
doc.content.forEach(function(item) {
if (item.table) {
item.table.widths = [40, 40, '*','*','*']
}
})
}
}
]
} );
and result like this
I want the data in each column be in the center instead of on the left.
how to do that?
Simply use
customize: function(doc) {
doc.defaultStyle.alignment = 'center';
...
}
Think it explains itself :) Your code working in a jsfiddle -> https://jsfiddle.net/ccdn6g2v/
Related
I have a form and I am trying to apply mask when submit button is clicked but somehow mask is not displaying on form.
var objMask = new Ext.LoadMask({
target: target,
msg: 'test',
//hideMode: 'display',
listeners: {
beforedestroy: function (lmask) {
//this.hide();
},
hide: function (lmask) {
//this.hide();
}
}
});
It is working in panel but in form, we are not getting anything.
Thanks in advance.
You need to call show method on Ext.LoadMask instance.
Example on https://fiddle.sencha.com/#view/editor&fiddle/3cuq
let target = Ext.create("Ext.form.Panel", {
renderTo: Ext.getBody(),
width: 400,
height: 400
});
var objMask = new Ext.LoadMask({
target: target,
msg: 'test',
//hideMode: 'display',
listeners: {
beforedestroy: function (lmask) {
//this.hide();
},
hide: function (lmask) {
//this.hide();
}
}
});
objMask.show();
Is it possible to change the source in a Handsontable instance when inside an event?
Below is my code:
var container2 = $('#example2');
var hot2 = new Handsontable(container2, {
data: {},
minRows: 5,
colHeaders: ['Car', 'Year', 'Car Color'],
columns: [
{
type: 'autocomplete',
source: ['BMW', 'Chrysler', 'Nissan', 'Suzuki', 'Toyota', 'Volvo'],
strict: true,
allowInvalid: false
}, ,
{},
{
type: 'autocomplete',
source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white', 'purple', 'lime', 'olive', 'cyan'],
strict: true,
allowInvalid: false
}]
});
Handsontable.hooks.add('afterChange', afterChangedCallback, hot2);
function afterChangedCallback(p) {
console.log(p);
if (p[0][1] == 0) {
alert('This means the first column has changed, I now want to update the colors here');
}
}
When a user selects a different car brand, I only want to populate the dropdown of "Car Color" with certain colors. Thus, not all car brands has the same colors.
EDIT
I updated the callback function to this based on the accepted answer:
function afterChanged(p) {
console.log(p);
if (p[0][1] == 0) {
hot2.updateSettings({
cells: function (row, col, prop) {
if (row == p[0][0] && col == 2) {
var cellProperties = {};
cellProperties.source = ['red', 'yellow', 'blue'];
return cellProperties;
}
}
});
}
}
Yup, you can use the updateSettings method to change the source of an entire column or particular cell. You probably want per-cell so I would do:
hot.updateSettings({
cells: newCellDefinitionFunction()
})
Of course this new definition is up to you to figure out. It could just be returning the same cellProperties each time but check on some global array for what sources to use for which cells.
Is there a way to change/update a column name in jqGrid? I need to insert a highlighted text in the column header on change of a drop down field. The drop down field is outside of the jqGrid.
Appreciate any inputs!
You can change the column label with this code.
if(condition_for_label_change)
{
$('#list').jqGrid('setLabel', 'column_index', 'New_Label', { 'text-align': 'left' });
}
Assuming your column model looks like this:
$('#list').jqGrid({
.............
colModel: [
..............
{ name: 'column_index', index: 'column_index', align: 'left'},
...........
]
.....
);
try this..
loadComplete: function () {
var $grid = $(this), columnNames, name,
userdata = $grid.jqGrid('getGridParam', 'userData');
if (userdata) {
if (userdata.title) {
$grid.jqGrid('setCaption', userdata.title);
}
if (userdata.columnNames) {
columnNames = userdata.columnNames;
for (name in columnNames) {
if (columnNames.hasOwnProperty(name)) {
$grid.jqGrid('setLabel', name, columnNames[name]);
}
}
}
}
}
I'm having some trouble adding toolbar options to the CKEditor4 inline toolbar option. I've been reading the docs and still can't figure out where my problem is.
I'm creating a div on the fly, then adding the CKEditor to the div. Everything works fine, but I want to remove some of the tool bar options and add some other ones. When I add parameters to the inline() call nothing changes?
Here is how I create the instance on the fly:
.on('dblclick', function(e){
e.preventDefault();
e.stopPropagation();
ed.ck_restore();
ed.ck_active_block = $(this).attr("id");
ed.ck_block_data = $(this).html();
var block_width = $(this).css("width");
var block_height = $(this).css("height")+20;
var block_padding_top = $(this).css("padding-top");
var block_padding_right = $(this).css("padding-right");
var block_padding_bottom = $(this).css("padding-bottom");
var block_padding_left = $(this).css("padding-left");
var padding = 'padding-top: '+block_padding_top+';padding-right: '+block_padding_right+';padding-bottom: '+block_padding_bottom+';padding-left: '+block_padding_left+';';
var editor = '<div id="edit" contenteditable="true" style="margin-top: -'+block_padding_top+'; margin-left: -'+block_padding_left+';'+padding+' width: '+block_width+'; height: '+block_height+';background-color: #fff;position: absolute;">'+ed.ck_block_data+'</div>';
$("#"+ed.ck_active_block).prepend(editor);
if(CKEDITOR.instances.edit)
{
CKEDITOR.instances.edit.destroy(); //remove any previously created instances
}
CKEDITOR.inline("edit",
[CKEDITOR.config.fontSize_style = {
element: 'span',
styles: { 'font-size': '#(size)' },
overrides: [ {
element: 'font', attributes: { 'size': null }
}]
}]
);
$("#edit").click(function(e){e.stopPropagation();}).focus();
$("w_save").text("1");
});
http://docs.ckeditor.com/#!/api/CKEDITOR-method-inline
The docs imply I can pass a configuration parameter to change the options, but I'm missing something and after 3 hours of trying I need a bit of help.
Any help is appreciated.
Thanks.
I don't know what that meant to be:
CKEDITOR.inline("edit",
[CKEDITOR.config.fontSize_style = {
element: 'span',
styles: { 'font-size': '#(size)' },
overrides: [ {
element: 'font', attributes: { 'size': null }
}]
}]
);
It is invalid JavaScript code. Have you checked your JS console?
Anyway, CKEDITOR.inline accepts two arguments - name and config object.
CKEDITOR.inline( 'edit', {
fontSize_style: {
element: 'span',
styles: { 'font-size': '#(size)' },
overrides: [
{ element: 'font', attributes: { 'size': null } }
]
},
language: 'pl',
removeButtons: 'Bold,Italic' // or set toolbar or toolbarGroups.
} );
Thanks for the reply Reinmar. I was able to find another solution. Here is the code for others:
CKEDITOR.inline("edit",{customConfig : "mycustomConfig.js"});
This referenced a custom config file, I just pulled it from an example config on the CKEditor site and changed some of the options. Works now.
I want to override the image plugin in CKeditor. When I right click on an image I want to open my own dialog. Can anyone point me in the right direction. I've done a basic plugin which I copied from the CKeditor site - How do I swap this to replace the image editor.
CKEDITOR.plugins.add('myplugin',
{
init: function (editor) {
editor.addCommand('mydialog', new CKEDITOR.dialogCommand('mydialog'));
if (editor.contextMenu) {
editor.addMenuGroup('mygroup', 10);
editor.addMenuItem('My Dialog',
{
label: 'Open dialog',
command: 'mydialog',
group: 'mygroup'
});
editor.contextMenu.addListener(function (element) {
return { 'My Dialog': CKEDITOR.TRISTATE_OFF };
});
}
CKEDITOR.dialog.add('mydialog', function (api) {
// CKEDITOR.dialog.definition
var dialogDefinition =
{
title: 'Sample dialog',
minWidth: 390,
minHeight: 130,
contents: [
{
id: 'tab1',
label: 'Label',
title: 'Title',
expand: true,
padding: 0,
elements:
[
{
type: 'html',
html: '<p>This is some sample HTML content.</p>'
},
{
type: 'textarea',
id: 'textareaId',
rows: 4,
cols: 40
}
]
}
],
buttons: [CKEDITOR.dialog.okButton, CKEDITOR.dialog.cancelButton],
onOk: function () {
// "this" is now a CKEDITOR.dialog object.
// Accessing dialog elements:
var textareaObj = this.getContentElement('tab1', 'textareaId');
alert("You have entered: " + textareaObj.getValue());
}
};
return dialogDefinition;
});
}
});
Hi the reason I wanted to do this was that we have our image editor control which for "usability" reasons we need to carry on using. It gets used in different bits of the site and two dialogs would confuse people. In summary what I did was
Remove the image plugin CKEDITOR.config.removePlugins = 'image, forms, div,flash,iframe,table';
Add extra plugins extraPlugins: 'tinsertimage,teditimage,teditlink,tinsertlink,teditimagelink' on creating the CKEditor
In the plugin run some JS which intercept the right click on the image
CKEDITOR.plugins.add('teditimage',
{
init: function (editor) {
editor.addCommand('tEditImage',
{
exec: function (editor) {
//This opens the custom editor
ZWSInlineEditor.openImageProperties(editor, false);
}
});
if (editor.addMenuItem) {
// A group menu is required
// order, as second parameter, is not required
editor.addMenuGroup('gImage');
// Create a manu item
editor.addMenuItem('gEditImageItem', {
label: 'Edit Image Properties',
command: 'tEditImage',
group: 'gImage'
});
}
if (editor.contextMenu) {
editor.contextMenu.addListener(function (element, selection) {
// Get elements parent, strong parent first
var parents = element.getParents("img");
// Check if it's strong
if (parents[0].getName() != "img")
return null; // No item
return { gEditImageItem: CKEDITOR.TRISTATE_ON };
});
}
}
});
I don't understand what's the point in what you're doing (or please explain us). Maybe you should rather customize dialogs than do things from scratch?