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
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:
Does Telerik Reporting support interactive legend click behavior similar to Kendo UI Charts?
If not directly supported, is there any workaround that can help achieve this functionality?
Regards,
Prabesh Shrestha
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
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?
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?
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.
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
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.
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?
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>
);
}