File Browser not as part of the Kendo UI Editor - kendo-ui

I am looking for a way to get stand alone File Browser control just like in the Kendo UI Editor.
The presented solution in their forum uses Image Browser which has file type restrictions and thumbnails that we do not need.

If you are looking for file browser not as part of the Kendo UI Rich Text Editor control, not image browser, you can accomplish this (although it is not officially supported by Telerik/Progress).
You can use:
kendoFileBrowser
<div class="file-borwser-js"></div>
$(".file-borwser-js").kendoFileBrowser({
"messages":
{
"deleteFile": "Сигурни ли сте че искате да изтриете \"{0}\"?",
"directoryNotFound": "Директория с посоченото име не бе открита.",
"emptyFolder": "Празна папка",
"invalidFileType": "Избраният файл \"{0}\" не е валиден. Поддържаните файлови формати са {1}.",
"orderBy": "Подреди по:",
"orderBySize": "Големина",
"orderByName": "Име",
"overwriteFile": "Файл с име \"{0}\" вече съществува в тази папка. Искате ли да го презапишете?",
"uploadFile": "Качи файл",
"dropFilesHere": "преместете с мишката файлове тук за да ги качите",
"search": "Търси"
},
"transport":
{
"type": "filebrowser-aspnetmvc",
"read": { "url": "/FileBrowser/Read" },
"uploadUrl": "/FileBrowser/Upload",
"destroy": { "url": "/FileBrowser/Destroy" },
"create": { "url": "/FileBrowser/Create" },
"fileUrl": "/FileBrowser/File?path={0}"
}
});
The way I got this is from the inline Javascript that is downloaded with the Kendo Editor. And copied the "fileBrowser" element. Then I used this element as parameter of kendoFileBrowser()
jQuery(function(){jQuery("#_0__Content").kendoEditor({"tools":[{"name":"bold"},{"name":"italic"},{"name":"underline"},{"name":"strikethrough"},{"name":"justifyLeft"},{"name":"justifyCenter"},{"name":"justifyRight"},{"name":"justifyFull"},{"name":"insertUnorderedList"},{"name":"insertOrderedList"},{"name":"outdent"},{"name":"indent"},{"name":"createLink"},{"name":"unlink"},{"name":"insertImage"},{"name":"insertFile"},{"name":"subscript"},{"name":"superscript"},{"name":"createTable"},{"name":"addColumnLeft"},{"name":"addColumnRight"},{"name":"addRowAbove"},{"name":"addRowBelow"},{"name":"deleteRow"},{"name":"deleteColumn"},{"name":"viewHtml"},{"name":"formatting"},{"name":"cleanFormatting"},{"name":"fontName"},{"name":"fontSize"},{"name":"foreColor"},{"name":"backColor"}],"messages":{"bold":"Получер","italic":"Курсив","underline":"Подчертай","strikethrough":"Зачертай","superscript":"Горен индекс","subscript":"Долен индекс","justifyCenter":"Центрирай","justifyLeft":"Подравни отляво","justifyRight":"Подравни отдясно","justifyFull":"Подравни","insertOrderedList":"Вмъкни номериран списък","insertUnorderedList":"Вмъкни списък","indent":"Добави отстъп","outdent":"Премахни отстъп","createLink":"Направи препратка","unlink":"Премахни препратка","insertImage":"Вмъкни картина","insertFile":"Вмъкни файл","insertHtml":"Вмъкни HTML","fontName":"Шрифт","fontNameInherit":"(наследен шрифт)","fontSize":"Размер на шрифта","fontSizeInherit":"(наследен размер)","formatBlock":"Избери формат","styles":"Стилове","backColor":"Цвят на фона","foreColor":"Цвят","viewHtml":"Виж HTML-а","dialogUpdate":"Обнови","createTable":"Създай таблица"},"imageBrowser":{"messages":{"deleteFile":"Сигурни ли сте че искате да изтриете \"{0}\"?","directoryNotFound":"Директория с посоченото име не бе открита.","emptyFolder":"Празна папка","invalidFileType":"Избраният файл \"{0}\" не е валиден. Поддържаните файлови формати са {1}.","orderBy":"Подреди по:","orderBySize":"Големина","orderByName":"Име","overwriteFile":"Файл с име \"{0}\" вече съществува в тази папка. Искате ли да го презапишете?","uploadFile":"Качи файл","dropFilesHere":"преместете с мишката файлове тук за да ги качите","search":"Търси"},"transport":{"read":{"url":"/ImageBrowser/Read"},"type":"imagebrowser-aspnetmvc","thumbnailUrl":"/ImageBrowser/Thumbnail","uploadUrl":"/ImageBrowser/Upload","destroy":{"url":"/ImageBrowser/Destroy"},"create":{"url":"/ImageBrowser/Create"},"imageUrl":"/ImageBrowser/Image?path={0}"}},"fileBrowser":{"messages":{"deleteFile":"Сигурни ли сте че искате да изтриете \"{0}\"?","directoryNotFound":"Директория с посоченото име не бе открита.","emptyFolder":"Празна папка","invalidFileType":"Избраният файл \"{0}\" не е валиден. Поддържаните файлови формати са {1}.","orderBy":"Подреди по:","orderBySize":"Големина","orderByName":"Име","overwriteFile":"Файл с име \"{0}\" вече съществува в тази папка. Искате ли да го презапишете?","uploadFile":"Качи файл","dropFilesHere":"преместете с мишката файлове тук за да ги качите","search":"Търси"},"transport":{"read":{"url":"/FileBrowser/Read"},"type":"filebrowser-aspnetmvc","uploadUrl":"/FileBrowser/Upload","destroy":{"url":"/FileBrowser/Destroy"},"create":{"url":"/FileBrowser/Create"},"fileUrl":"/FileBrowser/File?path={0}"}}});});
Tested on Kendo UI: 2015.1.318
I have tried to post it on their forum as an answer, but apparently you have to be super premium to do so and I am posting it here.

Related

DataTables - Map Data and correcting table layout

I am integrating the DataTables in Django 2.1. But the table is broken and I can not map the data sent by the server to JS.
This is my configuration JS:
<!-- Bootstrap CSS Section -->
<link href="{% static 'bootstrap/dist/css/bootstrap.min.css' %}" type="text/css" rel="stylesheet">
<link href="{% static 'datatables.net-bs4/css/dataTables.bootstrap4.min.css' %}" type="text/css" rel="stylesheet">
<!-- Bootstrap core JavaScript-->
<script src="{% static 'jquery/dist/jquery.min.js' %}"></script>
<script src="{% static 'bootstrap/dist/js/bootstrap.min.js' %}"></script>
<!-- Datatables plugin JavaScript-->
<script src="{% static 'datatables.net/js/jquery.dataTables.js' %}"></script>
<script src="{% static 'datatables.net-bs4/js/dataTables.bootstrap4.js' %}"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('#user-datatable').DataTable({
language: {
"sEmptyTable": "Nenhum registro encontrado",
"sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros",
"sInfoEmpty": "Mostrando 0 até 0 de 0 registros",
"sInfoFiltered": "(Filtrados de _MAX_ registros)",
"sInfoPostFix": "",
"sInfoThousands": ".",
"sLengthMenu": "_MENU_ Resultados por página",
"sLoadingRecords": "Carregando...",
"sProcessing": "Processando...",
"sZeroRecords": "Nenhum registro encontrado",
"sSearch": "Pesquisar",
"oPaginate": {
"sNext": "Próximo",
"sPrevious": "Anterior",
"sFirst": "Primeiro",
"sLast": "Último"
},
"oAria": {
"sSortAscending": ": Ordenar colunas de forma ascendente",
"sSortDescending": ": Ordenar colunas de forma descendente"
}
},
"processing": true,
"serverSide": true,
"ajax": {
"url": "{% url 'authentication:get_users' %}",
"type": "GET",
"dataSrc": ""
},
"columns": [
{"data": 'name'},
{"data": "email"},
{"data": "last_login"},
{"data": "is_active"},
]
});
});
</script>
My Views.py code:
#login_required
def get_users(request):
object_list = CustomUser.objects.all()
data = serializers.serialize('json', object_list)
return JsonResponse(data, safe=False)
This is the Json generated by Views.py that I can see in Firefox:
[
{
"model": "authentication.customuser",
"pk": 1,
"fields":
{"password": "1234",
"last_login": "2018-09-03T15:17:29.007Z",
"is_superuser": true,
"name": "John",
"username": "john",
"email": "john#mail.com",
"is_staff": true,
"is_active": true,
"groups": [],
"user_permissions": []}
},
{
"model": "authentication.customuser",
"pk": 2,
"fields":
{"password": "12345",
"is_superuser": false,
"name": "Ana",
"username": "ana",
"email": "ana#mail.com",
"is_staff": false,
"is_active": true,
"groups": [],
"user_permissions": []}
},
}
]
How do I map this data in JS DataTable to display correctly in columns?
Besides you have a closing curly brace too many (assume it is a copy paste error) you do not need any mapping or change to the JSON. It is nicely sectioned in an array of fields. The only concern is last_login which seem to be left out occasionally, defaultContent solves that :
columns: [
{ data: 'fields.name'},
{ data: 'fields.email'},
{ data: 'fields.last_login', defaultContent: ''},
{ data: 'fields.is_active'}
]
Set "serverSide": false, your script does not support serverside processing anyway. If you must have serverside processing https://github.com/izimobil/django-rest-framework-datatables seems to support at least django 2.0.
I use the dashboard theme css that I downloaded to use in the application and it has bootstrap4 css for datatables. For some reason it was not rendering correctly. I removed the import of these css and added those from the DataTables site:
Removing:
<link href="{% static 'datatables.net-bs4/css/dataTables.bootstrap4.min.css' %}" type="text/css" rel="stylesheet">
Adding:
<link href="{% static 'datatables/media/css/jquery.dataTables.min.css' %}" type="text/css" rel="stylesheet">
The table is now rendered correctly.

How to change my language of DataTable?

I have below Function that my Table information change to an DataTable.
<script type="text/javascript">
$(document).ready(function () {
$('#myTable').DataTable(
{
"sProcessing": "درحال پردازش...",
"sLengthMenu": "نمایش محتویات _MENU_",
"sZeroRecords": "موردی یافت نشد",
"sInfo": "نمایش _START_ تا _END_ از مجموع _TOTAL_ مورد",
"sInfoEmpty": "تهی",
"sInfoFiltered": "(فیلتر شده از مجموع _MAX_ مورد)",
"sInfoPostFix": "",
"sSearch": "جستجو:",
"sUrl": "",
"oPaginate": {
"sFirst": "ابتدا",
"sPrevious": "قبلی",
"sNext": "بعدی",
"sLast": "انتها"
}
}
);
});
</script>
I want change my language of DataTable to Persian But not working.

How to make a dynamic input field as a numeric textbox in Kendo UI?

Here is my situation.
I am making a dynamic form with a help of this article.
Here you can see it (article demo) use kendo template .
<script id="fieldsTemplate" type="text/x-kendo-template">
<li>
<label data-bind="attr: { for: name}, text: label"></label>
<input data-bind="attr: { type: type, name: name, class: css}" # if (get("required")) {# required #} # />
</li>
</script>
After form generated this form is just use HTML5 make the form. It does't have kendo attribute. for a example if I bound data-role attribute and value is numerictextbox It doesn't give me a numeric text box(Think its' type is number). It doesn't have those properties.( if I type a number it doesn't show the default decimal point. It only shows that number.)
But in this example says if we add data-role attribute and value as numerictextbox it will be a numeric text box.
But in documentation or in this , it seems I have to call kendoNumericTextBox method to make a numeric text box.
Even I try to add this code to template but it doesn't work(Please assume that I add this correctly with this ).
$("#mytextboxid").kendoNumericTextBox();​
So what option do I left ??
Thank you very much
You have to set data-role attribute into input element to convert the element into kendo control/element. Please try with the below code snippet.
<body>
<div id="example">
<!-- container UL to host input fields -->
<ul data-template="fieldsTemplate" data-bind="source: fields"></ul>
</div>
<!-- Kendo Template binds properties from model to input fields -->
<script id="fieldsTemplate" type="text/x-kendo-template">
<li>
<label data-bind="attr: { for: name}, text: label"></label>
<input name=#= name # class=#= css # # if (get("required")) {# required #} #
# if (type == 'number') {# data-role="numerictextbox" #}else{# type=#=type# #}# />
</li>
</script>
<script type="text/javascript">
// retrieve the model from an API call
var model = {
"fields": [{
"css": "cssClass1",
"label": "Field 1",
"name": "Field1",
"required": false,
"type": "text"
},
{
"css": "cssClass2",
"label": "Field 2",
"name": "Field2",
"required": true,
"type": "number"
},
{
"css": "cssClass2",
"label": "Checkbox Field",
"name": "CheckField",
"required": false,
"type": "checkbox"
},
{
"css": "cssClass2",
"label": "Email Address",
"name": "Email",
"required": true,
"type": "email"
},
{
"css": "cssClass2",
"label": "Password",
"name": "Password",
"required": true,
"type": "password"
}
]
};
// convert the JSON to observable object
var viewModel = kendo.observable(model);
// bind the model to the container
kendo.bind($("#example"), viewModel);
</script>
</body>
JSFiddle
Let me know if any concern.

How to implement button insert image tiny mce

I am developing my own image manager, until now I have reached to open the pop-up and list my images, but after this I have no idea how to get the URL of the image to insert in tiny mce
Here's is my source code:
$(document).ready(function() {
$('#txapublication').tinymce({
toolbar: 'styleselect | bold underline italic | alignleft aligncenter alignright alignjustify | bullist numlist | link image | media | forecolor backcolor',
plugins: [
'advlist image autolink link lists charmap preview',
'searchreplace wordcount code media',
'save textcolor'
],
menubar: false,
language: 'es',
file_browser_callback: function(field_name, url, type, win) {
win.document.getElementById(field_name).value = 'my browser value';
tinymce.activeEditor.windowManager.open({
title: 'Browse Image',
file: "<? echo PUBLIC_PATH ?>" + 'account/selimgsblog',
width: 450,
height: 305,
resizable: "no",
inline: "yes",
close_previous: "no",
buttons: [{
text: 'Insert',
classes: 'widget btn primary first abs-layout-item',
disabled: true,
onclick: 'close'
}, {
text: 'Close',
onclick: 'close',
window: win,
input: field_name
}]
});
}
});
});
Here is my source to list the images, these images come from a method in a controller
<?foreach($imagenes as $img):?>
<img src="<? echo PUBLIC_PATH.$img->path.$img->name?>" width="80" height="80"/>
<?endforeach;?>
I am using tiny mce 4.0.6
You can try:
In buttons.js
(function() {
tinymce.PluginManager.add('my_mce_button', function( editor, url ) {
editor.addButton( 'my_mce_button', {
icon: 'my-mce-icon',
onclick: function() {
editor.insertContent('[shortcode name="" title=""]');
}
});
});
})();
Here need to use buttons as background like this in functions.php:
function my_shortcodes_mce_css() { ?>
<style type="text/css" >
.mce-ico.mce-i-my-mce-icon {
background:url(http://prowpexpert.com/wp-content/uploads/2014/05/favicon-1.ico);
}
</style>
<?php
}
add_action( 'admin_enqueue_scripts', 'my_shortcodes_mce_css' );
You can get help from here about wp tiny mce buttons: http://prowpexpert.com/dynamic-tab-html-wp/

How can I render string as html in using jTemplate

I am using asp.net C# MVC jTemplate binding Announcements collection to a template in my view.
One of the announcement has html string as in its description.
Now the problem is how to render that string as html
my view is like
<textarea id="dashAnnoucement_Template"
data-template-name="dashAnnoucement_Template" class="hidden">
{#foreach $T as Announcement}
<li id='{$T.Announcement$iteration}'>
{#if !$().compare($T.Announcement.Category,
#Convert.ToInt32(UI.Entities.AnnouncementCategory.RichText))}
<div class="card large flipped">
<div class="pic">
{#if $T.Announcement.LinkOff}
{#if $T.Announcement.Image.IsVideo}
<a href="{$T.Announcement.LinkOff.Target}" class="play">
<span>{$T.Announcement.Image.AltText}</span>
<img alt="{$T.Announcement.Image.AltText}"
src="{$T.Announcement.Image.Source}" class="thumb"/>
</a>
{#else}
<a href="{$T.Announcement.LinkOff.Target}">
<img alt="" src="{$T.Announcement.Image.Source}" class="thumb"/>
</a>
{#/if}
{#else}
<img alt="" src="{$T.Announcement.Image.Source}" class="thumb"/>
{#/if}
</div>
<div class="content"><h3>
{#if $T.Announcement.LinkOff}
<a href="{$T.Announcement.LinkOff.Target}"
target="{#if $T.Announcement.LinkOff.IsExternal}_blank{#else}_self{#/if}">
{$T.Announcement.Title}</a>
{#else}
{$T.Announcement.Title}
{#/if}
</h3>
<p>{$T.Announcement.Summary}</p>
</div>
</div>
{#else}
{$T.Announcement.Description}
#*Need to render this as html*#
{#/if}
</li>
{#/for}
</textarea>
jquery code is like
$(Container).empty()
.setTemplateElement(Template)
.processTemplate(announcementsCollection);
My Json Data i.e announcementsCollection is like
[ { "Category": 1, "Title": "White Space Announcement Title", "Description": "", "Summary": "Join us Fri,April 24 in Atlanta,GA to mingle with Solavei members & hear top earner success stories", "Image": { "Source": "http://slvdev.blob.core.windows.net/media/1463/whitespace_1.jpg", "AltText": "", "Target": "", "IsVideo": false }, "Date": "\/Date(-62135596800000)\/", "LinkOff": { "Target": "http://solavei.com/", "Text": "Learn More >", "IsExternal": true } }, { "Category": 1, "Title": "Got Questions?", "Description": "", "Summary": "Access Member Support for information on your phone, your Solavei Membership, and your Solavei Mobile Service.", "Image": { "Source": "http://slvdev.blob.core.windows.net/media/7323/equipment-support-224x168.jpg", "AltText": "", "Target": "", "IsVideo": false }, "Date": "\/Date(-62135596800000)\/", "LinkOff": { "Target": "http://support.solavei.com", "Text": "Learn More >", "IsExternal": true } }, { "Category": 4, "Title": "html", "Description": "<div class=\"imageBox shadowBox\" style=\"float: right; margin: -20px -20px 0px 20px;\"> \t <a target=\"_blank\" href=\"https://support-uat.solavei.com\">\t\t \t\t <img class=\"fullImage\" alt=\"\" src=\"http://slvdev.blob.core.windows.net/media/35985/neon.jpg\" style=\"height:170px\">\t </a> </div>\n<div class=\"contents\"> <h2> <a target=\"_blank\" href=\"https://support-uat.solavei.com\"> Rich text </a> </h2> <p>Access Member Support for information on your phone, your Solavei Membership, and your Solavei Mobile Service.</p> </div>", "Summary": "<div><img src='https://slvdev.blob.core.windows.net/media/35985/neon.jpg' wid/>\n<p>Test Message</p></div>", "Date": "\/Date(-62135596800000)\/" } ]
I know this is an old post but,
First you have to transform your JSon data into Html code and then
use Html.Raw("") to show the code as Html.
#Html.Raw("Your html in here")

Resources