When using the Grid with the Material skin, the drag selection overlay is not visible. After inspecting the DOM, I found that the overlay element uses the GridRowSelector_Material class:
<span class="GridRowSelector_Material" style="position: absolute; z-index: 1000100; opacity: 0.1; top: 525px; left: 321px; width: 844px; height: 36px;"></span>
However, this class is not defined in the Material skin's stylesheet, which results in the overlay having no visible background.
Steps to Reproduce:Form controls rendered by the embedded columns (GridBoundColumn, GridDateTimeColumn, GridNumericColumn, etc.) in EditMode="Batch" do not have a label set and fail the accessibility checks.
In version 2025 Q2, I am getting the following error message when opening the RadGrid in design mode:
System.NullReferenceException: Object reference not set to an instance of an object. at Telerik.Web.UI.Licensing.TelerikLicense.get_CurrentHost() at Telerik.Web.UI.Licensing.TelerikLicense.get_IsLicenseValid() at Telerik.Web.UI.RadGrid.Render(HtmlTextWriter writer) at System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter) at System.Web.UI.Design.ControlDesigner.GetDesignTimeHtml()
Hi Team,
I would like to request a way to insert a new record at the bottom of the InPlace Editable RadGrid so that the row would be within the RadGrid container.
Thank you!
After upgrading to 2025 Q1, RadGrid throws the exception:
Uncaught TypeError: t is not a function
Upon inserting a new record after filtering on the Grid with No records, the exception "No property or field 'Name' exists in type 'DataRowView'" is thrown.
Steps to reproduce:
Code to replicate the issue:
<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false" AllowFilteringByColumn="true"
OnNeedDataSource="RadGrid1_NeedDataSource" OnInsertCommand="RadGrid1_InsertCommand">
<MasterTableView CommandItemDisplay="Top" DataKeyNames="ID">
<Columns>
<telerik:GridEditCommandColumn></telerik:GridEditCommandColumn>
<telerik:GridButtonColumn CommandName="Delete"></telerik:GridButtonColumn>
<telerik:GridBoundColumn DataField="ID" HeaderText="ID" UniqueName="ID" ReadOnly="true"
CurrentFilterFunction="Contains" AutoPostBackOnFilter="true" />
<telerik:GridBoundColumn DataField="Name" HeaderText="Name" UniqueName="Name"
AutoPostBackOnFilter="false" />
<telerik:GridBoundColumn DataField="Category" HeaderText="Category" UniqueName="Category" DataType="System.String"
CurrentFilterFunction="Contains" AutoPostBackOnFilter="true" />
<telerik:GridBoundColumn DataField="Price" HeaderText="Price" UniqueName="Price"
CurrentFilterFunction="Contains" AutoPostBackOnFilter="true" DataFormatString="{0:C}" />
</Columns>
<EditFormSettings InsertCaption="Add New Item" />
</MasterTableView>
</telerik:RadGrid>
C#
private const string DataTableSessionKey = "RadGridDataTable";
private DataTable SessionDataSource
{
get
{
DataTable dt = Session[DataTableSessionKey] as DataTable;
if (dt == null || !IsPostBack)
{
// Create an empty DataTable with schema defined
dt = new DataTable();
dt.Columns.Add("ID", typeof(int));
dt.Columns.Add("Name", typeof(string));
dt.Columns.Add("Category", typeof(string));
dt.Columns.Add("Price", typeof(decimal));
dt.PrimaryKey = new DataColumn[] { dt.Columns["ID"] };
Session[DataTableSessionKey] = dt;
}
return dt;
}
}
protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
(sender as RadGrid).DataSource = SessionDataSource;
}
protected void RadGrid1_InsertCommand(object sender, GridCommandEventArgs e)
{
GridEditableItem insertItem = (GridEditableItem) e.Item;
Hashtable newValues = new Hashtable();
insertItem.ExtractValues(newValues);
DataRow findLastItem = SessionDataSource.Select("ID=MAX(ID)").FirstOrDefault();
newValues["ID"] = findLastItem != null ? (int) findLastItem["ID"] + 1 : 0;
DataRow rowToInsert = SessionDataSource.NewRow();
foreach (DictionaryEntry entry in newValues)
{
rowToInsert[entry.Key.ToString()] = entry.Value ?? DBNull.Value;
}
SessionDataSource.Rows.Add(rowToInsert);
}
When the JAWS screen reader is used alongside the Grid with enabled keyboard navigation, using Alt + Up/Down arrow doesn't work as intended, most noticeably trying to use Alt + UpArrow doesn't move the focus to the previous row.
This behavior can be observer on the Keyboard navigation demo as well
For RadGrid, after setting EnableKeyboardShortcuts to false, I find the Up/Down keys are also disabled. However, according to your online document below, the Up/Down keys shouldn't be disabled in this case.
According the Keyboard Support online demo, these buttons should not get disabled:
"The grid also features an additional property ClientSettings -> KeyboardNavigationSettings -> EnableKeyboardShortcuts which when set to false will disable all keyboard navigation shortcuts except for the Up/Down and Page Up/Page Down keys."
It would be good to add this functionality for a better customization of the Grid's newly inserted rows.
When I try to set the Skin to Material I obtain the following Error:
WebResource.axd?d=e4b2sCc8Q8M6A2MgSsDltOpyL908K1Q7T29bPdSz7Supj8wwNwBiCRISuCJlWYcTaJsmG21ZOfynS4jGurXXbpli-ERqUAuqN0-JIBovYD49aTvhGO3Rn_RCmsSdUlmwuseC48k3n557KQEGgkr2hCHOsY41&t=638423073240000000] DETAILS: System.Web Exception: msg:Richiesta webresource non valida.
The problem happens when the ButtonType="ImageButton" is set with the Material skin:
<telerik:GridEditCommandColumn ButtonType="ImageButton" HeaderStyle-Width="20px" >
</telerik:GridEditCommandColumn>
<telerik:GridButtonColumn ButtonType="ImageButton" UniqueName="DeleteColumn" Text="Elimina" HeaderStyle-Width="20px" CommandName="Delete" ConfirmText="Procedere con la cancellazione del Cimitero?"></telerik:GridButtonColumn>
Found an additional issue when implementing this on a project:
When aria-enabled=true and we follow their instructions if we have a gridnumericcolumn in the grid, then we get a finding that "Elements must only use supported ARIA attributes" because To solve this problem, you need to fix the following:
ASPX
<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False" AllowFilteringByColumn="true" OnNeedDataSource="RadGrid1_NeedDataSource" EnableAriaSupport="true">
<ClientSettings>
<ClientEvents OnGridCreated="OnGridCreated" />
</ClientSettings>
<MasterTableView>
<Columns>
<telerik:GridBoundColumn DataField="ID" HeaderText="ID" UniqueName="ID" />
<telerik:GridBoundColumn DataField="Name" HeaderText="Name" UniqueName="Name" />
<telerik:GridCheckBoxColumn DataField="IsActive" HeaderText="Active" UniqueName="IsActive" />
<telerik:GridNumericColumn DataField="Score" HeaderText="Score" UniqueName="Score" DataType="System.Int32" DataFormatString="{0:N0}" />
</Columns>
</MasterTableView>
</telerik:RadGrid>
ASPX.CS
protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
// Creating a dummy data source
var data = new List<DummyData>
{
new DummyData { ID = 1, Name = "John Doe", IsActive = true, Score = 88 },
new DummyData { ID = 2, Name = "Jane Doe", IsActive = false, Score = 92 }
};
RadGrid1.DataSource = data;
}
public class DummyData
{
public int ID { get; set; }
public string Name { get; set; }
public bool IsActive { get; set; }
public int Score { get; set; }
}
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.
The submenu with filtering options has elements that overflow the sliding element:
When EnablePostBackOnRowClick="true" and clicking on the RadAutoCompleteBox inside the EditItemTemplate the Grid will make a PostBack.
This issue does not happen with other elements (span, input, button, etc).
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.