I have defined a custom input with type=file , but I can't access the selected data after pressing the Submit key.
(I am new to such an exercise so please pardon my ignorance.. Also could not find examples/samples to work with..)
add a custom input and upload/cancel keys in the panel:
setup: function (editor) {
editor.ui.registry.addButton("customInsertButton", {
icon: "embed",
tooltip: "Insert Media",
onAction: function () {
editor.windowManager.open({
title: "Insert Media",
body: {
type: "panel",
items: [
{
type: "htmlpanel",
name: "file",
html: '<input type="file" class="input"
name="file" id="file_attach"
style="font-size: 16px; padding: 30px 0px; width:100%;" />',
},
{
type: "alertbanner",
level: "error",
text: "text error",
icon: "info",
},
],
},
onSubmit: function (api) {
const data = api.getData(); //it is empty :(
api.close();
},
buttons: [
{
text: "Close",
type: "cancel",
onclick: "close",
},
{
text: "Upload",
type: "submit",
primary: true,
enabled: true,
},
],
});
},
});
},
Related
I am using TinyMCE 5.6.2 and I have a weird bug with a custom dialog. I have it set to a size of large with a tab panel for the content. I have a header and two buttons setup. When the dialog opens, the buttons are pushed down so that you can just see top few pixels. It looks like some media breakpoint issue because when I resize the window, the buttons become fully visible at a height of 654px and below.
How can I get these buttons to show all the time?
tinymce.PluginManager.add('imageGallery', function (editor, url){
editor.ui.registry.addButton('imageGallery', {
icon: 'gallery',
tooltip: 'Image Gallery',
onAction: function() {
editor.windowManager.open({
title: 'Image Gallery',
size: 'large',
body: {
type: 'tabpanel',
tabs:[
{
name: 'upload',
title: 'Upload',
items: [
{
type: 'dropzone',
name: 'dropzone'
}
]
},
{
name: 'site',
title: 'My Images',
items: [
{
type: 'htmlpanel',
html: '<div id="myImages" class="img-flex-grid"></div>'
}
]
},
{
name: 'shared',
title: 'Shared',
items: [
{
type: 'htmlpanel',
html: '<div id="sharedCategories" style="float: left; min-width: 150px; background-color: lightgray; font-size: 14px; color: rgba(34,47,62,.7);"></div><div id="sharedImages" class="img-flex-grid" style="float: right; width: 900px"></div>'
}
]
},
],
},
buttons: [
{
type: 'submit',
text: 'Select',
name: 'select',
disabled: true,
primary: true,
},
{
type: 'cancel',
text: 'Close'
}],
onChange: function(dialogInstance, details) {
handleInputChange(dialogInstance, details);
},
onSubmit: function() {
handleSubmit();
},
onTabChange: function(dialogInstance, details) {
handleMainTabChange(dialogInstance, details.newTabName)
}
});
}
});
}
If anyone else is having this issue, I had to override a CSS class. Because I am accessing TinyMCE via a CDN, I do not see a way to create a custom skin or theme. This is the code that I added to my CSS file.
.tox-dialog--width-lg {
min-height: 650px !important;
height: auto !important;
}
I am using SideMenuBar from https://www.npmjs.com/package/vue-sidebar-menu to generate a side menu for my app. The elements in the bar should be dynamic based on whether the person is logged-in. The problem I have is that when I login, the items arent reactive - I need to refresh my browser for the menu to refresh. Any idea what I am doing wrong?
<div id="app">
<sidebar-menu :menu="dynamicMenu" #toggle-collapse="onToggleCollapse" #item-click="onItemClick" :collapsed="collapseMenu" >
</sidebar-menu>
<router-view />
computed: {
isAuthorized: function() {
return UserStorageService.GetUser() === null ? false : true;
},
dynamicMenu() {
return [
{
header: true,
title: "Menu",
hiddenOnCollapse: true
},
{
href: { path: "/" },
title: "Home",
icon: "fas fa-home"
},
{
href: { path: "/Dashboard" },
title: "Dashboard",
icon: "fas fa-folder",
hidden: !this.isAuthorized
},
{
href: { path: "/" },
title: "Reporting",
icon: "fas fa-archive",
hidden: !this.isAuthorized
},
{
href: { path: "/" },
title: "My profile",
icon: "fas fa-share-alt",
hidden: !this.isAuthorized
}
]
}
},
When I sign-in, the value of "isAuthorized" should change to true. That value should then be assigned to my dynamic menu (the inverse) and should toggle the menu option hidden/not-hidden.
I'm new in DataTables and I have a simple datatable for which I'm trying to add a Font Awesome fa-info-circle image instead of one column header by using render like:
table = $("#datatable-buttons").DataTable({
data: document.pvm.tableContent(),
columns: [
{ data: "Info", render: function (data, type, full, meta) { if (type === 'display') return '<span style="font-size:75%" class="fa fa-info-circle"></span>' } },
{ data: "WiFi", title: "WiFi" },
{ data: "GPS", title: "GPS" },
],
fixedHeader: true,
dom: "lfBrtip",
buttons: [
{
extend: "copy",
className: "btn-sm"
},
{
extend: "csv",
className: "btn-sm",
filename: "DeviceMnag"
},
{
extend: "excel",
className: "btn-sm",
filename: "DeviceMnag"
},
{
extend: "pdfHtml5",
className: "btn-sm",
filename: "DeviceMnag"
},
{
extend: "print",
className: "btn-sm"
},
],
});
But it seems that my icon instead of being just in the header for Info column, there is no icon in the header but in the data columns instead of the correct data. Is is possible to add a icon just for one field in the header?
I believe when you are saying "column header" you mean the title? render() is for rendering column data, you set the column header through the title property :
var table = $('#example').DataTable({
columnDefs: [{
targets: 0,
data: '0', //just use DOM
title: '<i class="fa fa-info-circle fa-lg"></i>'
}]
})
demo -> http://jsfiddle.net/6kp3tvpb/
title can be a function as well :
title: function() {
return '<i class="fa fa-info-circle fa-lg"></i>'
}
But notice that this callback only is called once.
For example, I have a view with model IEnumerable<Correspondence>. I want to bind it to KendoUI grid. What should I do? I've tried
#model IEnumerable<Correspondence>
<div id="Correspondence"></div>
<script>
$(document).ready(function () {
$('#Correspondence').kendoGrid({
dataSource: {
data: #Html.Raw(Json.Encode(Model)),
editable: { destroy: true },
batch: true,
pageSize: 15,
schema: {
model: {
id: "Id",
fields: {
Subject: { type: "string" },
CorrespondenceType: { type: "number" },
SentDate: { type: "date" }
}
}
}
},
navigatable: true,
selectable: "row",
filterable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true
},
columns: [
{
title: "Subject",
field: "Subject"
},
{
title: "Type",
field: "CorrespondenceType"
},
{
title: "Sent Date",
field: "SentDate",
format: "{0:MM/dd/yyyy}"
},
{
command: [{ name: "openCorrespondence", text: "Open", className: "k-grid-openLaboratory", imageClass: "k-icon k-i-maximize", click: Open },
{ name: "deleteCorrespondence", text: "Delete", className: "k-grid-deleteLaboratory", imageClass: "k-icon k-delete", click: Delete },
{ name: "EditCorrespondence", text: "Edit", className: "k-grid-editLaboratory", imageClass: "k-icon k-edit", click: Edit }],
title: "Action"
}
]
});
}); // end ready
</script>
But it doesn't work. The table even doesn't show up. Please help me. Thank you.
Edited!!!
I have solved my own problem. Because I used command column, so I have to add 3 functions: Open, Edit, and Delete. Then, the grid showed successfully.
Example
I've been looking into getting this to work but so far instead of a dropdown I get and empty textbox which doesn't do anything.
Below is my present code:-
#section js {
<script type="text/x-kendo-template" id="template">
<div class="toolbar">
<label class="category-label" for="external">Show checks by ex:</label>
<input type="search" id="external" style="width: 230px"></input>
</div>
</script>
<script type="text/javascript">
var theGrid;
$().ready(function () {
$('#listDiv').kendoGrid({
dataSource: {
type: 'json',
serverPaging: true,
pageSize: 10,
transport: {
read: {
url: '#Url.Action("_IList", "Entry", new { #ExId = Model.ExId })',
data: { ignore: Math.random() }
}
},
schema: {
model: {
id: 'Id',
fields: {
Id: { type: 'number' },
Name: { type: 'string' },
Ex: { type: 'string' },
Date: { type: 'string' },
Check1: { type: 'string' },
Check2: { type: 'string' },
Check3: { type: 'string' },
Check4: { type: 'string' },
Check5: { type: 'string' },
Edit: { type: 'string' }
}
},
data: "Data",
total: "Count"
}
},
scrollable: false,
toolbar: kendo.template($("#template").html()),
columns:
[
{
field: 'Name'
},
{
field: 'Ex'
},
{
field: 'Date'
},
{
template: '#=Template1#' + sitePath + '#=Patient1#',
field: 'Patient1',
title: 'Patient 1',
width: 50
},
{
template: '#=Template2#' + sitePath + '#=Patient2#',
field: 'Patient2',
title: 'Patient 2',
width: 50
},
{
template: '#=Template3#' + sitePath + '#=Patient3#',
field: 'Patient3',
title: 'Patient 3',
width: 50
},
{
template: '#=Template4#' + sitePath + '#=Patient4#',
field: 'Patient4',
title: 'Patient 4',
width: 50
},
{
template: '#=Template5#' + sitePath + '#=Patient5#',
field: 'Patient5',
title: 'Patient 5',
width: 50
}
],
pageable: true
});
var dropDown = grid.find("#external").kendoDropDownList({
dataTextField: "ExName",
dataValueField: "ExId",
autoBind: false,
optionLabel: "All",
dataSource: {
type: "json",
severFiltering: true,
transport: {
url: '#Url.Action("_Ex", "Entry")',
data: { ignore: Math.random() }
}
},
change: function () {
var value = this.value();
if (value) {
grid.data("kendoGrid").dataSource.filter({ field: "ExId", operator: "eq", value: parseString(value) });
} else {
grid.data("kendoGrid").dataSource.filter({});
}
}
});
theGrid = $('#listDiv').data('kendoGrid');
});
</script>
<style scoped="scoped">
#grid .k-toolbar
{
min-height: 27px;
}
.external-label
{
vertical-align: middle;
padding-right: .5em;
}
#external
{
vertical-align: middle;
}
.toolbar {
float: right;
margin-right: .8em;
}
</style>
}
<h2>Check Lists</h2>
<div id="listDiv"></div>
<br />
It works to display all check lists for each Ex which I can select on a previous page and pass in the string Id to this one but I'd like to be able to figure out what's wrong with with the toolbar template as having the functionality on 1 page rather than spread over 2 is far more desirable.
Any help/guidance will be much appreciated.
Edit:
I did also find someone else who encountered the problem except they didn't get a forum response.
Example 2
You mention that somebody else encountered the problem and didn't receive a response, however the linked forum thread does contain a response and an answer to this issue. In that particular case a Javascript error had occurred on the page which prevented the dropdown from initializing correctly and I believe this is also the case for yourself.
Although not completely working because there isn't a valid datasource, I took your example code and dumped it into a jsFiddle and (after fixing some JS errors) you can see that the dropdown appears absolutely fine.
In particular, there were errors regarding grid and sitePath not being defined that prevented the dropdown from initializing.
var grid;
var sitePath = '';
$().ready(function () {
grid = $('#listDiv').kendoGrid({
dataSource: {
type: 'json',
serverPaging: true,
pageSize: 10,
transport: {
read: {
url: '',
data: { ignore: Math.random() }
}
},
schema: {
model: {
id: 'Id',
fields: {
Id: { type: 'number' },
Name: { type: 'string' },
Ex: { type: 'string' },
Date: { type: 'string' },
Check1: { type: 'string' },
Check2: { type: 'string' },
Check3: { type: 'string' },
Check4: { type: 'string' },
Check5: { type: 'string' },
Edit: { type: 'string' }
}
},
data: "Data",
total: "Count"
}
},
scrollable: false,
toolbar: kendo.template($("#template").html()),
columns:
[
{
field: 'Name'
},
{
field: 'Ex'
},
{
field: 'Date'
},
{
template: '#=Template1#' + sitePath + '#=Patient1#',
field: 'Patient1',
title: 'Patient 1',
width: 50
},
{
template: '#=Template2#' + sitePath + '#=Patient2#',
field: 'Patient2',
title: 'Patient 2',
width: 50
},
{
template: '#=Template3#' + sitePath + '#=Patient3#',
field: 'Patient3',
title: 'Patient 3',
width: 50
},
{
template: '#=Template4#' + sitePath + '#=Patient4#',
field: 'Patient4',
title: 'Patient 4',
width: 50
},
{
template: '#=Template5#' + sitePath + '#=Patient5#',
field: 'Patient5',
title: 'Patient 5',
width: 50
}
],
pageable: true
});
var dropDown = grid.find("#external").kendoDropDownList({
dataTextField: "ExName",
dataValueField: "ExId",
autoBind: false,
optionLabel: "All",
dataSource: {
type: "json",
severFiltering: true,
transport: {
url: '#Url.Action("_Ex", "Entry")',
data: { ignore: Math.random() }
}
},
change: function () {
var value = this.value();
if (value) {
grid.data("kendoGrid").dataSource.filter({ field: "ExId", operator: "eq", value: parseString(value) });
} else {
grid.data("kendoGrid").dataSource.filter({});
}
}
});
theGrid = $('#listDiv').data('kendoGrid');
});