Telerik Forums
Community Forums Forum
8 answers
176 views
1 answer
15 views

how to set ragdgridview row numbers in the highlighted cells ,tried RowIndicatorVisibility="Visible" but not working in c#

 

Dimitar
Telerik team
 answered on 26 Jan 2024
1 answer
34 views
Here's my current code, where on the button clicks I'm opening a popup in which the user can type anything and insert it into the cursor position, it's working fine.

Problem:- When I save my text like this <p>I’m looking for the parsing to keep my deeply nested div structure but the deepest div allows inline content. For some reason, a new div gets injected though. Which I’m later removing. I’d rather not have that hack though. My name is&nbsp;<span contenteditable="false" class="uneditable" style="user-select: none; opacity: 0.5; background-color: red; padding: 2px;" id="12312381829919">rahul</span>.</p>
where rahul is a custom value inserted using a popup with properties like id & style 

but when I parse this value onMount from API, the editor doesn't keep my style and id properties and when inspected the text in the editor looks like 

<p>I’m looking for the parsing to keep my deeply nested div structure but the deepest div allows inline content. For some reason, a new div gets injected though, which I’m later removing. I’d rather not have that hack though. My name is&nbsp;<span contenteditable="false" class="uneditable" >rahul</span>.</p>

which Is without ID and style tag 

here's my code for reference 

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>
  );
}

0 answers
28 views

Hello! I've looked all over for a solution to my problem but couldn't find it. So, here's my issue:

This is my RadEditor with the options I need enabled. Right now, my browser has its zoom at 100%. When I click to change the color of the text or my back color, it shows up just fine under the icon. Plus, choosing the colors changes the text as it should.

 

 

 

The problem starts whenever I change my zoom. The options break, move to the extreme of the screen, and selecting colors doesn't change my text. It's completely random too; sometimes it'll break at 90%. Sometimes at 125%. It's an issue because my clients prefer not to use 100% in other pages and we don't know how to solve this problem.

 

Please help!

 

Saory
Top achievements
Rank 1
 asked on 15 Dec 2023
0 answers
14 views
Hi everyone! I'm trying to replicate the slide animation from jQuery UI's hide function in plain jQuery. I want the flexibility to slide a div in any direction, regardless of its positioning or CSS. Using $('#somediv').animate({ width: 'hide' }) gives odd overflow issues and limits the hide/show directions. How does jQuery UI achieve this magic, and is there a way to do it in plain jQuery?
Jaswitha12
Top achievements
Rank 1
 asked on 30 Nov 2023
1 answer
55 views

I want to dynamically display template.  I have one report template, but I want to able to change dynamically what should display in the template. If it is 10 columns table or 20 columns table without having to regenerate the report template.  Is there a way to programmatically control the report template content.

Todor
Telerik team
 answered on 18 Oct 2023
0 answers
77 views

Although Telerik is awesome I wish to delete my Telerik account, Telerik Forums account and all of the data associated with this Telerik account. Please help me out with this.


Thank You

Missing User
 updated question on 20 Sep 2023
0 answers
37 views

we are integration ARCGIS SDK  with KENdo UI latest version, both components working without having any issues, when i intergate it is thoring below error ,  please help me here.

 

Cannot destructure property 'spans' of 's' as it is null.
TypeError: Cannot destructure property 'spans' of 's' as it is null.
    at o.update (http://localhost:3000/static/js/vendors-node_modules_arcgis_core_renderers_support_heatmapUtils_js-node_modules_arcgis_core_v-6c8ef0.chunk.js:1990:16)
    at p.update (http://localhost:3000/static/js/vendors-node_modules_arcgis_core_renderers_support_heatmapUtils_js-node_modules_arcgis_core_v-6c8ef0.chunk.js:3531:432)
    at p.processUpdate (http://localhost:3000/static/js/vendors-node_modules_arcgis_core_views_2d_layers_LayerView2D_js-node_modules_arcgis_core_view-212c73.chunk.js:120:163)
    at a._updateLayerView (http://localhost:3000/static/js/bundle.js:81319:220)
    at Array.forEach (<anonymous>)
    at p.forEach (http://localhost:3000/static/js/bundle.js:50584:119)
    at c.update (http://localhost:3000/static/js/bundle.js:81288:9)
    at http://localhost:3000/static/js/bundle.js:57103:229
    at l.forAll (http://localhost:3000/static/js/bundle.js:52085:35)
    at Object.D [as executeFrameTasks] (http://localhost:3000/static/js/bundle.js:57100:7)
ERROR
Cannot destructure property 'spans' of 's' as it is null.
TypeError: Cannot destructure property 'spans' of 's' as it is null.
    at o.update (http://localhost:3000/static/js/vendors-node_modules_arcgis_core_renderers_support_heatmapUtils_js-node_modules_arcgis_core_v-6c8ef0.chunk.js:1990:16)
    at p.update (http://localhost:3000/static/js/vendors-node_modules_arcgis_core_renderers_support_heatmapUtils_js-node_modules_arcgis_core_v-6c8ef0.chunk.js:3531:432)
    at p.processUpdate (http://localhost:3000/static/js/vendors-node_modules_arcgis_core_views_2d_layers_LayerView2D_js-node_modules_arcgis_core_view-212c73.chunk.js:120:163)
    at a._updateLayerView (http://localhost:3000/static/js/bundle.js:81319:220)
    at Array.forEach (<anonymous>)
    at p.forEach (http://localhost:3000/static/js/bundle.js:50584:119)
    at c.update (http://localhost:3000/static/js/bundle.js:81288:9)
    at http://localhost:3000/static/js/bundle.js:57103:229
    at l.forAll (http://localhost:3000/static/js/bundle.js:52085:35)
    at Object.D [as executeFrameTasks] (http://localhost:3000/static/js/bundle.js:57100:7)
ERROR
Cannot destructure property 'spans' of 's' as it is null.
TypeError: Cannot destructure property 'spans' of 's' as it is null.
    at o.update (http://localhost:3000/static/js/vendors-node_modules_arcgis_core_renderers_support_heatmapUtils_js-node_modules_arcgis_core_v-6c8ef0.chunk.js:1990:16)
    at p.update (http://localhost:3000/static/js/vendors-node_modules_arcgis_core_renderers_support_heatmapUtils_js-node_modules_arcgis_core_v-6c8ef0.chunk.js:3531:432)
    at p.processUpdate (http://localhost:3000/static/js/vendors-node_modules_arcgis_core_views_2d_layers_LayerView2D_js-node_modules_arcgis_core_view-212c73.chunk.js:120:163)
    at a._updateLayerView (http://localhost:3000/static/js/bundle.js:81319:220)
    at Array.forEach (<anonymous>)
    at p.forEach (http://localhost:3000/static/js/bundle.js:50584:119)
    at c.update (http://localhost:3000/static/js/bundle.js:81288:9)
    at http://localhost:3000/static/js/bundle.js:57103:229
    at l.forAll (http://localhost:3000/static/js/bundle.js:52085:35)
    at Object.D [as executeFrameTasks] (http://localhost:3000/static/js/bundle.js:57100:7)

 

 

 

Dastagiri
Top achievements
Rank 1
 asked on 14 Sep 2023
2 answers
81 views

Hello Team,

We are developing a mobile application using Xamarin forms.

We need to edit the pdf form and show the edited form in Telerik pdf viewer.

we completed the pdf edit functionality and we can able to view edited details on 3rd party apps.

but, we cannot able to view edited details in Telerik pdf viewer control.

Kindly suggest viewing the edited details and editing the pdf form in pdf viewer.

regards,

Manikandan K

 

Didi
Telerik team
 updated answer on 14 Aug 2023
0 answers
91 views

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.

    • Previous Sitefinity Version: 11.0.6701
    • Target Sitefinity Version: 14.1.7800
    • AjaxControlToolkit Version: 3.0.20820.0
  1. Error Details:

    • Error Message: "Could not find a part of the path'...\AjaxControlToolkit.3.0.20820.0"

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. 

Narrow your results
Selected tags
Tags
+? more
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?