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
16 views

As show in the screenshot the output is "1 of 0" in the pagination section of the telerik grid when Data is null or empty meaning no records available. 

 

I tried to make it 0 while its running but couldn't as the input field is allowing value > 0 only, I guess. Is there an easy or quick solution for this?

Or may be I am doing something wrong. below is my code.



@* Set initial page index, and keep it updated with the grid state to prevent it from resetting the grid page index on re-renders *@

<TelerikGrid Data="@MyData" Pageable="true" @bind-PageSize="@PageSize" Height="300px"
             FilterMode="Telerik.Blazor.GridFilterMode.FilterRow" @bind-Page="@PageIndex">
      <GridSettings>
        <GridPagerSettings InputType="PagerInputType.Input"
                           PageSizes="@PageSizes"
                           ButtonCount="10"
                           Adaptive="true"
                           Position="PagerPosition.Bottom">
        </GridPagerSettings>
    </GridSettings>
    <GridColumns>
        <GridColumn Field="ID"></GridColumn>
        <GridColumn Field="TheName" Title="Employee Name"></GridColumn>
    </GridColumns>
</TelerikGrid>

@code {
    protected List<int?> PageSizes { get; set; } = null; //new List<int?> { null, 15, 30, 50 };
    int PageIndex { get; set; } = 0;
    int PageSize { get; set; } = 10;

// I have tried it with Pagechanged event as well instead of 2-way data binding but it didn't worked. 
    async Task PageChangedHandler(int currPage)
    {
        if(MyData == null || !MyData.Any())
            PageIndex = 0;
        else 
            await Task.Run(() => PageIndex = currPage);
        // when using one-way binding for the Page parametr, make sure to update it in the PageChanged event
    }

    public IEnumerable<object> MyData = Enumerable.Empty<object>(); 
        
}

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
30 views

2023 R3 UI for ASP.NET AJAX has been out for a few weeks, but I can't find the documentation anywhere.

The old docs don't seem to be updates, and links all 404.

Am I doing something wrong?

Rumen
Telerik team
 answered on 24 Oct 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. 

0 answers
120 views

I have an MVC 3 application that has been running well so far on a Windows 2012 web server. We are in the process of upgrading the application, AS IS, to a Windows 2022 server. And are running into the following error:

 

 

[ArgumentNullException: Value cannot be null.
Parameter name: value]
   System.Web.Caching.CacheEntry..ctor(String key, Object value, CacheDependency dependency, CacheItemRemovedCallback onRemovedHandler, DateTime utcAbsoluteExpiration, TimeSpan slidingExpiration, CacheItemPriority priority, Boolean isPublic, CacheInternal cache) +11948326
   System.Web.Caching.CacheInternal.DoInsert(Boolean isPublic, String key, Object value, CacheDependency dependencies, DateTime utcAbsoluteExpiration, TimeSpan slidingExpiration, CacheItemPriority priority, CacheItemRemovedCallback onRemoveCallback, Boolean replace) +141
   System.Web.Caching.AspNetCache.Insert(String key, Object item, CacheInsertOptions options) +107
   Telerik.Web.Mvc.Infrastructure.Implementation.CacheProvider.Insert(String key, Object value) +54
   Telerik.Web.Mvc.Infrastructure.Implementation.Cache.Get(String key, Func`1 defaultValueFactory) +146
   Telerik.Web.Mvc.Infrastructure.Implementation.ControllerContextCache.GetControllerContext(RequestContext requestContext, String controllerName, String areaName) +204
   Telerik.Web.Mvc.Infrastructure.Implementation.AuthorizationContextCache.AuthorizationContextFactory(RequestContext requestContext, String controllerName, String actionName, String areaName) +52
   Telerik.Web.Mvc.Infrastructure.Implementation.<>c__DisplayClass1.<GetAuthorizationContext>b__0() +44
   Telerik.Web.Mvc.Infrastructure.Implementation.Cache.Get(String key, Func`1 defaultValueFactory) +95
   Telerik.Web.Mvc.Infrastructure.Implementation.AuthorizationContextCache.GetAuthorizationContext(RequestContext requestContext, String controllerName, String actionName, RouteValueDictionary routeValues) +346
   Telerik.Web.Mvc.Infrastructure.Implementation.ControllerAuthorization.IsAccessibleToUser(RequestContext requestContext, String controllerName, String actionName, RouteValueDictionary routeValues) +151
   Telerik.Web.Mvc.Infrastructure.Implementation.NavigationItemAuthorization.IsAccessibleToUser(RequestContext requestContext, INavigatable navigationItem) +367
   Telerik.Web.Mvc.UI.NavigationItemContainerExtensions.WriteItem(TItem item, TComponent component, IHtmlNode parentTag, INavigationComponentHtmlBuilder`1 builder) +315
   Telerik.Web.Mvc.UI.<>c__DisplayClass4.<WriteHtml>b__3(MenuItem item) +36
   Telerik.Web.Mvc.Extensions.EnumerableExtensions.Each(IEnumerable`1 instance, Action`1 action) +159
   Telerik.Web.Mvc.UI.Menu.WriteHtml(HtmlTextWriter writer) +352
   Telerik.Web.Mvc.UI.ViewComponentBase.Render() +87
   Telerik.Web.Mvc.UI.ViewComponentBuilderBase`2.Render() +15

 

At this point, I am fairly certain this has to do with some dll mismatch between the 2 servers. The 2022 server has MVC3 installed on it.

Any ideas what I should be looking at?

Balaji
Top achievements
Rank 1
 asked on 03 May 2023
1 answer
46 views

Dear support team,

 

We have successfully configured the Telerik Report Server to use reports with custom functions by following the instructions on the link:

https://docs.telerik.com/report-server/knowledge-base/how-to-use-custom-function-in-report-server#environment

 

The reports work fine on the Telerik Report Server, but we cannot access the ObjectDataSource component via the Web Report Designer. We can do that only in Standalone Designer.

So, what is obvious is that the ObjectDataSource component is resolved at runtime, using the configuration of the running application, but in the ObjectDataSource wizard the object is not displayed. We get a message that no business object type have been found on the server.(Image attached)

 

Could you please help us with this issue?

2 answers
50 views

Hi 

Whenever we are importing pdf file to process ,we are getting below error.

Could you please Kindly help Asap.

 

Thanks and Regards,

Bhavya.

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?