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.
<telerik:RadAjaxPanel runat="server" ID="panel" LoadingPanelID="RadAjaxLoadingPanel1" RenderMode="Inline" EnableAJAX="true">
<div class="row">
<asp:Button runat="server" ID="btnLoad" Text="Load Data" OnClick="btnLoad_Click" />
</div>
<telerik:RadGrid runat="server" ID="radGrid" CssClass="radgrid" Skin="Bootstrap"
ClientSettings-Scrolling-AllowScroll="true"
ClientSettings-Scrolling-ScrollHeight="800"
ClientSettings-Scrolling-UseStaticHeaders="true"
ClientSettings-EnableAlternatingItems="false"
HeaderStyle-Wrap="false" AllowPaging="true" PageSize="50"
ItemStyle-Wrap="false" AllowSorting="true"
OnNeedDataSource="radGrid_NeedDataSource" AllowMultiRowSelection="false"
HeaderStyle-BackColor="White">
<ClientSettings>
<Selecting AllowRowSelect="true" />
</ClientSettings>
<MasterTableView>
<Columns>
<telerik:GridTemplateColumn UniqueName="colEdit" AllowFiltering="false" Exportable="false">
<ItemTemplate>
<asp:LinkButton CssClass="link-button" runat="server" ID="btnEdit">Edit</asp:LinkButton>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn UniqueName="colDelete" AllowFiltering="false" Exportable="false">
<ItemTemplate>
<asp:LinkButton CssClass="link-button" ID="btnDelete" runat="server">Delete</asp:LinkButton>
</ItemTemplate>
</telerik:GridTemplateColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>
</telerik:RadAjaxPanel>protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
radGrid.Visible = false;
}
}
protected void btnLoad_Click(object sender, EventArgs e)
{
radGrid.Visible = true;
radGrid.Rebind();
}
protected void radGrid_NeedDataSource(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
{
var grid = sender as RadGrid;
grid.DataSource = LoadData();
}
private DataTable LoadData()
{
DataTable tbl = new DataTable();
tbl.Columns.Add(new DataColumn("ADFAFD", typeof(string)));
tbl.Columns.Add(new DataColumn("ADFADFADF", typeof(string)));
tbl.Columns.Add(new DataColumn("ADFADFADFADFASDF", typeof(string)));
tbl.Columns.Add(new DataColumn("HGDH", typeof(string)));
tbl.Columns.Add(new DataColumn("ADFADF ADFADFADF", typeof(string)));
tbl.Columns.Add(new DataColumn("ADF ADSFADF", typeof(string)));
tbl.Columns.Add(new DataColumn("FKHDGJHFGJH", typeof(string)));
tbl.Columns.Add(new DataColumn("SHFSFHSGH", typeof(string)));
tbl.Columns.Add(new DataColumn("ADF ASDFASDF ASDFADSF", typeof(string)));
tbl.Rows.Add(new object[] { "ADFADF", "ASDFADFAFD", "ADFADF", "ADFADFADF ADFADFADFADF ADFADF ADFADFADF ADFADFADFADF ADFADF", "ADFADF", "ASDFADFAFD", "ADFADF", "ADFADFADF ADFADFADFADF ADFADF"});
tbl.Rows.Add(new object[] { "ADFADF", "ASDFADFAFD", "ADFADF", "ADFADFADF ADFADFADFADF ADFADF", "ADFADF", "ASDFADFAFD", "ADFADF", "ADFADFADF ADFADFADFADF ADFADF"});
return tbl;
}
Reproduction of the issue
RadGrid declaration
<telerik:RadButton runat="server" Text="PostBack" AutoPostBack="true"></telerik:RadButton>
<telerik:RadGrid runat="server" ID="RadGrid2">
<MasterTableView DataKeyNames="Column1" ClientDataKeyNames="Column1" CommandItemDisplay="Top">
<Columns>
<telerik:GridBoundColumn UniqueName="Col1" DataField="Column1" HeaderText="Col1"s></telerik:GridBoundColumn>
<telerik:GridBoundColumn UniqueName="Col2" DataField="Column2" HeaderText="Col2"></telerik:GridBoundColumn>
<telerik:GridBoundColumn UniqueName="Co13" DataField="Column3" HeaderText="Co13"></telerik:GridBoundColumn>
<telerik:GridBoundColumn UniqueName="Col4" DataField="Column4" HeaderText="Col4"></telerik:GridBoundColumn>
</Columns>
</MasterTableView>
<ClientSettings ReorderColumnsOnClient="false" AllowColumnsReorder="true">
<DataBinding Location="~/Api/RevCodeGrid" SelectMethod="GetDataAndCount2" >
</DataBinding>
</ClientSettings>
</telerik:RadGrid>
RevCodeGridController
public class Test
{
public String Column1 { get; set; }
public String Column2 { get; set; }
public String Column3 { get; set; }
public String Column4 { get; set; }
}
[HttpPost]
public virtual RadGridResultData GetDataAndCount2(object context)
{
List<Test> items = new List<Test>();
items.Add(new Test() { Column1 = "1", Column2 = "A", Column3 = "A1", Column4 = "A12" });
items.Add(new Test() { Column1 = "2", Column2 = "B", Column3 = "B1", Column4 = "B12" });
items.Add(new Test() { Column1 = "3", Column2 = "C", Column3 = "C1", Column4 = "C12" });
items.Add(new Test() { Column1 = "4", Column2 = "D", Column3 = "D1", Column4 = "D12" });
return new RadGridResultData { Data = items, Count = items.Count };
}
The horizontal line just above the group header:
Reproduction steps:
- For RadGrid set RenderMode="Mobile" and EnableHeaderContextMenu="true"
- For Grid Column set Groupable="false"
- Try to group by the non-groupable column - http://somup.com/cYirQb6fqR
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;
}
}
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.
Bug report
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".
Reproduction of the problem
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();
}
When using iPad touch to open the header context menu of a grid column, an immediate postback prevents the opening of the menu when the RadGrid is in Mobile RenderMode. The reason is that this action gets recognized as dragging when AllowDragToGroup is enabled.
Code to reproduce the problem:
<style>
html, body, body > form {
height: 100%;
padding: 0;
margin: 0;
}
</style>
...
<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" Width="100%"
AutoGenerateColumns="true"
OnNeedDataSource="RadGrid1_NeedDataSource">
<ClientSettings>
<Scrolling AllowScroll="true" />
</ClientSettings>
<MasterTableView Width="1500px">
</MasterTableView>
</telerik:RadGrid>
protected void RadGrid1_NeedDataSource(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
{
(sender as RadGrid).DataSource = GetData();
}
private object GetData()
{
DataTable dt = new DataTable();
dt.Columns.Add("column1");
dt.Columns.Add("column2");
dt.Columns.Add("column3");
dt.Columns.Add("column4");
dt.Columns.Add("column5");
dt.Columns.Add("column6");
dt.Columns.Add("column7");
dt.Columns.Add("column8");
//dt.Rows.Add(1, 2, 3, 4, 5, 6, 7, 8);
return dt;
}
Issue #1. When the Grid is not having any records (i.e. when the grid is initialized for the first time), if we define the Detail Item Template than the item template is shown 10-11 times.
Issue#2: When we have the pagination enabled in the grid and the records are fully filled on the first page and suppose the second page is half-filled with records, then in this scenario On the second page even the records of the first page are hidden but the data item template for those rows are visible which is not correct. Screenshot is attached.
Issue #3: The same scenario is happening when we searched the grid first with 10 records and then we search for 2 records, In this case also 8 records will be removed but there data item templates will still be visible on the grid.
.jpg){kind=avatar}
With no filtering applied, the filter menu still highlights the filter-function defined in the CurrentFilterFunction property of the column.
Hello @support!
Did you observe the behavior, that Firefox (v71.0 64bit) does not turn the rad grid into edit mode, whereas IE11, Edge, Chrome (v78) perfectly work ok on the same grid?
Clicking the edit stencil button only makes the two arrows below rotate for some seconds, but nothing happens. What could that be?
Video Demo is attached.
Thank you,
Alexander
Filtering with the milliseconds returns no results.
Then I remove milliseconds part "2018-09-24 18:05:21"
Filtering without that will return results.
Even with the EnableTimeIndependentFiltering property set to True, the milliseconds are not ignored, and the filtering mechanism doesn't find the records.
See online demo:
https://demos.telerik.com/aspnet-ajax/grid/examples/data-editing/batch-editing/defaultcs.aspx
Steps to reproduce (seen in Chrome and Edge):
- Click the "x" on the 2nd to last record on page 1 to mark it for deletion (Click "OK" at the prompt)
- Click "Add new record" button
Observe:
- the record marked for deletion moves up by one record (but fortunately it appears the correct record will actually get deleted upon Saving)
- a blank new record is creating correctly
If you repeat this procedure but choose a different record for deletion you can see it is functioning correctly.
I am seeing the same behaviour in my own project.