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"
Steps to replicate the issue:
- Enable Virtualization
- Enable Paging
- Enable Scrolling
- Enable Sorting
- Bind enough data for a few pages
- Run the page and in the Pager click on a different page number to change the current Page
- Click on the Column header to Sort that Column
Observe: The Grid makes a PostBack and sorts the items, CurrentPage index gets reset back to 1.
When EnableLinqGrouping is set to True (default) Group Aggregates do not have Case sensitive calculations.
Hi,
How can I translate the "clear" button in the mobile Filter Window? I manage to translate everything in that window except the clear button:
King regards
Blas González
I've used the Telerik Themebuilder to create a css file for the grid and set up my application to use the theme. This is working however, there are many classes that are not being output by the themebuilder. For instance, the buttons on the pager don't work.
Settings to reproduce the problem:
<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" Width="800px" OnNeedDataSource="RadGrid1_NeedDataSource">
<ClientSettings>
<Scrolling AllowScroll="true" UseStaticHeaders="true" />
</ClientSettings>
<MasterTableView InsertItemDisplay="Bottom"
Most spreadsheets (EXCEL and Sheets) have this capability and it appears to be a very popular feature that is missing in RADGrid.
I thought I saw the ability to pin a row (but could not find the details)
Do you have any suggestions and sample code?
thanks
I have a grid with several columns - so many that they cannot all appear at once. Users are allow to reorder the columns as they wish. If my grid is set to FrozencolumnsCount=0, then when they drag a column to the edge of the grid, the grid starts to horizontally scroll so that they can see additional columns and drop their column in the desired location.
However if I set FrozenColumnsCount=1, then when they drag a column to the edge of the grid, the grid does not horizontally scroll.
The row selection in RadGrid is not proper if the row is deselected via the checkbox, while the Shift button is pressed.
Steps to reproduce the problem:
- Open https://demos.telerik.com/aspnet-ajax/grid/examples/columns-rows/columns/column-types/defaultcs.aspx
- Select first row of the grid.
- Press SHIFT key and click up to 4th rows.
- Uncheck checkbox of third row while SHIFT key is pressed.
- You can see all the rows below third row becomes deselected.
- But the current row is still highlighted with checkbox unchecked.
When ExportSettings.IgnorePaging is true the grid's paging disappears after exporting.
We're using Asp.Net Ajax version 2021.3.1111.45.
These issues can be reproduced here:
1. Navigate to the above site on an iOS device (IPhone or IPad).
2. Touch the top right hamburger menu to open the Columns Display Form.
3. Touch a checkbox.
The first touch over a checkbox or its corresponding label is not changing the state of the checkbox but at the same time, the header buttons are switched to Done and Cancel (as if changes have been made).
Touching between separate column fields changes the state of the checkbox of the upper column but the same is not updating the header buttons (Back button remains visible and Done and Cancel remain hidden).
Video of reproduction - http://somup.com/crX0Q80F0j.
Hi,
Heres a simple one: I have a dynamic grid `MasterTableView.EnableColumnsViewState = false;` on page init and all works fine. However, when the client/browser show a dynamic column thats hidden (or vise versa), and the column is gone on postback (being a dynamic grid this can happen), the LoadClientState tries to get the column - and if it fails to, it breaks down hard.. Instead it should just ignore it, as its just a pretty un-important show/hide state.
Your RadGrid code goes something like this:
LoadClientState ->
if (clientState.ContainsKey("showedColumns")) ->
control.GetColumn(columnUniqueName).Display = true; <-- just ignore this if not found - also on the others like hide, resize etc.
Thank you!... +1 for making this html editor a MD flavor instead :)
/Anders
Server Error in '/' Application.
Object reference not set to an instance of an object.
Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.Exception Details: System.NullReferenceException: Object reference not set to an instance of an object.
Source Error:
An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below. |
Stack Trace:
|
Noticed that when using a template to custom define the pager look, the pager gets rendered in a TD and not a TH as expected since the pager is in a THEAD. Could the header pager only be modified to render in TH? This would allow all elements in the header to render the same and help with styling.
HeaderContextMenu filter functions such as "GreaterThanOrEqualTo", "LessThanOrEqualTo" are not working.
This issue happens with the Header Context Menu. The following scenarios are affected:
When filtering for a negative number in a GridNumericColumn with a Numeric Type of "Currency" and AutoPostBackOnFilter="true" filter loses its negative value on Enter keypress.
Setup to reproduce:
<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" Width="800px" OnNeedDataSource="RadGrid1_NeedDataSource"
AllowFilteringByColumn="true">
<MasterTableView AutoGenerateColumns="False">
<Columns>
<telerik:GridNumericColumn DataField="Price" DataType="System.Decimal"
FilterControlAltText="Filter Price column" HeaderText="Price"
SortExpression="Price" UniqueName="Price" NumericType="Currency"
AutoPostBackOnFilter="true" CurrentFilterFunction="EqualTo">
</telerik:GridNumericColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>C#
protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
(sender as RadGrid).DataSource = Enumerable.Range(1,6).Select(x=> new { Price = Math.Pow(-1, x) * (x * 0.1 + x * 0.01) });
}
In radgrid, when you are filtering the grid using EXCEL like filtering, you get a Listbox where you can enter a filter string, which then shows a filterlist of checkboxes that match that filter string. There is a checkall checkbox at the very top. If you select that, it selects all the filtered list checkboxes and checks them.
When you then click the filter button to apply the selection, the filter criteria is ignored, and no grid filtering occurs.
I did find a "fix" for this, but it is not useable.
The problem with this fix is that it works on the first applied filter, but if you the try to filter again, the Listbox takes a extremely long time to load the checkbox list, and so is not practical.
Is there a better solution? Has this even been identified as a bug which will be fixed?
Axe Tool Accessibility
Structure for reproduction:
<telerik:RadGrid RenderMode="Lightweight" ID="RadGrid_CIPCodes" GridLines="None" runat="server" Skin="Bootstrap" role="application"
PageSize="10"
AllowPaging="true"
AutoGenerateColumns="False"
OnNeedDataSource="RadGrid_CIPCodes_NeedDataSource"
AllowSorting="true"
AllowFilteringByColumn="true"
GroupingSettings-CaseSensitive="False" FilterType="Combined"
EnableAriaSupport="true">
<MasterTableView CommandItemDisplay="TopAndBottom" DataKeyNames="OrderID" HorizontalAlign="NotSet" EditMode="Batch" Caption="Master Table" AutoGenerateColumns="False"
AllowMultiColumnSorting="false"
NoMasterRecordsText="No new CIP Code(s) to add!" ShowHeadersWhenNoRecords="true">
<BatchEditingSettings EditType="Row" />
<CommandItemSettings ShowAddNewRecordButton="false" SaveChangesText="Save" CancelChangesText="Cancel" ShowRefreshButton="false" />
<SortExpressions>
<telerik:GridSortExpression FieldName="OrderID" SortOrder="Ascending" />
</SortExpressions>
<PagerStyle Mode="NextPrevAndNumeric" PageButtonCount="3" Position="Bottom" ChangePageSizeButtonToolTip="PageSizeButton" ChangePageSizeTextBoxToolTip="ChangePageSizeToolTip" />
<RowIndicatorColumn CurrentFilterFunction="Contains" FilterListOptions="VaryByDataType" Visible="False">
<HeaderStyle />
</RowIndicatorColumn>
<Columns>
<telerik:GridBoundColumn DataField="OrderID" HeaderStyle-Width="100px" HeaderText="CIP Code" SortExpression="CIP_Code" UniqueName="CIP_Code" ForceExtractValue="InEditMode"
FilterListOptions="VaryByDataType" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" ShowFilterIcon="false" ReadOnly="true" FilterControlWidth="90px">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="ShipCountry" HeaderStyle-Width="210px" HeaderText="Display Text" SortExpression="Display_Text" ForceExtractValue="InEditMode" AutoPostBackOnFilter="true"
UniqueName="Display_Text" CurrentFilterFunction="Contains" ShowFilterIcon="false">
<ColumnValidationSettings EnableRequiredFieldValidation="true">
<RequiredFieldValidator ForeColor="Red" Text="*This field is required" Display="Dynamic">
</RequiredFieldValidator>
</ColumnValidationSettings>
</telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderStyle-Width="210px" HeaderText="Value" ShowFilterIcon="false" UniqueName="Disp_Value" DataField="ShipCountry" SortExpression="Disp_Value" ForceExtractValue="InEditMode" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains"></telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderStyle-Width="210px" HeaderText="Open Doors Code" UniqueName="OpenDoorsCode" DataField="ShipCountry" AllowFiltering="false" HeaderStyle-Font-Bold="true" ConvertEmptyStringToNull="true"></telerik:GridBoundColumn>
<telerik:GridTemplateColumn HeaderText="STEM Eligible" DefaultInsertValue="" HeaderStyle-Width="100px" UniqueName="StemEligible" AllowFiltering="false" HeaderStyle-Font-Bold="true">
<ItemTemplate>
</ItemTemplate>
<EditItemTemplate>
<telerik:RadDropDownList RenderMode="Lightweight" runat="server" ID="StemEligibleDropDown">
<Items>
<telerik:DropDownListItem Text="" Value="" Selected="true" />
<telerik:DropDownListItem Text="Yes" Value="1" />
<telerik:DropDownListItem Text="No" Value="0" />
</Items>
</telerik:RadDropDownList>
</EditItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridCheckBoxColumn HeaderStyle-Width="100px" HeaderText="Add to DB" HeaderTooltip="header tooltip" UniqueName="AddToDB" AllowFiltering="false" HeaderStyle-Font-Bold="true" ToolTip="Is Checked?"></telerik:GridCheckBoxColumn>
</Columns>
</MasterTableView>
<ClientSettings AllowKeyboardNavigation="true"></ClientSettings>
<FilterMenu>
<CollapseAnimation Type="OutQuint" Duration="100" />
</FilterMenu>
</telerik:RadGrid>
Data binding
protected void RadGrid_CIPCodes_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
(sender as RadGrid).DataSource = OrdersTable();
}
private DataTable OrdersTable()
{
DataTable dt = new DataTable();
dt.Columns.Add(new DataColumn("OrderID", typeof(int)));
dt.Columns.Add(new DataColumn("OrderDate", typeof(DateTime)));
dt.Columns.Add(new DataColumn("Freight", typeof(decimal)));
dt.Columns.Add(new DataColumn("ShipName", typeof(string)));
dt.Columns.Add(new DataColumn("ShipCountry", typeof(string)));
dt.PrimaryKey = new DataColumn[] { dt.Columns["OrderID"] };
for (int i = 0; i < 70; i++)
{
int index = i + 1;
DataRow row = dt.NewRow();
row["OrderID"] = index;
row["OrderDate"] = new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 0, 0, 0).AddHours(index);
row["Freight"] = index * 0.1 + index * 0.01;
row["ShipName"] = "Name " + index;
row["ShipCountry"] = "Country " + index;
dt.Rows.Add(row);
}
return dt;
}