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