Telerik Forums
Community Forums Forum
0 answers
6 views
Hi everyone!

I'm trying to place a NumericTextBox inside a FormItem because I need to apply some validations that are defined in another file, and also call a method that returns a calculated result. However, whenever I try to do this, my project fails to run.

Any advice or insights would be appreciated!
 

Regards
Ajay Hinduja Geneva based on Switzerland (Swiss)
Ajay Hinduja
Top achievements
Rank 1
 asked on 01 Jul 2025
1 answer
33 views

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.

Attila Antal
Telerik team
 answered on 22 Apr 2025
1 answer
42 views

 

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:

using System.Web;
using System.Web.Mvc;
using Telerik.Reporting;
using Telerik.ReportViewer.Mvc;
using System.Collections.Generic;
using System;

namespace Project.Extensions
{
    public static class ReportExtension
    {
        public static IReportViewerBuilder GetReportViewerConfig(this HtmlHelper htmlHelper, string reportId, string reportSource, Dictionary<string, string> reportParams)
        {
            var uriReportSource = new UriReportSource
            {
                Uri = reportSource
            };

            foreach (var param in reportParams)
            {
                uriReportSource.Parameters.Add(param.Key, param.Value);
            }

            return htmlHelper.TelerikReporting().ReportViewer()
                .Id(reportId)
                .ReportServer(new ReportServer()
                {
                    Url = ReadConfigData.REPORT_SERVER_URL,
                    Username = ReadConfigData.REPORT_SERVER_USERNAME,
                    Password = ReadConfigData.REPORT_SERVER_PASSWORD
                })
                .ReportSource(uriReportSource)
                .ViewMode(ViewMode.Interactive)
                .ScaleMode(ScaleMode.FitPageWidth)
                .PersistSession(false)
                .SendEmail(new SendEmail { Enabled = true })
                .Parameters(new Parameters
                {
                    Editors = new Editors
                    {
                        MultiSelect = EditorTypes.ComboBox,
                        SingleSelect = EditorTypes.ComboBox
                    }
                })
                .EnableAccessibility(false);
        }
    }
}


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

Petar
Telerik team
 answered on 09 Apr 2025
2 answers
43 views

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

 

Rumen
Telerik team
 answered on 26 Nov 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
57 views

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.


Uncaught Error: Unexpected ajax response was received from the server. This may be caused by one of the following reasons: - Server.Transfer. - Custom http handler. - Incorrect loading of an "Ajaxified" user control. Verify that you don't get a server-side exception or any other undesired behavior, by setting the EnableAJAX property to false. at _1.CheckContentType () at _1.HandleAsyncRequestResponse () at _4e.onreadystatechange ()

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.

 

 

 

 

 

Abhishek
Top achievements
Rank 1
 asked on 10 Oct 2024
1 answer
87 views
How can I resolve issues with integrating an age calculator into a Telerik-based application? Specifically, I'm facing problems with accurate age calculations and data synchronization between the calculator and Telerik components. Any advice or solutions would be appreciated.
Rumen
Telerik team
 answered on 05 Aug 2024
1 answer
191 views
Lance | Senior Manager Technical Support
Telerik team
 answered on 03 Apr 2024
1 answer
264 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
95 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>(); 
        
}

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?