I am using telerik version 2014.3.1024.45 with Asp.Net Webforms
I am using Telerik RadGrid. Columns are being sorted using string value. However if a particular column has integer values, it fails to sort properly. E.g. For the values 0, 1, 10, 2, 12, 3 It will sort as 0, 1, 10, 12, 2, 3
I tried setting DataType="System.Int32" for column but still it considers as string. This column has on the fly values so I can not sort at database also.
Would appreciate any suggestion here. Is there any way to do it ?
Thanks In advance
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>
);
}
Hello Team,
I am using Telerik RadScheduler for displaying office 365 appointments and managing like add new appointments/update/delete/recurring events, but I am facing issues like when I bind results (getting from graph API) but event displaying and when I try to edit event series then showing error like scheduler is null. and when I tried to delete any instance of the recurring event then showed error like -
Please help me to solve that issue.
Hello,
Since this is a "Glory with Telerik Controls" - thought of sharing this. We build Analog World Clock using Telerik Chart Control and it shows time in different parts of the world.
http://www.aisoftwarellc.com/Showoff/Worldclocks