Using CommandItemTemplate (Grid - Command Item) for Editing DetailTable records and selecting an item after filtering or from another page, one item from the first page is put for editing instead. Open the attached GIF animation (EditSelectedEditWrongItem.gif) to see it in action.
Currently the workaround we offer is to handle the EditSelected command manually for all the DetailTables Except for the Master.
Grid markup:
<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" Width="100%" PageSize="3"
OnItemCommand="RadGrid1_ItemCommand"
OnDetailTableDataBind="RadGrid1_DetailTableDataBind"
OnNeedDataSource="RadGrid1_NeedDataSource">
<MasterTableView Name="MasterTable" AutoGenerateColumns="true" DataKeyNames="OrderID">
<DetailTables>
<telerik:GridTableView Name="ChildTable" DataKeyNames="OrderID" AutoGenerateColumns="true" CommandItemDisplay="Top">
<CommandItemTemplate>
<asp:LinkButton ID="btnEditSelected" runat="server" CommandName="EditSelected" CssClass="btn btn-default">Edit Selected</asp:LinkButton>
</CommandItemTemplate>
</telerik:GridTableView>
</DetailTables>
</MasterTableView>
<ClientSettings>
<Selecting AllowRowSelect="true" />
</ClientSettings>
</telerik:RadGrid>
C# - ItemCommand
protected void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)
{
// Logic applies for all the tables (detail tables) which are not named "MasterTable"
if(e.Item.OwnerTableView.Name != "MasterTable" && e.CommandName == RadGrid.EditSelectedCommandName)
{
e.Canceled = true;
GridTableView detailTable = e.Item.OwnerTableView;
if (detailTable.OwnerGrid.SelectedIndexes.Count == 0)
{
return;
}
foreach (GridDataItem selectedItem in detailTable.OwnerGrid.SelectedItems)
{
selectedItem.Edit = true;
}
detailTable.Rebind();
}
}
VB - ItemCommand
Protected Sub RadGrid1_ItemCommand(ByVal sender As Object, ByVal e As GridCommandEventArgs)
If e.Item.OwnerTableView.Name <> "MasterTable" AndAlso e.CommandName = RadGrid.EditSelectedCommandName Then
e.Canceled = True
Dim detailTable As GridTableView = e.Item.OwnerTableView
If detailTable.OwnerGrid.SelectedIndexes.Count = 0 Then
Return
End If
For Each selectedItem As GridDataItem In detailTable.OwnerGrid.SelectedItems
selectedItem.Edit = True
Next
detailTable.Rebind()
End If
End Sub
Currently the Width of the Edit controls inside the inline Edit form of the Grid can be set only in pixels. In order to be able to implement a responsive layout the developer has to be able to set the width of these controls in percentage.
When virtualization is enabled for RadGrid, NeedDataSource is called at every Post back with RebindReason = ExplicitRebind, regardless of the event target.
Steps to reproduce:
Use the following Code snippets for the runnable sample and debug the NeedDataSource event while doing post backs using other controls. For instance, you can use the RadButton1 from these snippets to make a standard Post Back.
<
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) {
}
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
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(); }
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>
With form decorator the checkboxes jump a bit to the left when cell is opened: https://www.screencast.com/t/5HwXW6kgVhb Without form decorator they get centered because of the 100% width they get https://www.screencast.com/t/oxc75Bu6lM It comes from the combination of two things: - by default, the grid cells have a left padding (as well as padding to the other sides, but that's irrelevant now) - the batch editing container does not have left padding so the editable element can better align with the text in the general case (textboxes and other editable elements usually have some left padding). With a checkbox there is no textual input, though, and so it appears to shift to the left because the left-padding of the cell is removed by the batch editing. Workaround: <style> /* note: the margins may vary in different skins, inspect the rendering if there is a */ /* for form decorator */ html .RadGrid td.rgBatchCurrent .rfdCheckboxUnchecked, html .RadGrid td.rgBatchCurrent .rfdCheckboxChecked, html .RadGrid td.rgBatchCurrent .RadCheckBoxList { margin-left: 12px; } /* if no form decorator */ html .RadGrid td.rgBatchCurrent input[type='checkbox'] { width: auto; margin-left: 16px; } /* in case you have radio buttons even though they are not a supported editable control with batch editing*/ /* for form decorator */ html .RadGrid td.rgBatchCurrent .rfdRadioUnchecked, html .RadGrid td.rgBatchCurrent .rfdRadioChecked, html .RadGrid td.rgBatchCurrent .RadRadioButtonList{ margin-left: 12px; } /* if no form decorator */ html .RadGrid td.rgBatchCurrent input[type='radio'] { width: auto; margin-left: 16px; } </style>
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...
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 !
There are two easy solutions: - set HighlightDeletedRows to false - use the built-in Save Changes button in the command item A workaround is attached that allows you to use an external button and highlight deleted rows. It will cause other changes apart from deletion on a row to be lost, but deleted rows will be sent to the server.
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
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:
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