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 am writing to raise an issue regarding a problem I encountered while upgrading our Sitefinity instance. We recently initiated an upgrade process to the latest version of Sitefinity, and we've encountered an issue related to the AjaxControlToolkit path not being found.
Despite following the standard upgrade procedure and ensuring that all necessary components and dependencies were properly migrated, we consistently encounter a "Could not find a part of the path '...\AjaxControlToolkit.3.0.20820.0'" error when attempting to use the AjaxControlToolkit features. The AjaxControlToolkit Package is present in the package folder but it is unable to locate it.
Error Details:
This happens when i try to upgrade all the process happens seemlessly only this creates the issue please provide the solution.
And after the fail upgrade it's not even rollbacking the updates.
Hello Team,
I need to automatically set a value of a second date picker based on the value of the first date picker. In this case how can I add 3 months to the value of date1 and show it on date2.
I'm still starting out as a developer any help would be appreciated. Thanks in advance!
JQuery:
function toggleAssigntype() {
var assignTypeVal = $("#TypeOfAssignmentId").data("kendoComboBox").text();
var date1 = $("#MobilizationDate").val(); // value format "mm/dd/yyyy"
var date2 = $("#DemobilizationDate").val();
var addmonths = "03/00/0000";
var addyear = "00/00/0001";
if (assignTypeVal == "RFT") {
//should add 3 months to demobilization date
$("#OtFactor").data("kendoNumericTextBox").enable(false);
$("#DemobilizationDate").data("kendoDatePicker").value(date1+addmonths);
}
else {
$("#OtFactor").data("kendoNumericTextBox").enable(false);
}
};
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???
Hi
Whenever we are importing pdf file to process ,we are getting below error.
Could you please Kindly help Asap.
Thanks and Regards,
Bhavya.
Hello I am trying to make the column that gets data from a database have a linkable modal. For privacy reasons full copy of the code isn't available. However I have cropped up this segment in particular since this is the issue I am trying to fix. I can already bind data from the datasource to a column and data displays correctly when I remove the parts to make it "linkable". hence this is why you might notice some of the parts are in comments. Simply put I need to make the column display the data from the database then make it linkable pointing to a view and a controller. Hopefully someone will be able to answer the soonest. Thanks in advance!
.Name("MarkOutGrid")
.Columns(columns =>
{
columns.Bound(p => p.MarkOutId)
.ClientTemplate("<input name=\"checkedRecords\" type=\"checkbox\" primaryId=\"#=MarkOutId#\" value=\"MarkOutId\" title=\"checkedRecords\" />")
.Width(30).Groupable(false).Sortable(false).Filterable(false)
.Title(" ");
//columns.Bound(p => p.UnitsSoldPerDay).ClientTemplate("<a href='" +
// Server.UrlDecode(Url.Action("AddNewMarkOut", "MarkOut")) + "'>TEST</a >")
// .Width(500).Groupable(false);
columns.Bound(p => p.UnitsSoldPerDay).Title("Units Sold Per Day")
.ClientTemplate("<a href='AddNewMarkOut','MarkOut'></a>")
.Width(500).Groupable(false);
columns.Bound(p => p.MarkOutGoal).Title("Mark Out Goal (%)").Width(500).Groupable(false);
@*(p => p.ProductID).Template(@< text >
@Html.ActionLink("Show Product Details", "ProductDetails", new { id = @item.ProductID }) >
</ text >); *@
//kendo telerik sample url action code
//columns.Bound(p => p.ProductID).ClientTemplate(
// "<a href='" +
// Url.Action("ProductDetails", "Product") +
// "/#= ProductID #'" +
// ">Show Product Details</a>"
//);
})