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

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

2 answers
194 views
I am using a kendo react breadcrumb component. It has 3 menu items. Home -->Profile-->Details.  If i click on Profile, i want to navigate to Profile.jsx page. How can i do it? i am not getting enough examples on how navigation works in breadcrumbs.  Kindly help me
Tanu
Top achievements
Rank 2
 updated answer on 04 Sep 2023
1 answer
127 views

Currently I have the below code that works when the "Notes" Column is the last column and is on screen.

If grid overflows and needs a scroll bar the CellLoaded method gets called indefinitely until user scrolls to make the "Notes" Column show on the screen. And needs to stay on screen while scrolling up/down to keep expected functionality.


private void radGridView_CellLoaded(object sender, CellEventArgs e)
{
    GridViewCellBase cellItem = e.Cell;
    // Only run once per row, after all cells are loaded [Notes is last loaded column]
    if (cellItem.Column.UniqueName == "Notes")
    {
        GridViewRowItem rowItem = cellItem.ParentRow;
        if (rowItem.Item != null && rowItem.Item is DataRowView)
        {
            _viewModel.ToggleHighlightingCells_BasedOn_CellSpecificHighlighting_Column(((DataRowView)rowItem.Item).Row, rowItem.Cells);
        }
    }
}

 

I have tried to use RowLoaded (see below), but the styling achieved is not applied correctly

private void radGridView_RowLoaded(object sender, RowLoadedEventArgs e)
{

    if (e.Row is GridViewRowItem rowItem && rowItem.Item is DataRowView dataRowView)
    {
        _viewModel.ToggleHighlightingCells_BasedOn_CellSpecificHighlighting_Column(dataRowView.Row, rowItem.Cells);
    }
}

 

 

Any thoughts of what I can do to make the RowLoaded method work like the CellLoaded?

Is Loaded methods ran first is there a trigger that happens after Load?

I am needing the data in the row to be populated and then the styling applied after, based on the data loaded in the row

Dimitar
Telerik team
 answered on 10 Aug 2023
1 answer
47 views

Are there any Demo's where I can take a Report that has a Property and underneath that property is 5 owners. I would need the report to print the same report for 5 owners.

 

This is my current report using Jaspersoft which we are trying to get rid of.

Dimitar
Telerik team
 answered on 22 Jun 2023
1 answer
68 views

Hi all,

 

I am using Kendo UI with Angular. I want to show some data in my Kendo Grid but I am stuck at a point as the json data I am using is of multiple level.

Json data:

{

"colleges": [

{

"id": 1,

"name": "test 1",

"entities": [

{

"type": "teacher",

"name": "Dan"
}

]

},

{

"id": 2,

"name": "test 2",
"entities":

[

{

"type": "student",

"name": "David"

}
]
}

],

"status": "Success"

}

 

I want to show data in the below form:

 

College name            Student name                  Teacher name

test 1                                                                          Dan

test 2                            David

 

Your valuable response will be appreciated. Please feel free to contact back if any question.

 

Thanks,

Akash Verma

Akash
Top achievements
Rank 1
 updated question on 16 May 2023
7 answers
296 views
Is it possible to get the psd file for the Loading animation image used with callbacks?

I would like to use a different background color than white.

Thanks.
John
Top achievements
Rank 1
 updated answer on 11 Apr 2023
0 answers
47 views

Hi Team,

 

We need a help related to "RadNumericTextBox" as we are using it with "AM Charts", we want to manage the charts and set resolution to a fixed number or set it to auto, so that it should get managed as per size of table and chart, the Telerik details we are using, Telerik version 2014.3.1024.45 with Asp.Net Webforms, Kindy request you to please give a solution.

 

Thank you

 

Swapnil
Top achievements
Rank 1
 asked on 03 Apr 2023
0 answers
66 views

Hi, I'm trying to write a control template for GroupHeaderRow, But not sure how to bind AggregateResultsList with GridViewGroupHeaderCell

RadGridView have settings with GroupRenderMode="Flat" and ColumnAggregatesAlignment="NextToGroupKey"

Control template for GroupHeaderRow taken from Reference : Extracting GroupHeaderRow template in UI for WPF | Telerik Forums

I'm expecting GroupHeaderRow with aggregates in GridViewGroupHeaderCell against each column. But my control template looks like ColumnAggregatesAlignment property has "NoAlignment" value.


 

Praveenraj
Top achievements
Rank 1
 updated question on 11 Mar 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?