Telerik Forums
Community Forums Forum
1 answer
18 views

Hello Telerik team,

I am currently working on a report using Telerik Report Designer, and I need to allow users to filter data based on a date range (i.e., "from" and "to" date). In Kendo UI, we have a convenient DateRangePicker component that allows selecting both dates in one UI control.

My question is:
Does Telerik Report Designer support a single “date range” parameter, or do we need to use two separate parameters? DateTime parameters (e.g., DateFrom and DateUntil) to simulate this functionality?

Is there any built-in way to do it using one parameter, or a recommended approach to simulating a range? Please let me know.

Regards,

Prabesh Shrestha

Petar
Telerik team
 answered on 27 May 2025
2 answers
24 views

 

Hi Telerik Team,

I’m designing a Telerik Report Designer report that includes a line chart with markers. I want to replicate a feature that exists in Kendo UI line charts, where:

  • Clicking on a legend item toggles (hides/shows) the corresponding series in the chart.

This is especially helpful when multiple lines are present, and users want to focus on specific data. Here’s an example screenshot of the chart I’m working with:

My questions:

  1. Does Telerik Reporting support interactive legend click behavior similar to Kendo UI Charts?

  2. If not directly supported, is there any workaround that can help achieve this functionality?

 

Regards,
Prabesh Shrestha

 

 

Prabesh
Top achievements
Rank 1
Iron
Iron
 updated answer on 20 May 2025
1 answer
82 views

Hy,

I want to customize the Kendo-theme-default (last version -> 10.3.1) in my blazor project.

To install npm package I followed the documentation: Telerik and Kendo UI Default Theme Overview | Design System Kit:

But when I import the package inside my scss file style, I have the following error and i can't compile the scss file:

The kendo-theme-default package is correctly located under node_modules. 

My scss file:

My project files:

Can you help me?

Thanks

 

Emil
Telerik team
 answered on 11 Mar 2025
1 answer
32 views

 

I am using RadNavigation for my application and currently it looks like this.

I need 2 changes in the above settings.

1. The first level expansion, i. e the Sandwich menu at the top, when the screen is expanded, will be expanded horizontally. I need it to be expanded vertically.

(Currently the main Menu's, Menu 1, Menu 2 etc showing vertically as the screen is not expanded. If the screen is expanded, they will start showing Horizontally.)

2. The second level expansion Menu 2 --> Menu 2.1 --> Menu 2.1.1 is expanding vertically. I want it to be expanded Horizantally as shown in the below image. 

 

How can i achieve this with RadNavigation Menu? Can you please help?

Vasko
Telerik team
 answered on 06 Feb 2025
1 answer
28 views

 

Currently, I am using RadPanelBar in my application.

The expansion is exactly as shown here in the example here - https://demos.telerik.com/aspnet-ajax/panelbar/examples/overview/defaultcs.aspx?_gl=1*1ii0316*_gcl_au*NjQ4MjM2MzI0LjE3Mzc0MTgwNTU.*_ga*MTQwMDI1ODExNy4xNzM3NDE4MDU1*_ga_9JSNBCSF54*MTczODczMzkwNC4xMC4xLjE3Mzg3MzY1NzAuMi4wLjA.

However, I want to change it to look like this -

 

Can you please suggest if this can be done with the existing RadPanelBar control? If yes, how can I do this.

If not, with which other control I can achieve this?

 

 

 

 

 

Rumen
Telerik team
 answered on 05 Feb 2025
1 answer
115 views

I'm developing a project, and the ask is to show a popup/dialog-box when row is in edit mode and the user clicks on a specific input field in a row then a popup will be displayed.
Content of the opened window will be the same as column's data that is a Textarea.

 

I tried to implement through events associated to kendo-textarea, unfortunately they're not getting invoked. 


Martin Bechev
Telerik team
 answered on 04 Dec 2024
2 answers
50 views

Hello,

I have a web page with a number of elements, including labels, buttons, a file uploader, and some text boxes. Also, I'm using the RadAjaxManager and RadAjaxLabel. This is a picture of a few of the elements.

I need to update some of the elements, so I've set up my RadAjaxManager like this:


<telerik:RadAjaxManager ID="RadAjaxManager3" runat="server" >    
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadButtonCreate">
            <UpdatedControls>                    
                <telerik:AjaxUpdatedControl ControlID="RadLabel1" LoadingPanelID="RadAjaxLoadingPanel1"/>
                <telerik:AjaxUpdatedControl ControlID="RadAsyncUploadFile1" LoadingPanelID="RadAjaxLoadingPanel1"/>                 
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

This code doesn't impact my layout. However, when I added a the textbox to the UpdatedControls....


<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" >    
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadButtonCreate">
            <UpdatedControls>                    
                <telerik:AjaxUpdatedControl ControlID="RadLabelTicketInfo" LoadingPanelID="RadAjaxLoadingPanel1"/>
                <telerik:AjaxUpdatedControl ControlID="RadAsyncUploadSARFile" LoadingPanelID="RadAjaxLoadingPanel1"/> 
                <telerik:AjaxUpdatedControl ControlID="RadTextBoxDescription" LoadingPanelID="RadAjaxLoadingPanel1"/>                    
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

...My website changes to this:

When I remove the <telerik:AjaxUpdatedControl ControlID="RadTextBoxDescription" LoadingPanelID="RadAjaxLoadingPanel1"/> element from the UpdatedControls, the layout goes back to what is shown in the first picture.

 

Can someone please explain why adding elements to the UpdatedControls section would affect the placement of the other webpage elements? I'd like to update the content of these textboxes, so how can I add them to the UpdateControls without distorting the layout?

 

Thanks,

Mike

 

Rumen
Telerik team
 answered on 22 Oct 2024
0 answers
45 views

I have been asked to create a "master report template" at my company in order to standarize templates from which all other reports can inherit from. I read this old forum question which was answered with an example code compressed into a .rar file, but it seems to be outdated, is there any more recent examples or documentation on how to create/implement a master report template and integrate it into my report viewer?

 

Thanks.

Esteban
Top achievements
Rank 1
 asked on 04 Sep 2024
0 answers
81 views

In radscheduleview, added multiple resources and grouping based on custom resourceview, Also, added custom datatemplate for GroupHeaderContentTemplateselector

In the below yellow hightlighted place , (group header ) need to add Resource related information for the day in weekview. But couldnot  get exact datacontext of the group header while switching between dates,  Only able to get IResource from Groupheaderdescriptions. In IResource having only few properties for cusomization. 

So, could not able to bind any property to Group header template. Please suggest on this?

 

Srinivasan
Top achievements
Rank 1
 updated question on 13 May 2024
1 answer
267 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>
  );
}

Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?