Hi, I am facing the following issues with the Telerik table. Can you please help resolve them?
1. The text is not aligned with the dropdown (Image attached)
2. When we edit the widget > click on the table on a random cell > select Table Properties > The table wizard will always default to the top left cell > This is working as expected.
If you click in the table (not the editor) and select Cell Properties > the wizard will display (highlight) the cell you selected in the table is it expected that when selecting table properties it always default to the left side first box but when selecting cell properties it will show the current cell which we are in.
video link:- https://jam.dev/c/c1cdf56c-53ab-4218-8774-65907b3efd6d
3. Table properties > Select cells (e.g the top three) > Border > Select the bottom > 6 PX > Purple > OK > The preview is not showing the changes we want to apply > the preview is showing only the top left cell
video link:- https://jam.dev/c/88c17904-c758-47ab-949c-d29b4775dc6d
4. Following step 3 > when we navigate the mouse up and down, in the background, we can see only the top left cell with the border we configured. (while initially we selected the top three) > But if now, in the preview page, we will choose the top three > OK >We will see the top three cells showing the design we configured.
video link:- https://jam.dev/c/ba52bff1-7459-44d6-a647-d3eb5cea07f3
5. From the widget/page > select the middle bottom cell (notice it has no styling) > Table properties > Cell Properties > Select the middle bottom cell again > More Cell Styling > Border > Notice that the top row design is inherited > Is this expected?
video link:- https://jam.dev/c/1516e16f-1f7c-4e89-8b19-368edabf5703
5.1 I have observed that when we're in the widget > selecting a cell from the table > clicking on Cell Properties > The top row design is not inherited.
Hi Team,
We are currently using the Telerik RadScheduler control in our ASP.NET Web Forms application. As part of a new requirement, we need to enable drag-and-drop functionality to move appointments between resources.
During this drag-and-drop operation, we would like to display a confirmation dialog with OK and Cancel buttons:
If the user clicks OK, the appointment move should proceed.
If the user clicks Cancel, the move should be cancelled without any changes.
We attempted to use radconfirm() within the OnClientAppointmentMoveEnd event to achieve a confirmation dialog similar to the native JavaScript confirm() function. However, we were unable to achieve the expected behavior.
Specifically, when handling the user response and attempting to proceed with the move via scheduler.moveAppointment(appointment, targetSlot);, we encountered the following error:
Uncaught TypeError: Cannot read properties of undefined (reading 'get_index')
Code tried:
function onAppointmentMoveEnd(sender, eventArgs) {
var appointment = eventArgs.get_appointment();
var targetSlot = eventArgs.get_targetSlot();
var scheduler = sender;
// Cancel the automatic move until user confirms
eventArgs.set_cancel(true);
radconfirm("Are you sure you want to move this appointment?", function (userConfirmed) {
if (userConfirmed) {
eventArgs.set_cancel(false);
// Manually perform the move
scheduler.moveAppointment(appointment, targetSlot);
}
// else: Do nothing (cancelled)
{
eventArgs.set_cancel(true);
}
}, 300, 150, null, "Confirm Move");
}
Could you please suggest the recommended approach to implement this behavior effectively with code samples or reference link ?
We appreciate your guidance on this.
Thanks
Sathyendranath.
Hi Telerik Team,
I am designing a report using Telerik Report Designer and have connected multiple Web Service Data Sources that require 2-step authentication.
The reports are stored on the Telerik Report Server and are displayed in my ASP.NET MVC project using report server credentials and the report path (Category/ReportName). I have created the following function to connect to the report server:
Scenario: My API domain is https://abcapi.com, which is used in every report under the "Configure Data Retrieval" window of the Web Service Data Source.
My Requirement: If the domain name changes, I have to manually update the domain in every report and each Web Service Data Source, which is time-consuming and inefficient.
Question:
Is there a way to set the domain name dynamically, so that I only need to update it in one place? Also, where is the configuration of each Web Service Data Source stored — is it in the database or somewhere else?
Regards,
Prabesh Shrestha
Hello Everyone,
I'm using the RadAjaxLoadingPanel to let the users know that a process is taking some time. I've used the loading.gif provided by the Telerik tools, which was fine for development purposes. However, I'd like to switch my gif to something else. When I changed the properties of the Image within the RadAjaxLoadingPanel, I'm still getting the original Telerik gif.
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default" Modal="True" Transparency="70">
<asp:Image ID="Image2" runat="server" ImageUrl="~/MyImage.gif" />
</telerik:RadAjaxLoadingPanel>
Also, I've removed the Telerik gif from my directory, and I've cleared the web browser's cache and cookies; but without luck.
What do I need to do to use my gif?
Thanks,
Mike
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
Hi Team,
We have legacy application which is currently running in Visual studio 2008. As EOL of VS 2008 we started to build the application in VS 2019 with .net framework 3.5.
Currently we are using RAD control which have separate dll for each control like RadEditor.Net2.dll, RadPanelbar.Net2.dll, RadWindow.Net2.dll
as well as Telerik UI with Telerik.Web.UI.dll (version 2008.02.0826)
Problem statement:-
While migrating application from VS2008 to VS2019 we are facing below error while debugging locally.
we are using rad:RadAjaxManager in our aspx page.
by adding this property to the manager ajax mechanism will not work and page start post back in each call.
Any other solution do you have to overcome 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>
);
}