There is some undesirable behavior that has been discovered by our users regarding APS.Net RadGrid when filtering with the checkbox list. I have seen that the issue also happens on the Telerik Demo page found here and will use it as the example: https://demos.telerik.com/aspnet-ajax/grid/examples/functionality/filtering/basic-filtering/defaultcs.aspx
If you go to the last demo on that page (Filtering with Client-Side Binding) select the filter for Country. When the checkbox items appear, click on an item, however do not click on the checkbox. What happens is the dropdown closes and nothing happens. The demo however is for cliet side binding which is does not postback to the server. Our control is handled on the server-side so when this happens a request is sent and the user is presented with the loading circle which makes the user think something is actually happening, yet it is not.
I suggest that the behavior of clicking on an item, outside of the checkbox, checks the box and keeps the list open.
At the least, there should be no request that is sent to the server as the box was not actually checked with the current behavior.
I have attached an image with a red 'X' on where a user may click to reproduce this behavior.
The horizontal line just above the group header:
Links inside RadGrid are failing Contrast tests with ANDI tool:
<telerik:RadButton runat="server" ID="RadButton1" Text="Hide Grids with no Contrast issues" AutoPostBack="false" OnClientClicked="OnClientClicked" />
<script>
function OnClientClicked(sender, args) {
var $ = $ || $telerik.$;
var failingSkins = []
$(".RadGrid").each(function () {
var grid = $(this)
if (grid.find(".ANDI508-element-danger").length == 0) {
grid.parent().hide();
} else {
failingSkins.push(grid.parent().find(".label").text())
}
})
console.log(failingSkins)
}
</script>
<a href="javascript:void((function(){andiScript=document.createElement('script');andiScript.setAttribute('src','https://www.ssa.gov/accessibility/andi/andi.js');document.body.appendChild(andiScript)})());">Run ANDI tool</a>
<br />
<telerik:RadSkinManager ID="RadSkinManager1" runat="server"></telerik:RadSkinManager>
<asp:Repeater runat="server" ID="Repeater1" OnItemDataBound="Repeater1_ItemDataBound">
<SeparatorTemplate>
<hr />
</SeparatorTemplate>
<ItemTemplate>
<div class="container">
<asp:Label Text="Label1" CssClass="label" ID="Label1" runat="server" />
<telerik:RadGrid ID="RadGrid1" RenderMode="Lightweight" runat="server" AllowPaging="True" CellSpacing="0"
GridLines="None" Width="800px" PageSize="10" OnNeedDataSource="RadGrid1_NeedDataSource"
AllowSorting="true">
<MasterTableView AutoGenerateColumns="False" DataKeyNames="OrderID">
<Columns>
<telerik:GridHyperLinkColumn DataTextField="ShipName" DataNavigateUrlFields="OrderID" DataNavigateUrlFormatString="https://google.com/search?q={0}" Target="_blank"></telerik:GridHyperLinkColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>
</div>
</ItemTemplate>
</asp:Repeater>
protected void Page_Load(object sender, EventArgs e)
{
Repeater1.DataSource = RadSkinManager1.GetSkinChooser().Items;
Repeater1.DataBind();
}
protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
(sender as RadGrid).DataSource = Enumerable.Range(1,70).Select(x=> new { OrderID = x, ShipName = "Ship name #" + x });
}
protected void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
var grid = e.Item.FindControl("RadGrid1") as RadGrid;
if (grid != null)
{
var skin = (e.Item.DataItem as RadComboBoxItem).Text;
grid.Skin = skin;
(e.Item.FindControl("Label1") as Label).Text=skin;
}
}
Reproduction steps:
Create a FilterControlEmptyMessage property so users can set an empty message in the grid filter textbox, much like the EmptyMessag property of RadTextBoxes. Ideally make it so this property can be accessed/modified client and server-side.
Forum threads on this topic:
Hello, I have Radgrid with editable & non editable columns. I edit a row. If I click an editable cell, it places the cursor within the editable cell. Its correct. But if I click a readonly cell, it places the cursor in the first editable cell of the line. If the readonly cell is the last cell of the line and if I click the readonly cell, it places the cursor in the first editable cell. If the grid column width is very large, the grid is scrolled to show the first editable cell, and I loose the data which I am visualizing. If I click in readonly cell, I want to open all the editable cells of the line, but the page should remain in same place. I don't want to place the cursor in any of the editable cells of the line. Example grid: I have a simple Radgrid with batch mode and edit type row. I have 3 columns id,name and age. Id and name columns are editable columns. Age column is non editable column. If I click on age column which is non editable , the focus moves to id column, which is the first editable column. If there many columns in my grid and if I click the last non editable column, the grid scrolls to first editable column, and I lose the focus of data which I am seeing. If I click in non editable column, I want the grid to remain in same place. This feature can be added as an option by adding property of grid ForceFocusinEdit. When ForceFocusinEdit= true, if we click in readonly column, focus moves to first editable column. When ForceFocusinEdit = false, if we click in readonly column, focus is in clicked cell. Please refer to Ticket ID: 1168296 for more informations. Thank you
Using Entity Framework Code First and model binding in a RadGrid, in insert row there is a default value for all non-string types that are not nullable. For example "0" for Int or Decimal, "01/01/0001" for Date, etc... So we have to make code to clear these values in textboxs or make SQL requests to give a default value to RadComboBoxs linked to a Foreign Key. This does not happens using a FormView and model binding. This does not happens using a RadGrid and EntityDataSource . Please make an option to let all controls blank in insert mode without doing code !
The ability to freeze columns on the left in a RadGrid is a great feature. However freezing them from both the left AND right would be even better. I have a scenario where the far left column in a date field (which is frozen and works great). Then there are about 30 columns that scroll. The final column is a "totals" column for that week, and it would be great if that was frozen on the right so I don't need to scroll all the way over to see that column...
<
telerik:RadGrid
ID
=
"RadGrid1"
runat
=
"server"
>
<
MasterTableView
>
<
Columns
>
<
telerik:GridClientDeleteColumn
CommandName
=
"Delete"
ButtonType
=
"LinkButton"
></
telerik:GridClientDeleteColumn
>
</
Columns
>
</
MasterTableView
>
<
ClientSettings
>
<
ClientEvents
OnCommand
=
"OnCommand"
/>
</
ClientSettings
>
</
telerik:RadGrid
>
function
OnCommand(sender, args) {
}
When I use TimePicker in GridDateTimeColumn it works fine in a normal browser but fails on mobile with the following error "Value must be 00:00 or earlier"
This works fine from Firefox, but when I use a mobile browser I get the following error "Value must be 00:00 or earlier" or "Value must be 12:00 AM or earlier".
Markup
<telerik:RadGrid ID="RGTimesheet" runat="server" OnNeedDataSource="RGTimesheet_NeedDataSource" RenderMode="Mobile"
AllowAutomaticInserts="True" AllowAutomaticUpdates="True" AllowAutomaticDeletes="True"
Skin="MetroTouch"
Width="100%" AllowSorting="True" GroupPanelPosition="Top">
<ClientSettings>
<Scrolling AllowScroll="True" UseStaticHeaders="True"></Scrolling>
</ClientSettings>
<MasterTableView AutoGenerateColumns="False" CommandItemDisplay="Bottom" DataKeyNames="OrderID" ShowFooter="True">
<Columns>
<telerik:GridEditCommandColumn ButtonType="FontIconButton">
</telerik:GridEditCommandColumn>
<telerik:GridClientDeleteColumn ButtonType="FontIconButton">
</telerik:GridClientDeleteColumn>
<telerik:GridDateTimeColumn DataField="Start" DataType="System.TimeSpan" EditDataFormatString="hh:mm:ss tt" HeaderText="Start" SortExpression="Start" UniqueName="Start" PickerType="TimePicker">
</telerik:GridDateTimeColumn>
<telerik:GridDateTimeColumn DataField="Finish" DataType="System.TimeSpan" HeaderText="Finish" SortExpression="Finish" UniqueName="Finish" PickerType="TimePicker">
</telerik:GridDateTimeColumn>
</Columns>
<EditFormSettings>
<EditColumn UniqueName="EditCommandColumn1" ButtonType="PushButton">
</EditColumn>
</EditFormSettings>
</MasterTableView>
</telerik:RadGrid>
C# - Markup
private DataTable OrdersTable()
{
DataTable dt = new DataTable();
dt.Columns.Add(new DataColumn("OrderID", typeof(int)));
dt.Columns.Add(new DataColumn("Start", typeof(TimeSpan)));
dt.Columns.Add(new DataColumn("Finish", typeof(TimeSpan)));
dt.PrimaryKey = new DataColumn[] { dt.Columns["OrderID"] };
for (int i = 0; i < 10; i++)
{
int index = i + 1;
DataRow row = dt.NewRow();
int hours = DateTime.Now.Hour;
int minutes = DateTime.Now.Minute;
int seconds = DateTime.Now.Second;
row["OrderID"] = index;
row["Start"] = new TimeSpan(hours, minutes, seconds);
row["Finish"] = new TimeSpan(hours+index, minutes, seconds);
dt.Rows.Add(row);
}
return dt;
}
protected void RGTimesheet_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
RGTimesheet.DataSource = OrdersTable();
}
How is it possible to autofit / autosize a giving column (or all columns) when exporting the contents from RadGrid to xlsx using ExportStructure? The only option available is Width with a defined value. I was unable to find an autofit / autosize function. And also add AutoFilter feature... Please consider to add this features :-)
The behavior described in the following KB should be fixed https://www.telerik.com/support/kb/aspnet-ajax/grid/details/horizontal-scroll-speed-is-slow-with-static-headers In the meantime, you can use the workarounds from the article, or, if it fits your scenario, move to scrolling horizontally through frozen columns via the Prev/Next buttons the grid can provide. You can find an example of that in the second grid (Navigate through the columns by clicking on the Prev/Next buttons) in the following demo: https://demos.telerik.com/aspnet-ajax/grid/examples/columns-rows/columns/frozen-columns/defaultcs.aspx
In RadGrid, we can use the ClientSettings.Scrolling.UseStaticHeaders property to have a fixed header when scrolling the grid. This requires a fixed height of the grid. However, what if we do not want a fixed height of the grid, but rather want the grid to flow down the page, using as much space as necessary do display its records. In such a scenario, the grid header will disappear when we scroll down the page. I have implemented a kind of fix for this in one of my projects. Instead of trying to explain how it works, I have prepared an example. You can find it here: http://www.ifag.no/RadGridHeader.aspx Maybe some of you can suggest even better solutions to the scenario I have described. Comments are welcome!
This feature request is regarding the ExportToExcel button in Radgrid. ExportToExcel button in Radgrid adds an extra row in the exported excel sheet. This is due to the presence of Filtering items. Export to Excel code in radgrid: <ExportSettings ExportOnlyData="true" IgnorePaging="true" Excel-Format="Biff" OpenInNewWindow="True"> <Excel Format="Biff" AutoFitImages="True"></Excel> </ExportSettings> <CommandItemSettings ShowAddNewRecordButton="False" ShowRefreshButton="False" ShowExportToExcelButton="True" ExportToExcelText="Export Grid To Excel"/> The above code produces an extra row. I know there is a fix by disabling the Filtering items in the grid in OnItemCommand event. So I used that. The code is given below: protected void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e) { if (e.CommandName == RadGrid.ExportToExcelCommandName) { ReviewByCollegeGrid.AllowFilteringByColumn = false; ReviewByCollegeGrid.Rebind(); ReviewByCollegeGrid.ExportSettings.Excel.Format = GridExcelExportFormat.Biff; ReviewByCollegeGrid.ExportSettings.IgnorePaging = true; ReviewByCollegeGrid.ExportSettings.ExportOnlyData = true; ReviewByCollegeGrid.ExportSettings.OpenInNewWindow = true; } } But it is a lot of work when you have to do it for all the web pages in your application. Please provide a feature which will help to solve this issue in an easier way.
If AllowPaging, AllowScroll and UseStaticHeaders are set to true, then there will be 2 empty <th> elements workaround: <ClientSettings> ... <ClientEvents OnGridCreated="OnGridCreated" /> </ClientSettings> <script> function OnGridCreated(sender, args) { var emptyth = $telerik.$(sender.get_element()) .find("th").filter(function (ind, item) { return item.textContent == "" }); // alert(emptyth.length) emptyth.append("<span style='display:none'>Hidden empty table header</span>") } </script>
Images that reside in the grid will get resized (scaled down with about 3-5 %) which might cause issues, specially if exporting bar-codes, thus the bar-code scanners won't be able to read them. Current workaround is to use the Telerik Documents Processing Library and build the table manually where the images are inserted without changing the size. Here is an example: protected void RadGrid1_InfrastructureExporting(object sender, GridInfrastructureExportingEventArgs e) { Telerik.Web.UI.ExportInfrastructure.Table table = e.ExportStructure.Tables[0]; Workbook workbook = new Workbook(); workbook.Worksheets.Add(); Worksheet worksheet = workbook.ActiveWorksheet; foreach (var row in table.Rows) { if (row.Index > 1) { worksheet.Rows[row.Index - 1].SetHeight(new RowHeight(55, true)); } foreach (var cell in row.Cells) { if (row.Index == 1 || cell.ColIndex != 2) { worksheet.Cells[cell.Index.Y - 1, cell.Index.X - 1].SetValue(cell.Value.ToString()); } else { FloatingImage image = new FloatingImage(worksheet, new CellIndex(cell.Index.Y - 1, cell.Index.X - 1), 0, 0); Stream stream = File.Open(Server.MapPath(cell.Value.ToString()), FileMode.Open); using (stream) { image.ImageSource = new Telerik.Windows.Documents.Media.ImageSource(stream, "jpg"); } worksheet.Shapes.Add(image); } } } byte[] data; using (MemoryStream ms = new MemoryStream()) { XlsxFormatProvider xlsProvider = new XlsxFormatProvider(); xlsProvider.Export(workbook, ms); data = ms.ToArray(); } Response.ContentType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"; Response.Headers.Remove("Content-Disposition"); Response.AppendHeader("Content-Disposition", "attachment; filename=" + RadGridLista.ExportSettings.FileName + ".xlsx"); Response.BinaryWrite(data); Response.End(); }
A valid SQL statement should look like SELECT * FROM Products WHERE ([Discontinued] = 1) or SELECT * FROM Products WHERE ([Discontinued] = 'True') but RadGrid provides something like ([Discontinued] = True) in the MasterTableView.FilterExpression property. By default RadGrid filters the data on its own after retrieving the entire data set form the data source, and the filtering operation works like that. If you will be using the filter expression provided by the grid in a custom data source operation you may need to tweak the string first. Note that changing this may result in a breaking change if you are already using the current syntax. Workaround: https://www.telerik.com/support/kb/aspnet-ajax/grid/details/get-sql-compliant-filterexpressions-from-radgrid
Private
Function
SomeTable()
As
DataTable
Dim
dt
As
New
DataTable()
dt.Columns.Add(
New
DataColumn(
"FieldName"
, Type.
GetType
(
"System.String"
)))
row(
"FieldName"
) =
"C:\SomeDirectory\RadGridExport.pdf"
dt.Rows.Add(row)
Return
dt
End
Function
<
telerik:GridAttachmentColumn
DataSourceID
=
"ObjectDataSource1"
HeaderText
=
"Attachment Column"
AttachmentKeyFields
=
"FieldName"
AttachmentDataField
=
"FieldName"
DataTextField
=
"FieldName"
UniqueName
=
"FieldName"
ButtonType
=
"ImageButton"
UploadControlType
=
"RadAsyncUpload"
FileName
=
"RadGridExport.pdf"
ImageUrl
=
"pdf-icon.png"
ItemStyle-Height
=
"36px"
ItemStyle-Width
=
"36px"
>
</
telerik:GridAttachmentColumn
>
<
asp:ObjectDataSource
ID
=
"ObjectDataSource1"
runat
=
"server"
SelectMethod
=
"MySelectMethod"
TypeName
=
"MyApp"
>
<
SelectParameters
>
<
asp:Parameter
Name
=
"FieldName"
Type
=
"String"
/>
</
SelectParameters
>
</
asp:ObjectDataSource
>
Public
Class
MyApp
<DataObjectMethodAttribute(DataObjectMethodType.
Select
,
True
)>
Public
Function
MySelectMethod(filePath
As
String
)
As
DataTable
Dim
dt
As
New
DataTable(
"Base"
)
Dim
col
As
New
DataColumn(
"FieldName"
)
col.DataType = System.Type.
GetType
(
"System.Byte[]"
)
dt.Columns.Add(col)
Dim
row
As
DataRow = dt.NewRow
row(0) = My.Computer.FileSystem.ReadAllBytes(filePath)
dt.Rows.Add(row)
Return
dt
End
Function
End
Class