how to add kendo editor tool image which is not in sprite.png - kendo-ui

Image shows the last icon which do not have image in sprite.png and i have tried to add font awesome icon image and even it is not working.
I am using kendo-ui 2021 version now.
This is the code I am using and I am unable to add icon image print,clear formation and copy format.
****$("#a").kendoEditor({
imageBrowser: {
transport: {
read: "#Url.Action("Read", "Controllername")",
destroy: {
url: "#Url.Action("Destroy", "Controllername")",
type: "POST"
},
create: {
url: "#Url.Action("Create", "Controllername")",
type: "POST"
},
thumbnailUrl: "#Url.Action("Thumbnail", "Controllername")",
uploadUrl: "#Url.Action("Upload", "Controllername")",
imageUrl: "#Url.Action("Image?path={0}", "Controllername")",
}
},
tools: [
"formatting",
"bold",
"italic",
"underline",
"strikethrough",
"justifyLeft",
"justifyCenter",
"justifyRight",
"justifyFull",
"insertUnorderedList",
"insertOrderedList",
"indent",
"outdent",
"createLink",
"unlink",
"insertImage",
"subscript",
"superscript",
"tableWizard",
"createTable",
"addRowAbove",
"addRowBelow",
"addColumnLeft",
"addColumnRight",
"deleteRow",
"deleteColumn",
"foreColor",
"backColor",
"print"
],
execute: function (e) {
var editor = this;
if (e.name == "createtable") {
setTimeout(function () {
var table = $(editor.body).find("table:not(.custom-table)");
table.addClass("custom-table");
table.attr("style", "border: 1px solid black;");
table.find("tr td")
.each(function () {
var currentStyle = $(this).attr("style");
$(this).attr("style", currentStyle + " border: 1px solid black; ");
});
}, 0);
}
}
});****

I have tried using customer tools in kendo, and insert the relevant images as png and give the image url in style tag.
code inside the kendoEditor:
$("#quest").kendoEditor({
tools[{
name: "print",
tooltip: "print",
exec: function (e) {
}
}
]
styles:
<style>
.k-editor .k-i-print {
background: 50% 50% no-repeat
url(https://localhost/cisiweb2/image/master/print.png);
}
</style>

Related

kendo tooltip is shown only after second 'hover' event

I use kendo grid and want to show kendo tooltip for icon in header cells.
I have the following code:
<div id="grid"></div>
<script>
$(document).ready(function () {
var grid = $("#grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: {
url: "#Html.Raw(Url.Action("List", "i3screenResult"))",
type: "POST",
dataType: "json",
data: function () {
var data = {
};
addAntiForgeryToken(data);
return data;
}
}
},
schema: {
data: "Data",
total: "Total",
errors: "Errors"
},
},
dataBinding: function (e) {
$('.questionmark').on("hover", function () {
var tooltip = $(this).kendoTooltip({
content: $(this).attr('tooltip'),
width: 120,
position: "top",
animation: {
open: {
effects: "zoom",
duration: 150
}
}
}).data("kendoTooltip");
});
},
scrollable: false,
columns: [
{
field: "BackgroundReportAccount",
headerTemplate: "#T("DrugConsortium.i3screen.Fields.BackgroundReportAccount") <img src='/images/question-mark-icon.png' class='questionmark' tooltip='#T("DrugConsortium.i3screen.Fields.BackgroundReportAccount.Details")' />",
width: 150
},
{
field: "ProviderReferenceId",
headerTemplate: "#T("DrugConsortium.i3screen.Fields.ProviderReferenceId") <img src='/images/question-mark-icon.png' class='questionmark' tooltip='#T("DrugConsortium.i3screen.Fields.ProviderReferenceId.Details")' />",
width: 150
},
//....
]
});
});
</script>
It works, but only since second hover event for img.
Why so and how to fix?
Try this AFTER grid initialization:
$('#grid').kendoTooltip({
content: function(e) {
return $(e.target).attr('tooltip');
},
filter: 'img.questionmark',
width: 120,
position: "top",
animation: {
open: {
effects: "zoom",
duration: 150
}
}
});
Also, you should change the attribute name from tooltip to data-tooltip since tooltip is not a standard HTML attribute. Then you can get it's value with $(e.target).data('tooltip');
Demo

How to implement jqgrid multiselect toolbar

Currently free-jqgrid has feature that supports multiselect toolbar, same feature i want to create in jqgrid also.
http://www.ok-soft-gmbh.com/jqGrid/OK/MultiselectIn.htm
More recent code of usage multiselect with free jqGrid can be seen on the demo https://jsfiddle.net/OlegKi/ty4e68pm/16/. The most important parts of the demo I include below:
var dataInitMultiselect = function (elem, searchOptions) {
var $grid = $(this);
setTimeout(function() {
var $elem = $(elem),
id = elem.id,
inToolbar = searchOptions.mode === "filter",
options = {
selectedList: 2,
height: "auto",
checkAllText: "all",
uncheckAllText: "no",
noneSelectedText: "Any",
open: function() {
var $menu = $(".ui-multiselect-menu:visible");
$menu.width("auto");
$menu.css({
width: "auto",
height: "auto"
});
$menu.children("ul").css({
maxHeight: "300px",
overflow: "auto"
});
}
},
$options = $elem.find("option");
if ($options.length > 0 && $options[0].selected) {
$options[0].selected = false; // unselect the first selected option
}
if (inToolbar) {
options.minWidth = "auto";
}
$grid.triggerHandler("jqGridRefreshFilterValues");
$elem.multiselect(options);
// replace icons ui-icon-check, ui-icon-closethick, ui-icon-circle-close
// and ui-icon-triangle-1-s to font awesome icons
var $header = $elem.data("echMultiselect").header;
$header.find("span.ui-icon.ui-icon-check")
.removeClass("ui-icon ui-icon-check")
.addClass("fa fa-fw fa-check");
$header.find("span.ui-icon.ui-icon-closethick")
.removeClass("ui-icon ui-icon-closethick")
.addClass("fa fa-fw fa-times");
$header.find("span.ui-icon.ui-icon-circle-close")
.removeClass("ui-icon ui-icon-circle-close")
.addClass("fa fa-times-circle");
$elem.data("echMultiselect")
.button
.find("span.ui-icon.ui-icon-triangle-1-s")
.removeClass("ui-icon ui-icon-triangle-1-s")
.addClass("fa fa-caret-down")
.css({
float: "right",
marginRight: "5px"
});
}, 50);
},
multiselectTemplate = {
stype: "select",
searchoptions: {
generateValue: true,
//noFilterText: "Any",
sopt: ["in"],
attr: {
multiple: "multiple",
size: 3
},
dataInit: dataInitMultiselect
}
};
declares multiselectTemplate template. The next code fragment uses the template in colModel
colModel: [
...
{
name: "ship_via", width: 85, align: "center",
template: multiselectTemplate
},
...
],
Finally loadComplete include the code, which create filter toolbar after the data are loaded from the server:
loadComplete: function () {
if (!this.ftoolbar) {
// create filter toolbar if it isn't exist
$(this).jqGrid("filterToolbar", {
defaultSearch: "cn",
beforeClear: function() {
$(this.grid.hDiv)
.find(".ui-search-toolbar button.ui-multiselect")
.each(function() {
$(this).prev("select[multiple]").multiselect("refresh");
});
}
});
$(this).triggerHandler("jqGridRefreshFilterValues");
$(this.grid.hDiv)
.find(".ui-search-toolbar button.ui-multiselect")
.each(function() {
$(this).prev("select[multiple]")
.multiselect("refresh");
});
}
},
If required one can reload the data in filter toolbar by destroying it by destroyFilterToolbar method and executing the same code fragment which create it once more (I mean above code inside of loadComplete).

How to add hyperlink in resources in kendo-UI scheduler

I have a scheduler (timeline view) set up that produces an interface that looks like the attached image.
[![scheduler_screenshot][1]][1]
The resources part of the scheduler code looks like this:
, resources: [
{
field: "loca_ky"
, name: "Locations"
, dataSource: [
{text:"CHAR above entrance doors", value:1},
{text:"BELLIARD Passerelle", value:2},
{text:"BERL Schuman", value:3}
]
, title: "Location"
}
]
I want the users to be able to find out more about the locations (eg. 'CHAR above entrance doors', etc) and therefore want to provide either a hyperlink around the text, or maybe add an icon with a hyperlink.
How do I do this?
Response to answers
Hi Jayesh
Re. Method 1. Adding the new function afterthe script fails to work because I am already using the 'databound' node of the scheduler as a function. See code below:
, dataBound: function(e) {
// hide the times row from the date/time header:
var view = this.view();
view.datesHeader.find("tr:last").prev().hide();
view.timesHeader.find("tr:last").prev().hide();
// Switch the colour of the reservation depending on stat_ky
$('div.k-event').removeClass('special-event'); // Remove the widget default colour.
$('div.k-event').addClass('eventRequested'); // Add back the eventRequested colour, which we use for every stage up to BOOKED.
e.sender._data.forEach(function(eventDetails) {
if (eventDetails['stat_ky'] == 5) {
// Switch the colour to eventAccepted for BOOKED requests (stat_ky=5).
$('div.k-event[data-uid="'+eventDetails['uid']+'"]').addClass('eventAccepted');
}
});
}
Should I place your code inside this function?
Response to answers, 2
Hi Jayesh
Yes, this works well indeed!
One final snag. In your example here is the datasource of the resource:
dataSource: [
{ text: "Meeting Room 101", value: 1, color: "#6eb3fa" },
{ text: "Meeting Room 201", value: 2, color: "#f58a8a" }
],
And you get the 'text' using element.html() like this:
element.html("<a href='http://google.com/" + element.html() + "'>" + element.html() + "</a>");
How do I reference the 'value' of the resource?
You can achieve this thing by using below two different methods.
Method 1: Manually converting resources text into hyperlink
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/scheduler/resources-grouping-vertical">
<style>
html {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.412/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.412/styles/kendo.material.min.css" />
<script src="//kendo.cdn.telerik.com/2016.1.412/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.412/js/kendo.all.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.412/js/kendo.timezones.min.js"></script>
</head>
<body>
<div id="example" class="k-content">
<div id="scheduler"></div>
</div>
<script>
$(function () {
$("#scheduler").kendoScheduler({
date: new Date("2013/6/13"),
startTime: new Date("2013/6/13 07:00 AM"),
height: 600,
views: [
"day",
{ type: "week", selected: true },
"month",
"agenda",
"timeline"
],
timezone: "Etc/UTC",
dataBound: scheduler_dataBound,
dataSource: {
batch: true,
transport: {
read: {
url: "https://demos.telerik.com/kendo-ui/service/meetings",
dataType: "jsonp"
},
update: {
url: "https://demos.telerik.com/kendo-ui/service/meetings/update",
dataType: "jsonp"
},
create: {
url: "https://demos.telerik.com/kendo-ui/service/meetings/create",
dataType: "jsonp"
},
destroy: {
url: "https://demos.telerik.com/kendo-ui/service/meetings/destroy",
dataType: "jsonp"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
schema: {
model: {
id: "meetingID",
fields: {
meetingID: { from: "MeetingID", type: "number" },
title: { from: "Title", defaultValue: "No title", validation: { required: true } },
start: { type: "date", from: "Start" },
end: { type: "date", from: "End" },
startTimezone: { from: "StartTimezone" },
endTimezone: { from: "EndTimezone" },
description: { from: "Description" },
recurrenceId: { from: "RecurrenceID" },
recurrenceRule: { from: "RecurrenceRule" },
recurrenceException: { from: "RecurrenceException" },
roomId: { from: "RoomID", nullable: true },
attendees: { from: "Attendees", nullable: true },
isAllDay: { type: "boolean", from: "IsAllDay" }
}
}
}
},
group: {
resources: ["Rooms", "Attendees"],
orientation: "vertical"
},
resources: [
{
field: "roomId",
name: "Rooms",
dataSource: [
{ text: "Meeting Room 101", value: 1, color: "#6eb3fa" },
{ text: "Meeting Room 201", value: 2, color: "#f58a8a" }
],
title: "Room"
}
]
});
});
// Below function is converting text into hyperlink
function scheduler_dataBound(e) {
$("#scheduler").find(".k-slot-cell").each(function () {
var element = $(this);
if (element != null) {
if (element.context.textContent.length > 2) {
element.html("<a href='http://google.com/" + element.html() + "'>" + element.html() + "</a>");
}
}
});
}
</script>
</body>
</html>
Method 2: By using template
Demo
Let me know if any concern.

I am trying to explode a particular section of a pie chart for a specific field in Kendo UI

How can I explode pie chart in Kendo DataViz,
my data is coming from database, and my code is like this:
dataSource: {
data: StageData
},
title: {
align: "center",
text: "Clients by Stage",
font: "14px Open Sans",
color: "#3cb2e1"
},
legend: {
visible: false
},
series: [{
type: "pie",
field: "CountClients",
aggregate: "sum",
categoryField: "StageId",
explodeField: function(){
if(categoryField=="Advocate"){
$(this).explode = true;
}
},
overlay: {
gradient: "none"
}
Here I am trying to explode pie when categoryField is "Advocate", But this is not working.
Could anyone suggest me how can I achieve this.
Thanks
I would probably iterate through the StageData, and set an explode value for each object.
$.each(StageData, function(i, s) {
if(s.StageId === 'Advocate') {
s.explode = true;
}
else {
s.explode = false;
}
});
Sample... http://jsbin.com/hiqaj/1/edit

Kendo Grid - Validation Messages not showing on custom editors in grid

When using a editor grid and my button put a new row at the bottom, validation messages are being hidden by the grid.
I have set up an example here: http://jsfiddle.net/api2304/K54v3/1/
Click on a button Add
Leave the cell Name empty and press tab.
The message will show below the row.
Html:
<div id="grid"></div>
Javascript:
var _dsGrid;
var _grid;
var _this = this;
_this._dsGrid = new kendo.data.DataSource({
autoSync: true,
data: [{ Cod: 0, Name: 'Value0' },
{ Cod: 1, Name: 'Value1' }],
schema: {
model: {
fields: {
Cod: { editable: false },
Name: {
validation: {
required: true,
required: { message: "Custom message" }
}
}
}
}
}
});
_this._grid = $("#grid").kendoGrid({
columns: [
{ field: "Cod" },
{ field: "Name" }
],
selectable: true,
dataSource: _this._dsGrid,
editable: true,
toolbar: [
{ template: kendo.template("<a id='btnAdicionar' class='k-button k-button-icontext'><span class='k-icon k-add'></span>Adicionar</a>") }
],
edit: function(e) {
e.container.find("input[name='Nome']").attr('maxlength', '20');
e.container.find("input").bind("blur", function() {
$("#grid").scrollTop($("#grid")[0].scrollHeight + 200);
});
}
}).
data("kendoGrid");
$("#btnAdicionar").click(function () {
var total = _this._dsGrid.data().length;
var insert = _this._dsGrid.insert(total, {});
_this._dsGrid.page(_this._dsGrid.totalPages());
var ultimoId = _this._dsGrid.data()[total - 1].Nivel;
_this._grid.editRow(_this._grid.tbody.children().last());
});
I found the solution here: http://www.telerik.com/forums/hidden-validators-when-virtual-scrolling-createat-bottom
Put this css on the page:
#grid .k-tooltip-validation {
margin-top: 0 !important;
display: block;
position: static;
padding: 0;
}
#grid .k-callout {
display: none;
}

Resources