Develop Reference

TinyMCE Plugin Template add category Listbox

I'm developping for my entreprise an external template manager with ASP.net.
in this external template manager, users can execute all the CRUD actions, so they can create/ read /update /delete.
Many departements of my entreprise use thoses templates, so I've created a category fields in my template manager, so they can filter a bit.
I'would like to modify, the plugin.js of the template plugin to add a dynamic listbox category.
So when a user want to add a template in the editor he can select his departements[category] and only the related template will be shown in the listbox [template].
I get all the template definition[title, content, description, category] from a MS SQL DB with an ASP repeater Control.
the result of the repeater generate the definition needed by the template plugin
templates:
[
{"title": "Some title 1", "description": "Some desc 1", "content": "My
content", "category": "support"},
]
So i've tried just to test (because i'm not good with JS ad Oriented Object) :
`
win = editor.windowManager.open({
title: 'Insert template',
layout: 'flex',
direction: 'column',
align: 'stretch',
padding: 15,
spacing: 10,
items: [
{
type: 'form', flex: 0, padding: 0, items: [
{
type: 'container', label: 'Templates', items: {
type: 'listbox', label: 'Templates', name: 'template',
values: values, onselect: onSelectTemplate
}
//Added BY ME
type: 'container', label: 'Category', items: {
type: 'listbox', label: 'Category', name:'category', values:
valuesCategory, onselect: onSelectCategory
}
}
]
},
{ type: 'label', name: 'description', label: 'Description', text:
'\u00a0' },
{ type: 'iframe', flex: 1, border: 1 }
],
onsubmit: function () {
insertTemplate(false, templateHtml);
},
minWidth: Math.min(DOMUtils.DOM.getViewPort().w,
editor.getParam('template_popup_width', 600)),
minHeight: Math.min(DOMUtils.DOM.getViewPort().h,
editor.getParam('template_popup_height', 500))
});
win.find('listbox')[0].fire('select');
win.find('listbox')[0].fire('select');
}`
and defined valuesCategory & onSelectCategory somewhere over that.
the list box isn't showed in the Dialog ?
I've searched on internet to find something similar with tinymce but i don't find anything like this, could someone help me to develop this functionnality ?
Thanks for your answers !
Have a nice day

Instead of modifying the editor's source code why not calculate the valid plugins from the server side and only include the relevant templates in the editor configuration?
This eliminates the need for you to modify the source code of the editor and people will not have the ability to see templates for a different department.

Kendo Grid - make a column always appear as dropdown boxes

I've got a Kendo grid which is being created in JS. This code is not mine, but someone else's, and I really don't think we should be changing many of the fundamentals of it. However, there is one column in it which we would ideally like to display as a dropdown box all the time, or at least look like one. Code is below:
self.caGridOptions = {
widget: self.caKendoGrid,
data: undefined,
dataSource: {
schema: {
model: {
fields: {
id: { type: "number" },
description: { type: "string", editable: false },
value: { type: "number", editable: false },
caTypeDescription: { type: "string", editable: false }
}
}
},
autoSync: true
},
sortable: true,
scrollable: false,
editable: true,
columns: [
{ field: "id", title: "Code", width: 90, template: "#=pager.activePage$().ctx.getca ? pager.activePage$().ctx.getca(id, 'code') : id #", editor: self.caDropDownEditor },
{ field: "description", title: "Description", width: 90, template: "#=pager.activePage$().ctx.getca ? pager.activePage$().ctx.getca(id, 'description') : id #" },
{ field: "value", title: "Value", width: 90, format: "{0:n2}", template: "#=pager.activePage$().ctx.getca ? pager.activePage$().ctx.getca(id, 'value') : id #" },
{ field: "caTypeDescription", title: "Type", width: 90, template: "#=pager.activePage$().ctx.getca ? pager.activePage$().ctx.getca(id, 'caTypeDescription') : id #" },
{ width: 90, filterable: false, template: kendo.template('<a class="btn btn-danger btn-sm" title="delete"><i class="fa fa-trash-o fa-fw" aria-hidden="true"></i> Delete</a>') }
],
dataBound: self.gridButtons,
noRecords: true,
messages: {
noRecords: "There is no data available"
}
};
//
// functions
self.getca = function (id, type) {
if (id == null) return null;
return self.caOptions().filter(function (item) { return item.id == id; })[0][type];
};
The ID field (first column) goes into a dropdown box when it is edited, as you can see. However, what we would like is for this to appear as a dropdown box all the time. Not necessarily by always having the editor on (which I believe would be impossible, as Kendo can only turn the editor on on one row at a time), but perhaps by simply formatting it like a dropdown.
Any help would be gratefully appreciated. It's annoying as this is a tiny, minor thing and we've got examples of it working elsewhere, but they're grids which have been written primarily in cshtml (using Kendo MVC, I think) and I really don't want to rewrite the entire grid for something so trivial, as well as possibly any other functions that rely on its data.

The primary issue you are facing is that the cell is just a table cell until you actually start editing. At that time, it dynamically creates the input.
I had a similar requirement in the past and it ended up being easier to decorate the cell to look like a drop-down as opposed to trying to render a drop-down in every row of the grid. This allows you to keep the default grid behavior intact and allows the user to see that there will be a list of values when they edit that cell. We ended up just putting a down-arrow icon to the right of the value in the display template - from your code, it looks like you are using some font-awesome icons, but there are some delivered by Kendo UI as well - so, the template could be something like this:
template: '#=id# <span class="k-icon k-icon-s"></span>'
UPDATE:
The kendo icons do depend on your version and I had a typo in the name above. In any case, here is an example you can look at:
This Kendo demo shows adding a custom editor (dropdown) on the Category column:
http://demos.telerik.com/kendo-ui/grid/editing-custom
If you scroll down, there is a button to "Edit this Example" - here, you'll see that the Category column uses a template:
template: "#=Category.CategoryName#"
You can change the template to the following to create a drop-down looking effect:
template: "<span style='border-style:solid; border-width: 1px; padding: 4px; width: 150px; display: block'>#=Category.CategoryName# <span class='k-icon k-i-arrow-60-down' style='float:right'></span></span>"
You can tune the css to get it closer to exactly what you want, but this give you the idea. Other possibilities include actually defining css classes that can be applied so you don't need to include so much in-line styling.

How to expand a kendo grid on clicking a column value using angular js

I am trying to use Kendo UI Grid with angular js. I need to expand the grid to further level when user clicks a link given in one of the columns of the grid.
I used following code to expand the grid on click of an tag inside a kendo grid column.
$scope.mainGridOptions = {
dataSource: {
data: $scope.data,
schema: {
model: {
fields: {
fieldA: { type: "string" },
fieldB: { type: "string" },
fieldC: { type: "string" },
fieldT: { type: "numeric" }
}
}
},
pageSize: 10
},
filterable: true,
sortable: true,
resizable: true,
pageable: true,
scrollable: true,
columns: [
{ field: "fieldA", title: "FieldA", width: 90},
{ field: "fieldB", title: "FieldB", width: 90},
{ field: "fieldC", title: "FieldC", width: 90},
{ field: "fieldT", title: "FieldT", width: 90, template: "<a onclick='expand(this)'href='\\#'>#=mydata#</a>"}
]
};
But on running the code it just gives me an error in the browser console window.
Uncaught ReferenceError: expand is not defined at
HTMLAnchorElement.onclick
I researched and found that Kendo doesn't supports onclick event inside an tag. Therfore tried to use tag instead of tag. But it still does not work.
{ field: "fieldT", title: "FieldT", width: 90, template: "<span ng-click='showFileLevel(this)>{{mydata}}</span>"}
Can anyone please guide me in the right direction or let me know how can I expand a Kendo grid to further levels on clicking text inside a certain column of the grid using Angular JS.

you write expand(this) method out of the controller in your js.

Create another toolbar in kendo grid

I am using Kendo library for grid. I want to have a toolbar in that grid.
I have followed this link -
http://demos.kendoui.com/web/grid/toolbar-template.html
and created a toolbar at the top
I also want to add another toolbar at the bottom of grid. Below or above pagination bar. I could not find any way to create this extra toolbar. Please help.

There are two ways of getting it:
You let Kendo UI generate in the top and then you move it to the bottom
You generate it to the bottom.
The first approach is fast and if you don't need header toolbar is the best. Just add the following code:
$("#grid).data("kendoGrid").wrapper.append($(".k-toolbar"));
See it here : http://jsfiddle.net/OnaBai/WsRqP/1/
The second approach -using as base the example that you mention in your original question- would be something like this:
Step 1: Define a template, you might use the same than in the example:
<script type="text/x-kendo-template" id="template">
<div class="toolbar">
<label class="category-label" for="category">Show products by category:</label>
<input type="search" id="category" style="width: 150px"/>
</div>
</script>
Step 2: Initialize the grid, as you are doing now (in my case I will not include the toolbar as header but only as footer):
var grid = $("#grid").kendoGrid({
dataSource: {
type : "odata",
transport : {
read: "http://demos.kendoui.com/service/Northwind.svc/Products"
},
pageSize : 20,
serverPaging : true,
serverSorting : true,
serverFiltering: true
},
height : 430,
sortable : true,
pageable : true,
columns : [
{ field: "ProductID", title: "Product ID", width: 100 },
{ field: "ProductName", title: "Product Name" },
{ field: "UnitPrice", title: "Unit Price", width: 100 },
{ field: "QuantityPerUnit", title: "Quantity Per Unit" }
]
}).data("kendoGrid");
Step 3: Add a dataBound handler for creating the footer after the grid has been initialized. We have to do it on dataBound otherwise the Grid is still not correctly formatted and the footer will look wrong. I've implemented creating the footer toolbar in a separate function to do not mess dataBound in case you do more stuff here.
dataBound : function () {
initFooterToolbar(this, kendo.template($("#template").html()));
}
Step 4: Implement this initFooterToolbar:
function initFooterToolbar(grid, template) {
if (!this._footer) {
this._footer = $("<div class='k-toolbar k-grid-toolbar k-widget'></div>")
.append(template);
grid.wrapper.append(this._footer);
// Other code for initializing your template
...
}
}
What initFooterToolbar does is first check that it has not already been initialized otherwise if you do pagination of refresh the data you might end-up with multiple footer toolbars.
Finally append the toolbar to grid.wrapper.
So the important part for creating a footer toolbar is invoking grid.wrapper.append(...) and doing it when the grid is already created.
The original example modified here : http://jsfiddle.net/OnaBai/WsRqP/

I avoid using kendo toolbars and just make an external 1 which you can then tweak with greater control.
For example,
#Html.DropDownList("Year", (SelectList)ViewBag.YearList, "All years")
transport: {
read: {
url: '#Url.Action("_List", "Applications")',
data: refreshGridParams,
type: 'POST'
},
function refreshGridParams() {
return {
Year: $('#Year').val()
};
}
$('#Year').change(function () {
theGrid.dataSource.read({
Year: $('#Year').val()
});
});
Then in my controller,
[HttpPost]
public JsonResult _List(int? Year, int skip, int take)
{
Last
_db.Blargh.Where(w => w.Year== Year).Skip(skip).Take(take).ToList().ForEach(x => { waList.Add(new WAListDTO(x)); });
This should cover all the core code needed but means you can keep adding as many toolbars/dropdowns/datepickers/text searchs or etc and just alter each stage to include the additional data.

Here is another hack which uses column footertemplate. When databound is triggered, footertemplate table is arranged to have one column with colspan equals to the number of grid columns.
http://plnkr.co/edit/1BvMqSC7tTUEiuw4hWZp
$("#grid").kendoGrid({
columns:[{
field:'name',
footerTemplate : "Row Count: #= data.name.count #"
},{
field:'age'
}],
dataSource: new kendo.data.DataSource({
aggregate: [{
field:"name",
aggregate: "count"
}],
data: [{
name: "Jane",
age: 31
}, {
name: "John",
age: 33
}]
}),
dataBound: function() {
var footer = this.wrapper.find('.k-footer-template');
footer.children(":first").attr('colspan', this.columns.length);
footer.children().not(':first').remove();
}
});

No type for image in tinymce version 4

I need to develop a small plugin for tinyMCE 4.0.
I have to show preview of image based on the input url.
I cannot figure out the type for image preview.
Is there anything like type="image"
tinymce.PluginManager.add('uploadimage', function(editor, url) {
// Adds a menu item to the Insert menu
editor.addMenuItem('uploadimage', {
text: 'Example plugin',
context: 'insert',
onclick: function() {
editor.windowManager.open({
title: 'TinyMCE site',
width: 400,
height: 300,
buttons: [{
text: 'Close',
onclick: 'close'
}],
body: [
{
name: "path",
type: "textbox",
size: 40,
label: "File URL",
},
{
name: "fileList",
type: "listbox",
label: "Link list",
values: editor.settings.external_image_list_url,
onselect: function(e) {
this.parent().parent().find("#path").value(this.value());
}
},
{
name: "fieldset",
type:"image" //HERE I NEED TO PREVIEW IMAGE BUT THERE IS NO SUCH TYPE IMAGE
}
],
});
}
});
});

I think that your best bet is to specify the type as "Container" and then set the HTML output manually with method "renderHtml" as can be seen in the documentation at:
http://www.tinymce.com/wiki.php/api4:class.tinymce.ui.Container
On the right side of that page you get to see a list of all the available types. This could be extended obviously if you decide to code your own Image control.