Telerik Forums
Community Forums Forum
8 answers
176 views
1 answer
33 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>
  );
}

1 answer
22 views
Hello. I need some help.  I have my website where I want

 

Hi, I need help. I'm using fiddlercore and C# I need to change a response on a website but it doesn't work.

In this case, I have a link that has texts in the response, such as text1 changing to text2,

but nothing happens, the site opens without the changes. Am I missing something? Thank you very much.

private void FiddlerApplication_AfterSessionComplete(Session oSession) { if (oSession.fullUrl.Contains("https:www.mysite/change.json") && oSession.HTTPMethodIs("GET")) { oSession.bBufferResponse = true; oSession.utilDecodeResponse(); AppendTextRichBox2(GetSessionDetails(oSession)); ModifyResponse(oSession, "text1", "text2"); } }

 private void ModifyResponse(Session oSession, string oldValue, string newValue)
        {
            string responseBody = oSession.GetResponseBodyAsString();
            responseBody = responseBody.Replace(oldValue, newValue);
            oSession.utilSetResponseBody(responseBody);
        }

Nick Iliev
Telerik team
 answered on 01 Jan 2024
0 answers
21 views

<TelerikGrid Data="@GetRows()" TItem="DataRow" PageSize="5">
    <GridColumns>
        @foreach (DataColumn column in dataTable.Columns)
        {
            <GridColumn Field="@column.ColumnName" Title="@column.ColumnName" />
        }
    </GridColumns>
</TelerikGrid>

@code {
    private DataTable dataTable;

    protected override void OnInitialized()
    {
        dataTable = new DataTable("MyDataTable");
        dataTable.Columns.Add("ID", typeof(int));
        dataTable.Columns.Add("Name", typeof(string));
        dataTable.Rows.Add(1, "John");
        dataTable.Rows.Add(2, "Jane");
    }

    private IEnumerable<DataRow> GetRows()
    {
        return dataTable.Rows.Cast<DataRow>();
    }
}   

 

this code not working .Is there any other ways?

Nikilesh
Top achievements
Rank 1
 asked on 02 Dec 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. 

1 answer
78 views

Our shop is currently a Web Forms shop and we have some new projects coming in that will be using Razor pages in Visual Studio 2022.

We do heavy data centric web sites on the companies intranet.  SQL Server is the back end.  We don't need in browser application functionality.

Since we are all learning Razor pages I wasn't sure where to start with the Telerik components.
What components should we take a look at first that will help us with our UI and reporting functionality?

Thanks

 


Aleksandar
Telerik team
 answered on 27 Mar 2023
1 answer
40 views

Hi Team,

I am using Telerik MVC controls for my .NET MVC Application (2018.1.221.545) . I want to use PDFViewer control however i am not able to.

 

Request you to please guide me on steps to follow in order to be able to use this control..

Thanks

Eyup
Telerik team
 answered on 27 Feb 2023
0 answers
75 views
I am creating a Web Forms based project using ASP.Net where I am using Telerik Kendo Grid. I want create Grandparent/Parent/Child grid. GrandParent Grid will display items, clicking on those items will display Parent Grid containing it's subitems, further clicking on which Child Grid will be displayed containing Parent item's subitems. How can I do that?
0 answers
68 views
I am creating a web forms project using ASP.Net. There I have used telerik Kendo Grid. The Previous  and Next pagination buttons are not working. Do I need to call any event manually to make it work?
2 answers
529 views

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

         
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?