here is link to what i have done. https://codesandbox.io/s/vuetable-2-data-mode-with-pagination-using-data-manager-prop-9gv99
import { VuetableFieldCheckbox } from "vuetable-2";
{
name: VuetableFieldCheckbox,
titleClass: 'center aligned',
dataClass: 'center aligned'
}
maybe due to update of vuetable, it must config like this.
working with me
I had the same problem. I solved it by registering the VuetableFieldCheckbox component globally. This is accomplished by adding these lines to the project's main.js file:
import { VuetableFieldCheckbox } from 'vuetable-2'
Vue.component('vuetable-field-checkbox', VuetableFieldCheckbox)
Note: any special field component that is referenced by the name: '__some-component' convention in a field definition must be registered globally in the same fashion as shown above.
Related
I'm using commitMode="Immediate" and I'm trying to disable my save button when any input is invalid.
What is the recommended approach to achieve this?
I understand that I can just set a variable when using "manual" mode from my component, but I can't find any event that represents a change in validity of preferably the complete Raddataform (otherwise of a single property) when using Immediate validation.
You can do this by listening for validation events and then updating your model.
From this example, add the propertyValidated listener:
<RadDataForm #propertyValidated="onPropertyValidated" ...></RadDataForm>
Then change your state:
methods: {
onPropertyValidated({ object, propertyName, entityProperty }) {
this.$refs.button.enabled = !entityProperty.isValid;
}
}
You will probably want to keep track of all validations in this case, or you could use the complete dataform.hasValidationErrors().
This is the NS-Vue solution, but totally applicable in Angular.
Add a #propertyValidated="onValidateForm" event listener that triggers on each validation. Then you can use hasValidationErrors() on the form to see if the form is valid. The only trick is that is has to be wrapped in a setTimeout(), like so:
onValidateForm(event) {
setTimeout(() => {
this.validated = !event.object.hasValidationErrors();
console.log("form valid: " + this.validated);
}, 100);
}
For a complete solution, see this playground.
I'm playing with Vuetify and autocomplete component. In the official documentation, with the first example in codepen, when I've changed the name of the event (and function) to bound, it doesn't work. The code:
:search-input.sync="search"
to
:search-input.sync="renamedSearch"
and the function too
watch: {
search (val) { // changed to:
renamedSearch(val) {
I've seen it when I've tried to use two autocompletes and the second search never worked.
How can I use another autocomplete or change the name of the function?
Thanks
add your new value in data
data() { return{ renamedSearch:'', }}
I want to change group of CSS items in jqGrid. Documentation is saying
Of course if we want to change not only one CSS item from a group, but two or more we can use jQuery extend to do this:
var my_col_definition = {
icon_move : 'ui-icon-arrow-1',
icon_menu : "ui-icon-pencil"
}
$.extend( $.jgrid.styleUI.jQueryUI.colmenu , my_col_definition );
And this is working partially. But I want to override all icons in my Bootstrap with next code:
$.extend($.jgrid.styleUI.Bootstrap, {
common: {
icon_base: "fa"
},
inlinedit: {
icon_edit_nav: "fa-edit"
},
navigator: {
icon_edit_nav: "fa-edit"
},
// ...
});
and my grid stops working and does not respond to any commands. There are no errors in console.
Do anybody know how to fix the problem in an elegant way and do not override every group separately?
It is unknown which versions of Guriddo jqGrid and Bootstrap are used.
I see you try to use the fontAwesome.
With the last release you can use fontAwesome with ths following settings:
<script>
$.jgrid.defaults.styleUI = 'Bootstrap4';
$.jgrid.defaults.iconSet = "fontAwesome";
</script>
And point to the needed css files as described in this documentation
You can change the icons the way you do in your code without problems - I have tested this and it works.
In any case, please prepare a simple demo which reproduces the problem, so that we can look into it.
In CKEditor 5 I don't see field for target attribute in link dialog.
How to add such field? Or set target=_blank as default.
Thanks
Since version 11.1.0 of a Link Plugin, there is added link decorator feature. This feature provides an easy way to define rules when and how to add some extra attributes to links.
There might be manual or automatic decorators.
First provides a UI switch which might be toggled by the user. When the user edits a link and toggles it, then preconfigured attributes will be added to the link e.g. target="_blank".
Second one, are applied automatically when content is obtained from the Editor. Here you need to provide a callback function which based on link's URL decides if a given set of attributes should be applied.
There is also a preconfigured decorator, which might be turn on with simple config.link.addTargetToExternalLinks=true. It will add target="blank" and rel="noopener noreferrer" to all links started with: http://, https:// or //.
You can achieve it by adding this code in CKEditor Initialization Script:
ClassicEditor
.create( document.querySelector( '#editor' ), {
// ...
link: {
decorators: {
openInNewTab: {
mode: 'manual',
label: 'Open in a new tab',
defaultValue: true, // This option will be selected by default.
attributes: {
target: '_blank',
rel: 'noopener noreferrer'
}
}
}
}
} )
.then( ... )
.catch( ... );
Here is the Documentation Link . It will be working fine.
I have tried to add justify plugin to be able to align text right, left or centre. But after following the instructions in the documentation (http://apostrophecms.org/docs/tutorials/howtos/ckeditor.html), I wonder if the plugin should be located in a specific folder (mine is at public/modules/apostrophe-areas/js/ckeditorPlugins/justify/), as it disappears when the site is loaded, but if I include it in some other folder such as public/plugins/justify still doesn't work.
This is my code just in case: (located at lib/modules/apostrophe-areas/public/js/user.js)
apos.define('apostrophe-areas', {
construct: function(self, options) {
// Use the super pattern - don't forget to call the original method
var superEnableCkeditor = self.enableCkeditor;
self.enableCkeditor = function() {
superEnableCkeditor();
// Now do as we please
CKEDITOR.plugins.addExternal('justify', '/modules/apostrophe-areas/js/ckeditorPlugins/justify/', 'plugin.js');
};
}
});
Also, it would be nice to know how the plugin should be called at the Toolbar settings for editable widgets.
Thanks!
The URL you need is:
/modules/my-apostrophe-areas/js/ckeditorPlugins/justify/
The my- prefix is automatically prepended so that the public folders of both the original apostrophe-areas module and your project-level extension of it can have a distinct URL. Otherwise there would be no way for both to access their user.js, for instance.
I'll add this note to the HOWTO in question, which currently handwaves the issue by stubbing in a made-up URL.
As for how the plugin should be called, use the toolbar control name exported by that plugin — that part is a ckeditor question, not really an Apostrophe one. But looking at the source code of that plugin they are probably JustifyLeft, JustifyCenter, JustifyRight and JustifyBlock.
It turns out that it's not enough to simply call CKEDITOR.plugins.addExternal inside apostophe-areas. You also need to override self.beforeCkeditorInline of the apostrophe-rich-text-widgets-editor module and explicitly call self.config.extraPlugins = 'your_plugin_name';.
Here's what I ended up with:
In lib/modules/apostrophe-areas/public/js/user.js:
apos.define('apostrophe-areas', {
construct: function(self, options) {
// Use the super pattern - don't forget to call the original method
var superEnableCkeditor = self.enableCkeditor;
self.enableCkeditor = function() {
superEnableCkeditor();
// Now do as we please
CKEDITOR.plugins.addExternal('justify', '/modules/my-apostrophe-areas/js/ckeditorPlugins/justify/', 'plugin.js');
};
}
});
then in in lib/modules/apostrophe-rich-text-widgets/public/js/editor.js:
apos.define('apostrophe-rich-text-widgets-editor', {
construct: function(self, options) {
self.beforeCkeditorInline = function() {
self.config.extraPlugins = 'justify';
};
}
});
For some reason doing CKEDITOR.config.extraPlugins = 'justify' inside apostrophe-areas does not work, probably due to the way how CKEDITOR is initialized;
One more thing: this particular plug-in (justify, that is) does not seem to follow the button definition logic. It has button icons defined as images, whereas CKEditor 4.6 used in Apostrophe CMS 2.3 uses font-awesome to display icons. It means that the icons that ship with the justify module won't be displayed and you'll have to write your own css for each button individually.
There is another issue which you'll probably face when you finally enable the justify buttons. The built-in html sanitizer will be strip off the styles justify adds to align the content.
Apostrophe CMS seems to be using sanitize-html to sanitize the input, so changing CKEditor settings won't have any effect. To solve the issue, add the following to your app.js:
'apostrophe-rich-text-widgets': {
// The standard list copied from the module, plus sup and sub
sanitizeHtml: {
allowedAttributes: {
a: ['href', 'name', 'target'],
img: ['src'],
'*': ['style'] //this will make sure the style attribute is not stripped off
}
}
}
Thank you both for your help. After following both approaches of: locating the plugin at my-apostrophe-areas folder as well as editing editor.js on the apostrophe-rich-text widget (the sanitize.html file was already using that configuration), I got the plugin working. However, I was still having the issue with the icons.
I fixed that adding the Font Awesome icons that correspond to align-justify, align-right, align-left and align-center at the end of public/modules/apostrophe-areas/js/vendor/ckeditor/skins/apostrophe/editor.less