The ContextMenu popup is not position properly relative to its target element when the page is horizontally scrolled in Edge. The problem is reproducible with R2 2018.
Steps tp reproduce:
1. Run the code below and scroll the page to the right
2. Right click over a number
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<telerik:RadContextMenu ID="rcmMenu" runat="server">
<Targets>
<telerik:ContextMenuTagNameTarget TagName="a" />
</Targets>
<Items>
<telerik:RadMenuItem Text="Menu Item 1" Value="a" />
<telerik:RadMenuItem Text="Menu Item 2" Value="b" />
</Items>
</telerik:RadContextMenu>
<div style="width: 3500px; height: 100px; position: relative; background-color: yellow;">
<a style="position: absolute; left: 1000px; top: 40px;" onclick="return showMenu(event);">1000</a>
<a style="position: absolute; left: 2000px; top: 40px;" onclick="return showMenu(event);">2000</a>
<a style="position: absolute; left: 3000px; top: 40px;" onclick="return showMenu(event);">3000</a>
</div>
</form>
</body>
</html>
Affects RadCloudUpload and RadAsyncUpload combined with RadProgressArea. Manifests most often on slow networks or very large files.
Scroll down for workarounds for both cases.
NOTE: RadCloudUpload issue is logged separately - https://feedback.telerik.com/Project/108/Feedback/Details/258958-cloudupload-progress-shows-more-than-100-when-uploading-a-file
WORKAROUND FOR PROGRESS AREA is to round down the data, as it seems the server reports more bytes uploaded than they actually are, and that tends to happen under slow network conditions
<telerik:RadAsyncUpload RenderMode="Lightweight" runat="server" ID="RadAsyncUpload1" MultipleFileSelection="Automatic" EnableInlineProgress="false" />
<telerik:RadProgressManager runat="server" ID="RadProgressManager1" />
<telerik:RadProgressArea RenderMode="Lightweight" runat="server" ID="RadProgressArea1" OnClientProgressUpdating="OnClientProgressUpdating" />
<script>
function OnClientProgressUpdating(sender, args) {
//debugger
if (args._progressData.PrimaryPercent > 100) {
args._progressData.PrimaryPercent = 100;
}
if (args._progressData.PrimaryValue > args._progressData.PrimaryTotal) {
args._progressData.PrimaryValue = args._progressData.PrimaryTotal;
}
console.log(args.get_progressData());
}
</script>
WORKAROUND FOR CLOUD UPLOAD is to add the following script at the end of the form that will override the built-in XHR handilng to change the way the totals are calculated:
<script>
Telerik.Web.UI.RadCloudUpload.HandlerUploader.prototype._initializeXmlHttpRequest = function () {
this._xhr = new XMLHttpRequest();
var that = this,
module = this._module,
xhr = this._xhr;
xhr.onreadystatechange = function readyStateChanged() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
that._successfulResponseStatus(xhr);
}
else if (xhr.status != 0) {
that._failedResponseStatus(xhr);
}
}
};
xhr.upload.onprogress = function (event) {
that._uploadedSize += event.loaded;
var percents = Math.round((event.loaded / event.total) * 100) + "%";
module._renderingManager.updateRowProgress(that._uploadingEntity.row, percents, true);
};
}
</script>
After having a filter applied, filter value is not cleared when FilterOption was set to "NoFilter".
The following client-side logic would clear the textbox values before the filtering is applied if filter options are set to "NoFilter"
function onCommand(sender, args) {
if (args.get_commandName() == "HeaderContextMenuFilter") {
var firstTextBox = $("[id$='HCFMRTBFirstCond']")[0].control;
var firstFilterOption = args.get_commandArgument().split("|")[1];
var secondTextBox = $("[id$='HCFMRTBSecondCond']")[0].control;
var secondFilterOption = args.get_commandArgument().split("|")[3];
if (firstFilterOption.includes("NoFilter") && firstTextBox.get_value() != "") {
args.set_cancel(true);
var value = firstTextBox.get_value();
firstTextBox.clear();
var newArg = args.get_commandArgument().replace("|" + value + "|?", "||?");
args.get_tableView().fireCommand(args.get_commandName(), newArg);
}
if (secondFilterOption.includes("NoFilter") && secondTextBox.get_value() != "") {
args.set_cancel(true);
var value = firstTextBox.get_value();
secondTextBox.clear();
var newArg = args.get_commandArgument().replace("|" + value + "|?", "||?");
args.get_tableView().fireCommand(args.get_commandName(), newArg);
}
}
}
Some colors (for example #ccffff, #ccccff, #e5f2ff, #eef9fc, #003366, #006400) are not properly applied in the Colorize tab of the Visual Style Builder and choosing one of them results in setting a different color.
I am seeing a strange problem when opening LinkManager dialog from RadEditor. The width of the dialog keeps decreasing on successive opening of the dialog. Sample page code to reproduce this is given below.
You can see a video of this issue at think URL : https://goo.gl/UuPwtA
Sample page code (code-behind is empty)
<%@ Page Language="C#" AutoEventWireup="true"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<div>
<telerik:RadEditor ID="RadEditor1" runat="server" ToolbarMode="Default" RenderMode="Lightweight" Skin="Metro"></telerik:RadEditor>
</div>
</form>
</body>
</html>
Reproducible in every browser.
When a RadEditor or SPRadEditor in a custom WebPart for SharePoint 2013 is placed in an UpdatePanel or RadAjaxPanel it is not ajaxified and loses its content after a post back.
The RadFormDecorator decorated checkboxes in the Grid are hard to read when checked in the following skins: BlackMetroTouch, Bootstrap, Glow, Metro, MetroTouch, Office2010Black, Telerik, WebBlue Screenshot with Telerik Skin: https://www.screencast.com/t/1P2hyvWNX Steps to reproduce: 1. Open http://demos.telerik.com/aspnet-ajax/formdecorator/examples/formdecoratorandtelerikcontrols/defaultcs.aspx?skin=Telerik 2. Scroll to the Grid 3. Select one or all checkboxes Result: The selected color of the checkbox almost matches the background color
Workaround: Use the following styles
html .RadGrid_Windows7 .rgSave,
html .RadGrid_Windows7 .rgAdd,
html .RadGrid_Windows7 .rgRefresh,
html .RadGrid_Windows7 .rgEdit,
html .RadGrid_Windows7 .rgDel,
html .RadGrid_Windows7 .rgFilter,
html .RadGrid_Windows7 .rgPagePrev,
html .RadGrid_Windows7 .rgPageNext,
html .RadGrid_Windows7 .rgPageFirst,
html .RadGrid_Windows7 .rgPageLast,
html .RadGrid_Windows7 .rgExpand,
html .RadGrid_Windows7 .rgCollapse,
html .RadGrid_Windows7 .rgSortAsc,
html .RadGrid_Windows7 .rgSortDesc,
html .RadGrid_Windows7 .rgUpdate,
html .RadGrid_Windows7 .rgCancel,
html .RadGrid_Windows7 .rgUngroup,
html .RadGrid_Windows7 .rgExpXLS,
html .RadGrid_Windows7 .rgExpDOC,
html .RadGrid_Windows7 .rgExpPDF,
html .RadGrid_Windows7 .rgExpCSV {
background-image: none;
}
html .RadGrid_Windows7 th.rgSorted {
background-image: none;
}
html .RadGrid_Windows7 .rgMasterTable .rgSelectedCell,
html .RadGrid_Windows7 .rgSelectedRow {
background-image: none;
}
html .RadGrid_Windows7 .rgMasterTable .rgActiveCell,
html .RadGrid_Windows7 .rgActiveRow,
html .RadGrid_Windows7 .rgHoveredRow {
background-image: none;
}
html .RadGrid_Windows7 .rgEditRow {
background-image: none;
}
html .RadGrid_Windows7 .rgPager {
background-image: none;
}
html .RadGrid_Windows7 .rgPager .rgPagerButton {
background-image: none;
}
html .RadGrid_Windows7 .rgNumPart a:hover,
html .RadGrid_Windows7 .rgNumPart a.rgCurrentPage {
background-image: none;
}
html .RadGrid_Windows7 .rgNumPart a:hover span,
html .RadGrid_Windows7 .rgNumPart a.rgCurrentPage span {
background-image: none;
}
html .GridReorderTop_Windows7 {
background-image: none;
}
html .GridReorderBottom_Windows7 {
background-image: none;
}
html .RadGrid_Windows7 .rgGroupPanel {
background-image: none;
}
html .RadGrid_Windows7 .rgGroupItem {
background-image: none;
}
html .RadGrid_Windows7 .rgGroupHeader {
background-image: none;
}
html .RadGrid_Windows7 .rgCommandRow {
background-image: none;
}
Could it be possible to see you developing a chat component to offer chat possibilities on a telerik Ajax Website? Would be great Thanks for all you do to simplify our developer life ! Best Jm Hetsch
According to the following Telerik links, the radCheckBox being on a page with a radButton defaults the rendermode to lightweight. https://docs.telerik.com/devtools/aspnet-ajax/controls/checkbox/troubleshooting/distorted-appearance https://docs.telerik.com/devtools/aspnet-ajax/controls/checkbox/mobile-support/render-modes The appearance is indeed distorted when used this way. Changing my radbutton to lightweight changes the design and doesn't match with the overall them of the site. To get the design I wanted, I used an asp:Checkbox instead of a radCheckBox. I'd like to request the radCheckBox and the other controls mentioned in the links to be able to be rendered in more than just lightweight. If radCheckBox is the only one we can get, that's fine as I'm not sure if I would need the other ones. The attached picture shows the issue. Thank you.
As of now RadEditor for SharePoint 2013 or sharepoint 2016 is not available, reason Telerik had provided for non-availablity of RadEditor for List Items as it is handled from client end is not acceptable, since many other component providers do support similar functions with their editors. the reason / use case iam looking for is becoz of need to handle clipboard manager in editor which is not available in Multiple line of text column type of an SharePoint 2013 list,
Using https://products.aspose.com/slides is expensive if you want to programmatically create a powerpoint slide. A typical UI component for input is seen in the attached slide (Spot Element on a performance grid), which would then be rendered into a powerpoint slide (spot on a grid). This is very typical in performance reviews, but also tracking High Flyers, eg are they too skilled for their current position and need to be promoted. Telerik have existing components that could be used, just need to save as a PPT slide instead of a PDF. If there was a Web Component (reuse for HTML5 Chart code) then Export to PowerPoint instead of PDF then you are almost there.
I would like the ability to generate a graphic (.jpg, .bmp) of page 1 of a pdf document so it can be placed in a grid cell.
There are two ways to avoid this:
- Define a tab order on the entire page so all necessary controls will have their TabIndex attribute set
- Remove the attribute from the menu with JS. Here follow a couple of examples. Using RenderMode="Lightweight" also may improve the situation if you do not use the NavigateUrl of the items, so <a> elements are not rendered.
- Solution 1: Executes when the entire page has loaded
function removeMenuTabIndex() {
$telerik.$(".RadMenu[tabindex=0]").removeAttr("tabindex");
Sys.Application.remove_load(removeMenuTabIndex);
}
Sys.Application.add_load(removeMenuTabIndex);
- Solution 2: Add just after the menu so it executes while the DOM is loading, perhaps this can facilitate screen reader compatibility
<telerik:RadMenu runat="server" ID="rm1" RenderMode="Lightweight">
<Items>
<telerik:RadMenuItem Text="first"></telerik:RadMenuItem>
<telerik:RadMenuItem Text="second"></telerik:RadMenuItem>
</Items>
</telerik:RadMenu>
<script>
document.getElementById("<%=rm1.ClientID%>").removeAttribute("tabIndex");
</script>
Javascript errors are thrown when pie chart with custom skin is loaded. The issue is introduced as of version 2017.1.118.
Code to reproduce:
<telerik:RadHtmlChart ID="Telerik1" runat="server" Height="250px" Width="250px" EnableEmbeddedSkins="false" Skin="CMS_Black">
<ChartTitle Text="Financial Aid Status1112">
<Appearance>
<TextStyle Color="Red" FontSize="12" FontFamily="Verdana" Margin="11" Padding="22"></TextStyle>
</Appearance>
</ChartTitle>
<PlotArea>
<Series>
<telerik:PieSeries Name="TypeMemberCount1" NameField="Name" DataFieldY="Value">
<LabelsAppearance>
<ClientTemplate>
#=dataItem.Name#: #=dataItem._Value# (#=dataItem._Percentage#%)
</ClientTemplate>
</LabelsAppearance>
</telerik:PieSeries>
</Series>
</PlotArea>
<Legend>
<Appearance Position="Right" Visible="true">
</Appearance>
</Legend>
</telerik:RadHtmlChart>
Code bihind:
protected void Page_Load(object sender, EventArgs e)
{
Telerik1.DataSource = GetData();
Telerik1.DataBind();
}
private DataTable GetData()
{
DataTable dt = new DataTable("ChargeData");
dt.Columns.Add("Id", Type.GetType("System.Int32"));
dt.Columns.Add("Name", Type.GetType("System.String"));
dt.Columns.Add("Value", Type.GetType("System.Int32"));
dt.Columns.Add("_Value", Type.GetType("System.Int32"));
dt.Columns.Add("_Percentage", Type.GetType("System.Int32"));
dt.Rows.Add(1, "Item 1", 10, 34, 10);
dt.Rows.Add(2, "Item 2", 65, 34, 65);
dt.Rows.Add(3, "Item 3", 25, 34, 25);
return dt;
}
web.config:
<add key="Telerik.Skin" value="CMS_Black"/>
Ticket 1113172
This applies to data bound containers like grid template columns.
For standalone control instances, see how to use the DataSelectedField here: https://docs.telerik.com/devtools/aspnet-ajax/controls/radiobuttonlist/data-binding/server-side-data-binding
When the items in the RadRadioButtonList are declared in the markup, the SelectedValue='<%#Bind("fieldName") %>' approach works as expected, but when the items are fetched from a data source, no item is pre-selected.
This works with the standard asp:RadioButtonList and so it must work with RadRadioButtonList.
Issue explanations and workarounds are available in the attached sample pages and videos below.
In short, the workarounds are:
- use declarative items when possible
- OR, use an <asp:RadioButtonList> and a <telerik:RadFormDecorator> to get uniform appearance of the radio buttons across browsers
I love WebForms and the wealth in the Toolbar. I would like to write the payload of the web page in a webform and limit the round tripping with micro webservices, so there is no PostBack. Which means I can do more clientside in a KendoUI style. This would address the criticism of the bloat that comes with ViewState in webforms offering a leaner web page, but with all the advantages of the JavaScript tooling. For the most part a lot of this can be done already, would just prefer not to have any limitations in the controls that I can use for this. Just that there is such a driver now with the fashion of AngularJS/SPA applications suggesting that webforms cannot compete here.