Telerik Forums
Community Forums Forum
1 answer
4 views

Dear Telerik Community,

I hope this message finds you well. I am reaching out to seek assistance with an issue I am encountering in my Telerik WinForms application.

Problem Description: I have designed a Windows Form using Telerik controls, which includes a RadForm containing a RadGroupBox with various Telerik controls such as RadTextBoxes, RadDropDownList, and RadButton. However, when I run the application, I notice that the dimensions of the controls are automatically increasing, leading to inconsistent layout and undesired vertical spacing between controls. Snapshot for reference attached..

Steps Taken:

  1. Added RadForm to the project.
  2. Included a RadGroupBox within the RadForm.
  3. Added RadTextBoxes, RadDropDownList, and RadButton to the RadGroupBox.

Expected Solution: I am seeking guidance on the settings or configurations that need to be implemented to ensure that the layout of the form remains consistent and does not automatically resize the controls.

Dinko | Tech Support Engineer
Telerik team
 answered on 21 Mar 2024
8 answers
183 views
1 answer
17 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
49 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
29 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
17 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
60 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
78 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
41 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
83 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
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?