When the AriaSupport for the Grid is turned on, an aria-label is added to each column header automatically using the UniqueName of the column. The problem is - UniqueName doesn't support empty spaces - all "labels" must be single words or use Underscores - and the screen readers say "underscore."
So my column of "call_date" results in "Call underscore Date" - which is not useful for visually impaired people.
ResizeGridOnColumnResize is not working the same way when Grid has StaticHeaders.
I want to resize the grid based on the contents and still be able to scroll with headers.
When EnableAriaSupport is enabled for the RadGrid, the PagerItem receives role='presentation' and hence is ignored by the screenreaders.
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 EnableLinqGrouping is set to True (default) Group Aggregates do not have Case sensitive calculations.
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.
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.
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?
Currently, the Headers are cycled by pressing the Tab key and this FeatureRequest is to improve the behavior and allow arrow navigation between headers, similar to the Kendo UI Grid:
Also, pressing Home/End should navigate to the first/last focusable cell in the row, while Ctrl+Home/Ctrl+End should navigate to the first/last focusable element in the Grid.
Hi
AllowKeyboardNavigation="true" allow for users to navigate the grid with the keyboard. This is great for people with disabilities and Section 508 compliance. But when this is enabled, and the "Enter" key is pressed, the default behavior is to present an update process.
This update process should be controllable when AllowKeyboardNavigation="true".
Just as a user note ... when I was trying to figure this out, reading through the options, the EditMode was the first place I started looking.
Here is the current workaround ... How do I disable editing when AllowKeyboardNavigation="true"? in UI for ASP.NET AJAX Grid - Telerik Forums
Hope this suggestion helps
Currently, using HeaderContextFilterMenu on RadGrid with client-side binding results in JavaScript error and unexpected behavior.
- JavaScript error is thrown when clicking on the "Filter" button.
- "nonValueFilters" are not being passed to filterExpressions for "isClientSideBinding" as expected, leaving IsEmpty/NotIsEmpty/IsNull/NotIsNull not propagating to the databinding phase.
Grid in BatchEdit mode must be one of the most useful features in some serious industry-level web applications. It comes quite naturally, that the data in the grid must be often extensively validated, and in many cases the client side validation is simply not enough. In our case, we had to use BatchEditing mode and we had to validate user-entered values serverside (due to complex rules, external data to validation against in real time and safety/security of the validation itself).
Documentation states that BatchEdit does not support ServerSide validation. This makes BatchEdit mode mostly useless for some serious use, which is a pitty. But how much is needed to do so? The only thing we need is, when processing RadGrid_BatchEditCommand, to send the unsaved changes back to the client (overwrite the old values which would come from the database via NeedDataSource) and mark the changed cells as "EDITED" or "CHANGED", because:
a. We have to make sure, that the unsaved rows from the session variable will always come up, next time the user hits the Save changes button, in the BatchEditCommand in Hashtable newValues = command.NewValues; This is because only rows, which RadGrid understand as changed by user-client side, will come up in the newValues HashTable. In case that the user changed, in the first server-side roundtrip, rows 1 and 2, rows 1 and 2 would be saved to the session variable and they would be presented to the user, but in the second round user would not change rows 1 and 2 but change only row 3, it would be only row 3 which would come up in RadGrid1_BatchEditCommand the newValues Hashtable, and we would never get previous, still unsaved, changes
b. in case the user goes to the next page of the grid, using paging arrows in the grid, the grid normally warns about unsaved changes and prevents user from going to the next page, if there are any unsaved changes. If our changed rows from the session are not marked as EDITED, the grid would never ask this and would proceed to the next page, losing users changes.
We were fighting to make this work via some session variables, etc, but then Doncho from Telerik support sent us this simple solution. I think many would be happy if you could add it to the next release, so it is supported out of the box. Attaching files from Doncho, which give an ide to the solution
Thank you.
Currently, the "GridButtonColumn" and "GridEditCommandColumn" columns render only ASP Buttons such as ImageButton, PushButton, LinkButton.
We would like to have the option to Choose Telerik Buttons such as RadButton, RadImageButton as ButtonType for the Columns.
Current RadGrid only has headers/header templates for column headers. The only way to have headers for each row would be to manipulate the grid data and adding the header for each row into the grid data itself. And if we wanted to group the row headers is another round of manipulating the grid data and also manually merging the cells. Is it possible to have to have it as a feature of the RadGrid just like column groups and column headers to simplify the task? example of the final output ->
Hi,
Without using radFilter to setup multiple filters before applying RadGrid can only be filtered one column at a time. Can a button be added to the Grid when filtering is applied that when Clicked will filter the Grid based on all of the column filter selections that a user selects?
Thanks,
The SearchRow in RadGridView WinForms is extremely good.
https://docs.telerik.com/devtools/winforms/controls/gridview/rows/search-row
How can we implement the same in ASP.Net Ajax RadGrid?