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.
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.
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?
Hi,
In mobile and tablet device is very difficult increase and decrease the size of columns of RadGrid.
Is there any way this functionality can be improved?
Perhaps, Increasing the left/right border of the Column which can be grabbed for resizing would help easy this functionality.
The column headings read by JAWS are not great. I see that the rendered table headings have an aria-label attributes, but the text of these labels appears to match the DataField attribute of the grid column. Unfortunately, the DataField is often not the same as the human readable text displayed on the column header. This provides an inconsistent and sometimes confusing experience for screen reader users.
For example, if my data field is named something like full_name_with_title, but my column heading is actually "Full Name," the user will hear fullunderlinenameunderlinewithunderlinetitle, but we'd like them to hear "Full Name". All those underlines are confusing.
It would be much better if Telerik used the HeaderText attribute of the column instead of the DataField attribute. This would ensure that the presentational text and not the internal column names were read to the user.
A temporary workaround can be using the following OnGridCreated handler:
function OnGridCreated(sender, args) {
if (sender.get_enableAriaSupport()) {
sender.get_masterTableView().get_columns().forEach(function (col) {
var header = col.get_element();
var headerText = (header.textContent || header.innerText).replace(/^\s+|\s+$/g, '');
header.setAttribute("aria-label", headerText);
})
}
}
Hello,
It would be nice to be able to clear the filter for each column as opposed to creating an external button to clear all filters. I was thinking of similar to below.
Requesting the improvement of this functionality to include scrolling.
Brief summary of the issue:
MultiCell selection uses a virtual marque tool to select items and does not include items that are out of view.
