Hello,
Although Telerik is awesome I wish to delete my Telerik account, Telerik Forums account and all of the data associated with this account. Please help me out with this.
Thanking You,
With Regards,
Subhadeep Bhattacharyya.
import React, { useRef, useState } from "react";
import { Editor, EditorTools, EditorUtils, ProseMirror } from "@progress/kendo-react-editor";
import "@progress/kendo-theme-default/dist/all.css";
import { Button } from "@progress/kendo-react-buttons";
import { Dialog, DialogActionsBar } from "@progress/kendo-react-dialogs";
import { Input } from "components/atoms/input/Input";
export default function KendoEditor({ type, updateData, initalVal }) {
const [isDialogVisible, setDialogVisible] = useState(false);
const [customData, setCustomData] = useState("");
const [value, setValue] = useState("test");
var initialValue =
type === "header" || type === "footer" ? initalVal?.data?.content : initalVal?.content;
const editorRef = useRef(null);
const {
Bold,
Italic,
Underline,
Strikethrough,
Subscript,
Superscript,
ForeColor,
BackColor,
CleanFormatting,
AlignLeft,
AlignCenter,
AlignRight,
AlignJustify,
Indent,
Outdent,
OrderedList,
UnorderedList,
NumberedList,
BulletedList,
Undo,
Redo,
FontSize,
FontName,
FormatBlock,
Link,
Unlink,
InsertImage,
ViewHtml,
InsertTable,
InsertFile,
SelectAll,
Print,
Pdf,
TableProperties,
TableCellProperties,
AddRowBefore,
AddRowAfter,
AddColumnBefore,
AddColumnAfter,
DeleteRow,
DeleteColumn,
DeleteTable,
MergeCells,
SplitCell,
} = EditorTools;
const { Schema, EditorView, EditorState } = ProseMirror;
const nonEditable = {
name: "nonEditable",
inline: true,
group: "inline",
content: "inline+",
marks: "",
attrs: {
contenteditable: { default: null },
class: { default: null },
style: { default: null },
id: { default: null },
},
atom: true,
parseDOM: [{ tag: "span.uneditable", priority: 51 }],
toDOM: (node) => [
"span",
{
contenteditable: false,
class: "uneditable",
style:
"user-select: none; opacity: 0.5; background-color: red;text-weight:600;padding:2px;",
id: node.attrs.id,
},
0,
],
};
const toggleSidebar = (type, props) => {
return (
<Button
onClick={() => {
setDialogVisible(true);
// setActiveProperties(type);
}}
onMouseDown={(e) => e.preventDefault()}
onPointerDown={(e) => e.preventDefault()}
title="Insert Custom Data"
imageUrl="https://demos.telerik.com/kendo-ui/content/shared/icons/sports/snowboarding.png"
imageAlt="KendoReact Buttons Snowboarding icon"
/>
);
};
const handleInsertCustomData = () => {
const { view } = editorRef.current;
const schema = view.state.schema;
// get the new node from the schema
const nodeType = schema.nodes.nonEditable;
// create a new node with the custom data
const node = nodeType.createAndFill(
{
class: "uneditable", // Keep the existing classes
style: "user-select: none; opacity: 0.5; background-color: red;", // Add red background color
id: "nernksf", // Add unique ID using new Date()
},
schema.text(customData)
);
// Insert the new node
EditorUtils.insertNode(view, node);
view.focus();
// Close the dialog
setDialogVisible(false);
setCustomData("");
};
console.log(initialValue);
const onMount = (event) => {
const { viewProps } = event;
const { plugins, schema } = viewProps.state;
let nodes = schema.spec.nodes.addToEnd("nonEditable", nonEditable);
const mySchema = new Schema({ nodes: nodes, marks: schema.spec.marks });
console.log(type, initialValue);
const doc = EditorUtils.createDocument(mySchema, initialValue ? initialValue : "");
return new EditorView(
{ mount: event.dom },
{
...event.viewProps,
state: EditorState.create({ doc, plugins }),
}
);
};
//console.log(value);
const handleEditorChange = (event) => {
const data = event?.html;
//console.log(data);
setValue(data);
if (type === "header" || type === "footer") {
updateData({ visible: initalVal?.visible, data: { ...initalVal?.data, data } });
} else {
updateData({ ...initalVal, data });
}
};
return (
<div>
<Editor
ref={editorRef}
onMount={onMount}
onChange={handleEditorChange}
tools={[
[Bold, Italic, Underline, Strikethrough],
[Subscript, Superscript],
ForeColor,
BackColor,
[CleanFormatting],
[AlignLeft, AlignCenter, AlignRight, AlignJustify],
[Indent, Outdent],
[OrderedList, UnorderedList],
[NumberedList, BulletedList],
FontSize,
FontName,
FormatBlock,
[SelectAll],
[Undo, Redo],
[Link, Unlink, InsertImage, ViewHtml],
[InsertTable, TableProperties, TableCellProperties],
[AddRowBefore, AddRowAfter, AddColumnBefore, AddColumnAfter],
[DeleteRow, DeleteColumn, DeleteTable],
[MergeCells, SplitCell],
[
(props) => toggleSidebar("dataSourceProperties", props),
(props) => toggleSidebar("formulaProperties", props),
(props) => toggleSidebar("letterProperties", props),
(props) => toggleSidebar("conditionBuilder", props),
],
]}
contentStyle={{
height: 320,
}}
//value={initialValue}
/>
{isDialogVisible && (
<Dialog
title="Insert Custom Data"
onClose={() => setDialogVisible(false)}
visible={isDialogVisible}
>
<div>
<Input
type="text"
value={customData}
onChange={(e) => setCustomData(e.target.value)}
label="Enter name"
/>
<DialogActionsBar>
<button
className="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base"
onClick={() => setDialogVisible(false)}
>
No
</button>
<button
className="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base"
onClick={handleInsertCustomData}
>
Yes
</button>
</DialogActionsBar>
</div>
</Dialog>
)}
</div>
);
}
Hi All,
We have a web application with multiple requirements and need assistance with RADCONTROLS
If this is something your comfortable with please contact me with availability via email or call
Email: Kai@dnkenterprise.com
Mobile: +447511442700
SKYPE Email: kkvaja@gmail.com
We are currently writing a Doctor Case Management System that is written as a .net Win Form Application. It operates as a disconnected client that synchronises Microsoft CRM data (Dynamics 4.0) to a local SQL Server Compact Edition database. Think of it like Outlook but for managing doctor’s appointments and associated case documents (medical records, reports on the patient’s condition etc.)
The development is going well but we need a specialist who can “style” the applications. Colour Pallets, Fonts, Grids, button positioning, styled graphics etc. We heavily use the Telerik RadControls for Win Forms and this is an important part of the styling. The design look and feel itself will be dictated by a graphic designer / design agency who control the company brand and who have also styled the website.
We are looking for someone who has experience of win form design and Telerik Rad Controls (from a design aspect) who can take the style / colour scheme and implement in the application. They will not be required to carry out nor understand the 'coding' element of the application, although they will be working within Visual Studio 2008 to implement the design.
Although not strictly required information, for completeness the technical platform is as specified below:
· .Net Framework 3.5 sp1 (Windows Forms, Linq, windows communication foundation)
· SQL Server Compact 3.5
· Telerik RadControls for Win Forms v. 2009.3 1103
· Log4net v.1.2.10.0
· Cryptainer SE 8.0
· Windows Installer 3.1
Please send your C.V., contact details, usual daily rate expected etc. to ben.roles@premiermedical.co.uk
Questions / queries welcome. This is a 10-15 day job and start as soon as possible would be good. Ideally the person will be able to travel to London (WC1) although part-time at home / another location would work. Contact with the core development team will need to be maintained though.
Regards,
Ben.
Hi,
We're looking for part time developer who have experience in Angular + KendoUI + Asp.net.
Please leave your reply or message me if you're interested.
Thanks.
Greetings, Telerik developers! I work for a county government agency in Los Angeles County. We are looking for a web developer with Telerik expertise. You can view the job announcement at:
http://agency.governmentjobs.com/lacdc/default.cfm?action=viewJob&jobID=1546681.
I've been with this agency about four years. In addition to the benefits listed in the job announcement, I can add from my personal experience that it's a pleasant and congenial work atmosphere. If you're looking for a good gig, please get in touch. Thanks.
----
Grinnell Almy
Web Developer
Los Angeles County Community
Development Commission
grinnell.almy@lacdc.org
We are looking for a developer to build on the Telerik platform a portal + app for our products/services
We are located in Amsterdam, The Netherlands,
Interested? Then please send an email to Marco.Robben@mastermind.eu