With a lot of columns, in some cases, the latest column is clipped in a zoomed OS. For example, resolution 1920x1080 and the scale is 150% or 3840 x 2160 and the 150% scale.
Adding the following script somewhere after the ScriptManager(e.g. near the closing </form> or </body> tag) can improve the experience with zoomed scenarios:
<telerik:RadCodeBlock ID="RadCodeBlock2" runat="server">
<script>
if (Telerik && (Telerik.Web.Browser.chrome || Telerik.Web.Browser.edgeChromium) && Telerik.Web.UI.GridScrolling) {
Telerik.Web.UI.GridScrolling.prototype.onGridFrozenScroll = function (args) {
if (!this._frozenScrollCounter) {
this._frozenScrollCounter = 0;
}
this._frozenScrollCounter++;
this._needToUpdateClientState = false;
var gridControl = this;
gridControl._currentElement = Telerik.Web.UI.Grid.GetCurrentElement(args);
Telerik.Web.UI.Grid.frozenScrollHanlder = function (count) {
var operaVersion = 10.00;
if ($telerik.isOpera) {
operaVersion = navigator.userAgent.substring(navigator.userAgent.indexOf("Version/") + "Version".length + 1) * 1;
}
if (gridControl._frozenScrollCounter != count || gridControl._owner._isResize)
return;
if (!gridControl._lastScrollIndex) {
gridControl._lastScrollIndex = 0;
}
var masterTableView = gridControl._owner.get_masterTableView();
var masterTableViewHeader = gridControl._owner.get_masterTableViewHeader();
var currentElement = gridControl._currentElement;
if (gridControl._owner.ClientSettings.Scrolling.FrozenColumnsCount > masterTableViewHeader.get_columns().length) {
gridControl.isFrozenScroll = false;
}
var column, i;
if (gridControl.isFrozenScroll) {
var notFrozenColumns = gridControl._getNotFrozenColumns();
var scrollPercent = 0;
var notShownSpaceWidth = -1;
var currentElementWidthDiff = currentElement.scrollWidth - currentElement.offsetWidth;
if ((currentElementWidthDiff) != 0)
notShownSpaceWidth = currentElementWidthDiff;
scrollPercent = currentElement.scrollLeft / notShownSpaceWidth;
if (scrollPercent < 0)
scrollPercent = -1 * scrollPercent;
if (scrollPercent > 1)
scrollPercent = 1;
if (Telerik.Web.UI.Grid.IsRightToLeft(gridControl._owner.GridHeaderDiv) && ($telerik.isSafari || $telerik.isIE7))
scrollPercent = 1 - scrollPercent;
var gridColumns = masterTableView.get_columns();
var currentScrollPosition = currentElement.scrollLeft;
i = 0;
while (i < notFrozenColumns.length)//always show the last column
{
column = notFrozenColumns[i];
var prerviousForzenDisplayWidth = notFrozenColumns._getPreviousNotFrozenColumnWidth(column.Index);
if ((currentElementWidthDiff) < 0)
break;
var columnPercent = (column.Width + prerviousForzenDisplayWidth - 50) / notShownSpaceWidth;
if (columnPercent <= scrollPercent && currentScrollPosition != 0) {
if (column.FrozenDisplay) {
masterTableViewHeader._hideNotFrozenColumn(column.Index);
}
}
else {
if (!column.FrozenDisplay) {
masterTableViewHeader._showNotFrozenColumn(column.Index);
}
}
i++;
if (i == (notFrozenColumns.length - 1)) {
var prevWidthBeforeLastHidden = 0;
var lastHiddenColumnIndex = 0;
var k = 0;
for (var j = 0; j < gridColumns.length - 1; j++) {
if (typeof (gridColumns[j].FrozenDisplay) == 'boolean' && !gridColumns[j].FrozenDisplay) {
prevWidthBeforeLastHidden += notFrozenColumns[k].Width;
k++;
lastHiddenColumnIndex = j;
}
}
if ((prevWidthBeforeLastHidden - notShownSpaceWidth) < notFrozenColumns[notFrozenColumns.length - 1].Width + 25) {
if (scrollPercent < 0.5) {
var nextColumnToHide = notFrozenColumns[notFrozenColumns.length - 1];
masterTableViewHeader._hideNotFrozenColumn(nextColumnToHide.Index);
} else {
var nextColumnToHide = notFrozenColumns[k];
masterTableViewHeader._hideNotFrozenColumn(nextColumnToHide.Index);
}
}
}
}
gridControl._afterColumnFreeze(masterTableView, masterTableViewHeader, scrollPercent);
if (scrollPercent > 0.9999 && $telerik.isFirefox) {
masterTableViewHeader.get_element().style.width = masterTableViewHeader.get_element().offsetWidth + "px";
masterTableViewHeader.get_element().style.tableLayout = "auto";
masterTableViewHeader.get_element().style.tableLayout = "fixed";
masterTableView.get_element().style.width = masterTableViewHeader.get_element().offsetWidth + "px";
masterTableView.get_element().style.tableLayout = "auto";
masterTableViewHeader.get_element().style.tableLayout = "";
setTimeout(
function () {
if ($telerik.isFirefox && Sys.Browser.version >= 4)
masterTableView.get_element().style.tableLayout = "fixed";
masterTableViewHeader.get_element().style.tableLayout = "auto";
masterTableViewHeader.get_element().style.tableLayout = "fixed";
},
100);
}
if (gridControl._owner.get_masterTableViewFooter()) {
gridControl._owner.get_masterTableViewFooter().get_element().style.width = masterTableViewHeader.get_element().offsetWidth + "px";
gridControl._owner.get_masterTableViewFooter().get_element().style.tableLayout = "auto";
gridControl._owner.get_masterTableViewFooter().get_element().style.tableLayout = "fixed";
}
}
else {
gridControl._owner.GridDataDiv.scrollLeft = currentElement.scrollLeft;
}
/////////////////////////////////////
gridControl._frozenScrollCounter = 0;
gridControl._needToUpdateClientState = true;
//gridControl._owner.updateClientState();
setTimeout(Telerik.Web.UI.Grid._clientStateUpdater, 500);
if (gridControl._owner.get_events().getHandler("scroll")) {
gridControl._owner.raise_scroll(new Telerik.Web.UI.GridScrollEventArgs(gridControl._currentElement));
}
};
Telerik.Web.UI.Grid._clientStateUpdater = function () {
if (gridControl._needToUpdateClientState) {
gridControl._needToUpdateClientState = false;
gridControl._owner.updateClientState();
}
};
clearTimeout(window.frozenScrollTimeout);
window.frozenScrollTimeout = setTimeout("Telerik.Web.UI.Grid.frozenScrollHanlder(" + this._frozenScrollCounter + ")", 30);
}
}
</script>
</telerik:RadCodeBlock>
When AJAX is enabled for the Grid with the <PagerStyle Mode="Advanced"> or <PagerStyle Mode="NextPrevNumericAndAdvanced"> the Go To Page by Number and Change Page Size Bugtons would not work.
On the other hand, if changing the Page or PageSize by typing and hitting the ENTER key instead of clicking the buttons, the Grid will behave accordingly.
Issue appears in RenderMode="Lightweight"
1. Visit the RadEditor demo at https://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx (I used Google Chrome.) 2. In the HTML view, replace the entire demo text with This <strong>strange</strong> thing 3. In the Design view, place the cursor at the very end of the line, and press Shift+Left repeatedly. a. At first it will highlight the final letter correctly. b. Then it will UNHIGHLIGHT the final letter! c. Then it will begin highlight more letters again starting from the letter BEFORE the final letter. d. Then, after highlighting the āeā in strange, it will being UNHIGHLIGHTING starting from the righthand side of the selection! e. Then it will highlight left as far as the āsā. f. Then it will start UNHIGHLIGHTING from the right again! g. Then highlighting the space to the left h. Then UNHIGHLIGHTING the space to the left! i. Then highlighting to the left as far as the beginning of the line j. Then UNHIGHLIGHTING from the right side of the selection! Pressing Shift+Left and Shift+Right should always modify only one end of the selection, and the other end should always remain where the selection was started. This is how Windows Notepad and virtually all other applications behave.
Steps to replicate the issue:
Observe: The Grid makes a PostBack and sorts the items, CurrentPage index gets reset back to 1.
I would like to implement a list picker with item grouping in the destination Asp.Net RadListBox.
Unfortunately the Telerik Asp.net RadListBox control does not seem to support item grouping natively. I have seen a forum post from 2019 that suggests adding custom group items https://www.telerik.com/forums/subheadings-in-radlistbox We could do this but would prefer a more native solution.
When EnableLinqGrouping is set to True (default) Group Aggregates do not have Case sensitive calculations.
The execution of the getContextMenuByTagName inside the oncontextmenu event of RadEditor hides the context menu once it is shown. This happens in Lightweight render mode only and when the UseRadContextMenu is enabled:
<telerik:RadEditor ID="RadEditor1" runat="server" ContentAreaMode="iframe" OnClientLoad="OnClientLoad">
<Content>
<table>
<tr>
<td>test</td>
</tr>
<tr>
<td>test</td>
</tr>
<tr>
<td>test</td>
</tr>
</table>
</Content>
</telerik:RadEditor>
<script>
function OnClientLoad(editor, args) {
editor.attachEventHandler("oncontextmenu", function (e) {
var oSelection = editor.getSelectedElement();
setTimeout(function () {
var tdMenu = editor.getContextMenuByTagName("TD"); //the call of getContextMenuByTagName closes the context menu when lightweight render mode is used. You can slow down the closing with the setTimeout function or by settign UseRadContextMenu to false.
}, 1000);
});
}
</script>
<telerik:RadListBox
RenderMode="Lightweight"
runat="server"
ID="RadListBoxSource"
AllowTransfer="true"
TransferToID="RadListBoxDestination"
ButtonSettings-AreaWidth="35px">
<EmptyMessageTemplate>
empty message
</EmptyMessageTemplate>
</telerik:RadListBox>
<telerik:RadListBox
RenderMode="Lightweight"
runat="server"
ID="RadListBoxDestination"
ButtonSettings-AreaWidth="35px">
<EmptyMessageTemplate>
empty message2
</EmptyMessageTemplate>
</telerik:RadListBox>
Set up to reproduce:
<telerik:RadToggleButton ID="RadToggleButton1" runat="server" Text="RadToggleButton">
<ConfirmSettings ConfirmText="Sure?" />
<ToggleStates>
<telerik:ButtonToggleState Text="state1">
<Icon Url="supervisorIcon.png" />
</telerik:ButtonToggleState>
<telerik:ButtonToggleState Text="state2">
<Icon Url="ownerIcon.jfif" />
</telerik:ButtonToggleState>
</ToggleStates>
</telerik:RadToggleButton>
Currently exporting functionality of RadBarcode includes only the barcode image. It would be useful to include the Text in the result of GetImage() method so a Barcode can be generated and saved as a file entirely on the server-side.
In DayView there should be an alternative option to see number of days the project is running. For example a project running for 6 months, the numbers should be shown from 1 to 180 days and progress to be displayed against those days.
The control will provide the ability to hover over an image and zoom-in the selected part in a previewer. Such control is available in Google Maps as shown in the attached screenshot Overview-Image-Map-Control.png. Yet another example is displayed in the second screenshot. You can comment and share your examples or features you would like this control to support.
Error thrown:
Uncaught Sys.InvalidOperationException: Sys.InvalidOperationException: 'maxDate' is not a property or an existing field.
Setup for reproduction:
<asp:ScriptManager runat="server" ID="ScriptManager1"></asp:ScriptManager>
<telerik:RadDateRangePicker runat="server" ID="RadDateRangePicker1"
MinDate="2022-05-01" MaxDate="2022-05-01">
</telerik:RadDateRangePicker>
Currently, the behavior on selection is to highlight the selected item, so modifying the appearance of a selected item would affect the appearance of hovered items as well.
In the meantime, a custom CSS class can be added/removed to the selected item as in the snippet below:
<script>
function OnClientLoad(sender, args) {
var selectedItem = sender.get_selectedItem();
if (selectedItem) {
$telerik.$(selectedItem.get_element()).addClass("rcbSelected");
}
}
function OnClientSelectedIndexChanged(sender, args) {
$telerik.$(sender.get_dropDownElement()).find(".rcbSelected").removeClass("rcbSelected");
var selectedItem = sender.get_selectedItem();
if (selectedItem) {
$telerik.$(selectedItem.get_element()).addClass("rcbSelected");
}
}
</script>
<style>
div.RadComboBoxDropDown .rcbSelected {
color: red;
background-color: lightgreen;
}
</style>
<telerik:RadComboBox ID="RadComboBox1" runat="server" RenderMode="Lightweight" OnClientSelectedIndexChanged="OnClientSelectedIndexChanged" OnClientLoad="OnClientLoad" MaxHeight="150">
<Items>
<telerik:RadComboBoxItem Text="Item 1" />
<telerik:RadComboBoxItem Text="Item 2" />
<telerik:RadComboBoxItem Text="Item 3" Selected="true" />
<telerik:RadComboBoxItem Text="Item 4" />
</Items>
</telerik:RadComboBox>
For the time being the function can be set through the kendoWidget: <telerik:RadHtmlChart runat="server" ID="ColumnChart1" Transitions="true"> <PlotArea> <Series> <telerik:ColumnSeries Name="Product 1"> <TooltipsAppearance BackgroundColor="Orange" DataFormatString="{0} sales" /> <SeriesItems> <telerik:CategorySeriesItem Y="15000" /> <telerik:CategorySeriesItem Y="23000" /> <telerik:CategorySeriesItem Y="10000" /> <telerik:CategorySeriesItem Y="16000" /> </SeriesItems> </telerik:ColumnSeries> </Series> <XAxis AxisCrossingValue="0" Color="Black" MajorTickType="Outside" MinorTickType="Outside" Reversed="false"> <Items> <telerik:AxisItem LabelText="1" /> <telerik:AxisItem LabelText="2" /> <telerik:AxisItem LabelText="3" /> <telerik:AxisItem LabelText="4" /> </Items> <LabelsAppearance DataFormatString="Q{0}" RotationAngle="0" /> <MajorGridLines Color="#EFEFEF" Width="1" /> <MinorGridLines Color="#F7F7F7" Width="1" /> <TitleAppearance Position="Center" RotationAngle="0" Text="Quarters" /> </XAxis> <YAxis AxisCrossingValue="0" Color="Black" MajorTickSize="1" MajorTickType="Outside" MaxValue="50000" MinorTickSize="1" MinorTickType="Outside" MinValue="0" Reversed="false" Step="10000"> <LabelsAppearance DataFormatString="{0} sales" RotationAngle="0" /> <TitleAppearance Position="Center" RotationAngle="0" Text="Sales" /> </YAxis> </PlotArea> <ChartTitle Text="Product Sales for 2011"> </ChartTitle> <Legend> <Appearance Position="Bottom" /> </Legend> </telerik:RadHtmlChart> <script> function pageLoad() { $ = $telerik.$; var kendoWidget = $find("<%=ColumnChart1.ClientID%>").get_kendoWidget(); kendoWidget.options.series[0].labels.position = function (point) { if (point.value < 20000) { console.log(1); return "insideEnd"; } else { console.log(2); return "outsideEnd"; } } kendoWidget.redraw(); } </script>
It is not possible to select a Toolbar item in RadFileExplorer on Enter press if the control is used in Lightweight render mode.
Steps to reproduce:
1. Open https://demos.telerik.com/aspnet-ajax/fileexplorer/examples/keyboardsupport/defaultcs.aspx
2. Press "Ctrl+f2" to focus RadFileExplorer
3. Press "Shift+1" to focus its toolbar
4. Use the Arrow keys to navigate between to Toolbar items
5. Press Enter over a button (e.g. Upload)
Result: The command is not triggered
Workaround: The issue is not reproducible in Classic render mode.