Hello Telerik Team, I'm implementing HeaderContext filtering with checkbox lists on a RadGrid in a legacy ASP.NET WebForms application. Current Setup: - FilterType="HeaderContext" - FilterCheckListEnableLoadOnDemand="true" - OnFilterCheckListItemsRequested event populates checkboxes from session data Issue: Users experience 500-2000ms delay when opening filter menus (AJAX callback to server). In our production environment with slow network and high concurrent users, this creates poor user experience. Questions: 1. Is there a way to pre-populate checkbox lists during grid initialization (avoiding AJAX callback)? 2. Can we use OnItemCreated to populate checkbox lists with FilterCheckListEnableLoadOnDemand="false"? If so, what's the correct approach? 3. Is there a client-side caching mechanism for checkbox list items? 4. What's the recommended pattern for large datasets (1000+ rows) with multiple filterable columns? Environment: - Telerik.Web.UI version:v4.0.30319- .NET Framework: 4.8 - Browser: Chrome, IE11 - Grid has ~10 columns with 5 using checkbox filters Any guidance on performance optimization would be greatly appreciated! Thank you, Anurag pandey
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
<Scripts>
<telerik:RadScriptReference Path="https://code.jquery.com/jquery-3.7.1.js" integrity="sha384-NdBrHQkGhjPzZhn" crossorigin="anonymous" />
<telerik:RadScriptReference Path="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous" />
</Scripts>
</telerik:RadScriptManager>
Attached my grid code. Most columns are removed for readability
<telerik:RadGrid ID="grdChanges" runat="server" Width="1140"
skin="WebBlue" style="margin-top:13px; margin-right:13px; outline: 0 !important;"
ShowFooter="false" AllowSorting="false">
<ClientSettings>
<Scrolling AllowScroll="True" ScrollHeight="487px" UseStaticHeaders="true" />
</ClientSettings>
<MasterTableView GroupLoadMode="Client" AutoGenerateColumns="False" HeaderStyle-Font-Bold="true">
<HeaderStyle CssClass="InnerHeaderStyle"/>
<ItemStyle CssClass="InnerItemStyle"/>
<AlternatingItemStyle CssClass="InnerAlernatingItemStyle"/>
<CommandItemStyle CssClass="CommandHeaderStyle" />
<ColumnGroups>
<telerik:GridColumnGroup Name="Passenger Trips" HeaderText="Passenger Trips" HeaderStyle-HorizontalAlign="Center"/>
<telerik:GridColumnGroup Name="Ton Trips" HeaderText="Ton Trips" HeaderStyle-HorizontalAlign="Center"/>
<telerik:GridColumnGroup Name="Miles Per Trip" HeaderText="Miles Per Trip" HeaderStyle-HorizontalAlign="Center"/>
<telerik:GridColumnGroup Name="Miles Per Hour" HeaderText="Miles Per Hour" HeaderStyle-HorizontalAlign="Center"/>
</ColumnGroups>
<Columns>
<telerik:GridNumericColumn DataField="MilesPerHour_Proj" HeaderText="Project"
ColumnGroupName ="Miles Per Hour"
DataFormatString="{0:N1}" DecimalDigits="0"
HeaderStyle-HorizontalAlign="Center"
HeaderStyle-Width="60px" ItemStyle-BackColor="White"
ItemStyle-HorizontalAlign="Right" AllowRounding="true" />
<telerik:GridNumericColumn DataField="MilesPerHour_Base" HeaderText="Base"
ColumnGroupName ="Miles Per Hour"
DataFormatString="{0:N1}" DecimalDigits="0"
HeaderStyle-HorizontalAlign="Center"
HeaderStyle-Width="60px" ItemStyle-BackColor="White"
ItemStyle-HorizontalAlign="Right" AllowRounding="true" />
<telerik:GridNumericColumn DataField="MilesPerHourChange" HeaderText="Change"
ColumnGroupName ="Miles Per Hour"
DataFormatString="{0:N1}" DecimalDigits="0"
HeaderStyle-HorizontalAlign="Center"
HeaderStyle-Width="60px" ItemStyle-BackColor="White"
ItemStyle-HorizontalAlign="Right" AllowRounding="true" />
</Columns>
<NoRecordsTemplate>
<div style="padding: 5px">
No records available.
</div>
</NoRecordsTemplate>
</MasterTableView>
<FilterMenu EnableTheming="True">
<CollapseAnimation Duration="200" Type="OutQuint" />
</FilterMenu>
</telerik:RadGrid>
ChatGPT recommended "Turn off Telerik’s “old” ARIA settings (they are overly strict and often invalid):"
i removed it and it worked. WTH?
What i supposed to do now? I added these settings in all our products
<telerik:RadGrid ID="grdImpacts" runat="server" EnableAriaSupport="true"
Hello,
The problem is that when you click the buttons, the RadDateRangePicker is filled with the start of 2025-06-01 and the end of 2025-06-30. Then, when you click the button again, a change should occur in the RadDateRangePicker: start of 2025-07-01 and end of 2025-07-31.
1 step => correct
2 step => incorrect
Result
The first time you click the button, it returns the start date to 06/01/2025 and the end date to 06/30/2025 (this is correct). Clicking it again returns the start date to 06/30/2025 and the end date to 07/31/2025 (this is incorrect).
Work around
- Local page
js code fixed
const datepicker = $find('<%= radDateRangePicker2.ClientID %>');
datepicker.set_rangeSelectionStartDate(null);
datepicker.set_rangeSelectionEndDate(null);
- Global fixed All controls
C# in extension control
public bool EnableDateResetting
{
get => ViewState["EnableDateResetting"] as bool? ?? false;
set => ViewState["EnableDateResetting"] = value;
}
public eDateRangePicker() : base()
{
Load += EDateRangePicker_Load;
}
private void EDateRangePicker_Load(object sender, EventArgs e)
{
if (EnableDateResetting)
{
RegisterDateResettingScript();
}
}
private void RegisterDateResettingScript()
{
string script = $@"
Sys.Application.add_load(function() {{
const picker = $find('{ClientID}');
if (picker) {{
const origStart = picker.set_rangeSelectionStartDate;
const origEnd = picker.set_rangeSelectionEndDate;
picker.set_rangeSelectionStartDate = function(date) {{
if (date !== null && !this._isResetting) {{
const currentStart = this.get_rangeSelectionStartDate();
const currentEnd = this.get_rangeSelectionEndDate();
if (currentStart || currentEnd) {{
this._isResetting = true;
origStart.call(this, null);
origEnd.call(this, null);
this._isResetting = false;
}}
}}
return origStart.call(this, date);
}};
picker.set_rangeSelectionEndDate = function(date) {{
return origEnd.call(this, date);
}};
}}
}});
";
ScriptManager.RegisterStartupScript(this, GetType(), $"DateResetting_{ClientID}", script, true);
}When using client-side code to filter my Grid, the "BETWEEN" filter does not work well when filtering DateTime values where the time is after 12:00 AM.
i.e., filtering the dates between 9/11/2025 and 9/12/2025 does not include 9/12/2025 at 12:01 AM or any date where the time is after 12:00 AM.
Additionally, when passing datetime values to the filter function, the time component is dropped afterward.
var filter = "9/11/2025,12:00:00,AM 9/12/2025,11:59:59,PM"
tableView.filter(columnName, filter, "Between");
<FilterTemplate>
<telerik:RadLabel runat="server" AssociatedControlID="FromOrderDatePicker" Text="From"></telerik:RadLabel>
<telerik:RadDatePicker RenderMode="Lightweight" ID="FromOrderDatePicker" runat="server" Width="140px" ClientEvents-OnDateSelected="FromDateSelected"
MinDate="07-04-1996" MaxDate="05-06-1998" FocusedDate="07-04-1996" DbSelectedDate='<%# startDate %>' />
<telerik:RadLabel runat="server" AssociatedControlID="ToOrderDatePicker" Text="to" Style="padding-left: 5px;"></telerik:RadLabel>
<telerik:RadDatePicker RenderMode="Lightweight" ID="ToOrderDatePicker" runat="server" Width="140px" ClientEvents-OnDateSelected="ToDateSelected"
MinDate="07-04-1996" MaxDate="05-06-1998" FocusedDate="05-06-1998" DbSelectedDate='<%# endDate %>' />
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
<script type="text/javascript">
function FromDateSelected(sender, args) {
var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
var ToPicker = $find('<%# ((GridItem)Container).FindControl("ToOrderDatePicker").ClientID %>');
var fromDate = FormatSelectedDate(sender) + ",12:00:00,AM";
var toDate = FormatSelectedDate(ToPicker) + ",11:59:59,PM";
tableView.filter("OrderDate", fromDate + " " + toDate, "Between");
}
function ToDateSelected(sender, args) {
var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
var FromPicker = $find('<%# ((GridItem)Container).FindControl("FromOrderDatePicker").ClientID %>');
var fromDate = FormatSelectedDate(FromPicker);
var toDate = FormatSelectedDate(sender);
tableView.filter("OrderDate", fromDate + " " + toDate, "Between");
}
function FormatSelectedDate(picker) {
var date = picker.get_selectedDate();
var dateInput = picker.get_dateInput();
var formattedDate = dateInput.get_dateFormatInfo().FormatDate(date, dateInput.get_displayDateFormat());
return formattedDate;
}
</script>
</telerik:RadScriptBlock>
</FilterTemplate>
For more details, you can take Ticket 1702122 as a reference.
There are missing methods in the TypeScript definitions provided. You can find attached a file that illustrates what needs to be updated.
I recently upgraded the Telerik version from 2025.1.416 to 2025.3.825, and started getting this NullReferenceException during debugging.
I noticed I get the error when debugging RadGrid with the Skin property.
The Box Plot Chart throws the following errors when used:
RadHtmlChart.js:1 Uncaught ReferenceError: series is not defined Uncaught (in promise) ReferenceError: series is not defined
While changing the value from RadCombox, meaning firing the SelectedIndexChanged, I am getting the below error.
Exception information:
Exception type: NullReferenceException
Exception message: Object reference not set to an instance of an object.
at MDM.WebApplication.MyPendingActions.rgrid_ItemDataBound(Object sender, GridItemEventArgs e)
at Telerik.Web.UI.RadGrid.OnItemDataBound(GridItemEventArgs e)
at Telerik.Web.UI.GridCommandItem.SetupItem(Boolean dataBind, Object dataItem, GridColumn[] columns, ControlCollection rows)
at Telerik.Web.UI.GridTableView.CreateTopCommandItem(Boolean useDataSource, GridColumn[] copiedColumnSet, GridTHead thead)
at Telerik.Web.UI.GridTableView.CreateControlHierarchy(Boolean useDataSource)
at Telerik.Web.UI.GridTableView.CreateChildControls(IEnumerable dataSource, Boolean useDataSource)
at System.Web.UI.WebControls.CompositeDataBoundControl.PerformDataBinding(IEnumerable data)
at System.Web.UI.WebControls.DataBoundControl.OnDataSourceViewSelectCallback(IEnumerable data)
at Telerik.Web.UI.GridTableView.PerformSelect()
at Telerik.Web.UI.GridTableView.DataBind()
at Telerik.Web.UI.RadGrid.AutoDataBind(GridRebindReason rebindReason)
at Telerik.Web.UI.RadGrid.OnLoad(EventArgs e)
at System.Web.UI.Control.LoadRecursive()
at System.Web.UI.Control.LoadRecursive()
at System.Web.UI.Control.LoadRecursive()
at System.Web.UI.Control.LoadRecursive()
at System.Web.UI.Control.LoadRecursive()
at System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint).
When trying on localhost SelectedIndexChanged of RadCombobox is getting fired and rgrid_NeedDataSource of RadGrid is not fired but when deployed on IIS, the scenario is opposite, SelectedIndexChanged is not fired but rgrid_NeedDataSource is getting fired.
Please help.
Also another thing, I wanted to understand how to use licenses.licx file in our project for telerik dll version 2013.1.314.45?
Hi,
Would it possible to build in a text search filter into a Listbox?
Re: https://www.telerik.com/account/support-center/view-ticket/1677442
Re: https://www.telerik.com/products/aspnet-ajax/documentation/knowledge-base/listbox-client-side-filter
Alan
Hi,
I was looking around to develop a web app that allows streaming camera view in order to take pictures, showing the previews, letting cancel/retake or transfer (upload/save) them.
I started from the input control, that makes more or less what I need, but start a video streaming, letting the user simply to capture frame from it to save pictures, is more user friendly and simplify a lot the workflow.
So I started to work with video element, canvas and FloatingActionsButton, hitting against many issues, starting from the different browsers compatibilities.
I was just wondering if Telerik would never implement such a camera + gallery component, in order to take and manage pictures easily and cross platform.
Thank you, kind regards