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>
);
}
I copy on notepad with Telerik script editor installed:
0x7A8F460B47f01B596759Bb2CaE48
I get while doing paste:
0x7A1e71B4498Ae1a1C3ec13F165a0
What kind of modification is it?
reportParameter PropertyChanged event handler not working, please help
our application is using this version of telerik -- "telerikReportViewer-12.0.18.125.min.js"
Here is a sample of my code
Telerik.Reporting.ReportParameter reportParameter1 = new Telerik.Reporting.ReportParameter();
reportParameter1.PropertyChanged += ReportParameter1_PropertyChanged;
private void ReportParameter1_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
{
//some code removed
}
A break point in ReportParameter1_PropertyChanged is never hit; do you have a SDK or some code snipping of how this event handler is used and how it is called?
While uploading multiple files in Async due to the slow internet connection it gave connection errors and file uploading failed and asked to retry the file.
Is there any solution to my problem???
1 more thing can I upload multiple files synchronously???
Good day, will like to request some help here.
How do i GetText from an element
<a href="/orders/Details/22344">ERP30114</a>
this is a link so i want to use the linkText to find click the link