just found this plugin and like it pretty well so far. But, I'm having trouble with it. When I'm using the wheels option, I'm having trouble with the display:inline option working properly. If I remove the display:inline option and let it default to showing the input, I can click on it and it brings up everything in a modal fashion and it scrolls properly. Using the inline option, the scrollers won't work properly. Hoping someone can offer some assistance. Thanks!
Here's my code:
var options = [{
'Wheel 1': {
Option1: 'Option1'
, Option2: 'Option2'
, Option3: 'Option3'
, Option4: 'Option4'
, Option5: 'Option5'
, Option6: 'Option6'
, Option7: 'Option7'
}
, 'Wheel 2': {
Option1: 'Option1'
, Option2: 'Option2'
, Option3: 'Option3'
, Option4: 'Option4'
}
, 'Wheel 3': {
Option1: 'Option1'
, Option2: 'Option2'
, Option3: 'Option3'
}
}];
$('#ProjectSpinner').scroller({
theme: 'default',
preset: 'select',
rows:3,
//display: 'inline' <-- This is what kills it,
mode: 'scroller',
showLabel: true,
headerText: '<p style="font-weight:bold;font-size:1.3em;">Automagically Spin Up Your Project</p>',
wheels: options,
onShow: function (html, instance) {
$("input[id$='_dummy']").hide();
}
});
The problem is you are using the select preset with custom wheels. You should not use both, at the same time. You either use the select preset without the wheels option, or you use custom wheels without the preset option.
Related
I've created a custom dialog with a dropzone in order to upload files and images to our server. By default the dropzone renders with 'Drop an image here' / 'Browse for an image'.
As part of the tinymce editor options file_picker_type allows setting of the default dropzone and I wondered how to access these options for a stand-alone dropzone?
My tinymce options include:
tinymce.init({
file_picker_types: 'file image'
});
My upload dialog config looks something like this:
const upload_config = {
title: 'Upload files',
size: 'medium',
body: {
type: 'panel',
{
type: 'dropzone',
name: 'file_drop',
types: 'file image' //// <----- something like this???
}
]
},
buttons: [
{
type: 'cancel',
name: 'closeButton',
text: 'Cancel',
},
{
type: 'submit',
name: 'submitButton',
text: 'Upload',
buttonType: 'primary'
}
],
onSubmit: (api) => {
// handle upload here
}
};
Anybody managed to fathom this? The tinymce docs are in no way comprehensive as they simply say "A dropzone is a composite component that catches drag and drops items or lets the user browse that can send a list of files for processing and receive the result." but give no details on how to actually do that with a stand alone dropzone.
I've managed to make it all work, but this is the last hurdle.
Thanks in advance
Are you trying to override the default image/file upload dialog with the custom one? I'm asking because I see the file_picker_types config option. To do so, you will need to use the file_picker_callback.
If it's something else and you are not trying to override the default dialog, use this interactive example as a base. You will need to:
a) Register the custom button with a setup function:
setup: function (editor) {
editor.ui.registry.addButton('custom-upload', {
icon: 'upload',
onAction: function () {
editor.windowManager.open(upload_config)
}
})
},
b) Add this button to the toolbar via toolbar: 'custom-upload'. This way, pressing the button will open the dialog based on the upload_config variable.
c) You've made a mistake in the panel config. I guess, you forgot to create the items array at the beginning. Instead of
type: 'panel',
{
type: 'dropzone',
name: 'file_drop',
types: 'file image' //// <----- something like this???
}
]
There should be:
type: 'panel',
items: [
{
type: 'dropzone',
name: 'file_drop',
label: 'Dropzone',
}
]
I've created this fiddle as a quick demo: https://fiddle.tiny.cloud/3iiaab
P.S. The dropzone component does not support file types. But you can check the file types after they are uploaded.
So I have this test case which I need to solve. Background is updating dev environment to newer version and after that a lot of our tests broke.
Here I have a weird case which results in:
"Failed to parse selector: Label price detail 1"
This is how the test snippet looks like, I hope I've added all that is necessary.
it('Should render with price and one addon', () => {
data.addonHeaderName = 'addonHeaderName';
data.addons.push(
{
price: {
label: 'Addon text 1',
value: 50.33,
unit: 'dollars',
vat: 'excl'
},
discount: {
label: 'Addon text 2',
value: 11.43,
unit: 'dollars',
vat: 'excl'
},
future: false,
addonIcon: 'icon',
ecoText: 'Addon eco text',
linkUrl: 'http://testaddonlink.com'
}
);
data.contract.prices.push(
{
id: 'price',
label: 'Label price detail 1',
unit: 'dollars',
value: 4.03
},
{
id: 'Label price detail 2',
label: 'Discount',
unit: 'dollars',
value: -3.00
}
);
const component = shallow(
<MyContract
data={data}
andSomeOtherStuff={otherStuff}
/>
);
expect(component).toMatchSnapshot();
expect(component.find('Label price detail 1')).toBeTruthy();
expect(component.find('Label price detail 2')).toBeTruthy();
expect(component.find('Addon text 1')).toBeTruthy();
expect(component.find('Addon text 2')).toBeTruthy();
expect(component.find('Addon eco text')).toBeTruthy();
If I comment out the first expectation, it hits the next one, and then the other one etc etc.
Earlier we ran Enzyme 2.9.1 together with enzyme-adapter-react-15 (and of course React 15) but since we've upgraded to React 16 we also need to update a few other dependencies such as this one. And then shit hit the fan.
Now we're on Enzyme 3.8.0, enzyme-adapter-react-16.3 and React 16.3.x.
I've been fiddling around with trying to get it as a string instead but no bueno. Any ideas on what I'm missing here?
Enzyme find works with css selectors so if you would like to search on the label there you should probably use something like:
component.find('[label="Label price detail 1"]')
Additionally I believe this will always be truthy no matter if it's found or not. (Not sure on that one though).
I usually use .toHaveLength(1) to check if it gets rendered!
I had this before, this looks like a typing error. Confirm the strings.
I am using bootstrap-select as a custom_select option for filter type multi_select and select with yadcf. Both are displaying fine and are being initialized but the dropdown wont toggle open or closed when clicked for select or multi_select. I can see that there are options in the dropdown as I have set to 'selectAll'. See here
See my code below:
var _bootstrapselect;
yadcf.initSelectPluginCustomTriggers(
function ($filterSelector) {
_bootstrapselect = $filterSelector.selectpicker({
});
_bootstrapselect.selectpicker('selectAll');
},
function ($filterSelector) {
_bootstrapselect.selectpicker('refresh');
},
function ($filterSelector) {
_bootstrapselect.selectpicker('destroy');
});
yadcf.init(table, [
{
column_number: 0,
filter_container_id: 'external_filter_container_0',
filter_type: 'multi_select',
select_type: 'custom_select',
style_class: 'form-control selectpicker',
filter_default_label: 'Filter Column',
filter_reset_button_text: false,
}
]);
I have no console errors so it does seem like my boostrap js and bootstrap css files are being loaded in the correct order. I also have successfully setup a bootstrap-select outside of yadcf and it works fine. Any help would be appreciated.
I was able to resolve all issues with bootstrap-select and yadcf. Don't use nuget package manager to download bootstrap-select. That was the issue. use CDNJS from link here. Also, Place the script link at the bottom after bootstrap, datatables and yadcf scripts.
Final Code:
var _bootstrapselect;
yadcf.initSelectPluginCustomTriggers(
function ($filterSelector) {
_bootstrapselect = $filterSelector.selectpicker({});
},
function ($filterSelector) {
_bootstrapselect.selectpicker('refresh');
},
function ($filterSelector) {
_bootstrapselect.selectpicker('destroy');
}
);
yadcf.init(table, [
{
column_number: 0,
filter_container_id: 'external_filter_container_0',
filter_type: 'multi_select',
select_type: 'custom_select',
style_class: 'form-control selectpicker',
filter_default_label: 'Filter Column',
filter_reset_button_text: false,
}
]);
I am using ng-admin to write a admin management. I met below issue, can somebody help me?
In my creationView, I would like to show different fields(text/video/pictures) according to the selection of "type" field. How I can make it?
var articles = nga.entity('articles');
articles.creationView().fields([
nga.field('type','choice')
.validation({ required: true })
.choices([
// 1: txt, 2: pic, 3: vid
{ value: 1, label: 'Text'},
{ value: 2, label: 'Picture'},
{ value: 3, label: 'Video'},
]),
nga.field('txt','file')
.attributes({ placeholder: 'Write something... !' }),
nga.field('pic','file')
.label('Picture(.jpg|.png)')
.uploadInformation({ 'url': '/api/adminapi/uploadPicture', 'apifilename': 'pictures', 'accept': 'image/jpg,image/png'}),
nga.field('vid','file')
.label('Video(.mp4)')
.uploadInformation({ 'url': '/api/adminapi/uploadVideo', 'apifilename': 'video', 'accept': 'video/mp4'}),
])
The Field Configuration doc page explains how to do this using the "template" field config:
template(String|Function, templateIncludesLabel=false) All field types
support the template() method, which makes it easy to customize the
look and feel of a particular field, without sacrificing the native
features.
...
To force the template to replace the
entire line (including the label), pass true as second argument to the
template() call. This can be very useful to conditionally hide a field
according to a property of the entry:
post.editionView()
.fields([
nga.field('category', 'choice')
.choices([
{ label: 'Tech', value: 'tech' },
{ label: 'Lifestyle', value: 'lifestyle' }
]),
nga.field('subcategory', 'choice')
.choices(function(entry) {
return subCategories.filter(function (c) {
return c.category === entry.values.category;
});
})
// display subcategory only if there is a category
.template('<ma-field ng-if="entry.values.category" field="::field" value="entry.values[field.name()]" entry="entry"
entity="::entity" form="formController.form"
datastore="::formController.dataStore"></ma-field>', true),
]);
I just have a work round method. That is using .attributes(onclick, "return updateButton();") for nga.field("type"). In updateButton() method, it will help to check current 'type' field value and using DOM methods to change the button enable and disabled.
However, I still realy appreciate that if this requirement can be support in future. It will be helpful for user to make UI controls easily.
I'm trying to set up an Extensible Calendar Pro in my ExtJs 4.1 application, but I still get a name is undefined error.
EDIT:
I solved the original problem, but directly went in another.
Updated code:
Ext.define('ZeuS.view.panels.ZeusMainPanel',{
extend: 'Ext.panel.Panel',
id : 'zeusMainPanel',
alias : 'widget.zeus',
requires : [
'Extensible.Extensible',
'Extensible.calendar.CalendarPanel',
'Extensible.calendar.data.MemoryEventStore',
'Extensible.calendar.data.EventModel',
'Extensible.calendar.view.*'
],
autoShow : true,
layout : 'border',
border : false,
initComponent : function(){
this.items = [{
/*
* Some other Ext Elements
*/
}, {
region : 'east',
xtype : 'extensible.calendarpanel',
name : 'zeus-calendar',
width : 500,
eventStore: Ext.create('Extensible.calendar.data.EventStore', {
data: Ext.create('Extensible.calendar.data.EventModel',{
StartDate: '2101-01-12 12:00:00',
EndDate: '2101-01-12 13:30:00',
Title: 'My cool event',
Notes: 'Some notes'
})
})
}
];
this.callParent(arguments);
}
});
Now it loads all classes correctly when the Extensible singleton is included, but nothing works. I just have a white screen and no functions in the controller or anywhere else are called. When I remove it from the requires list it comes up with this error: Extensible.log is not a function
Do I use the plugin at all right?
Any advice?
Extensible.log is defined on the Extensible singleton, so it should always be available if your dependencies and includes are set up correctly. You really should post in the Extensible forums with additonal details (Ext version, Extensible version, script include markup) as this is basically a product support question.
EDIT: By the way, there is no such thing as Extensible.Extensible, which might be part of your problem. Also you cannot use wildcard requires statements for non-Sencha classes. You might try getting a basic example working first before trying to create a complex layout with it.