Hello,
we have a problem in our web app that uses a RadGrid. The data comes from a data table that is bound to the Grid in code-behind. When the user changes entries, per JavaScript the cells will be updated correctly. But in the code-behind we have no access to the changed data - the original data is still in the data table. We tried to use e.g. AllowAutomaticUpdate, AcceptChanges, Rebind but without success.
Could you please help us. Here is the example code:
Thank you for your help
Martin Glas
we have a problem in our web app that uses a RadGrid. The data comes from a data table that is bound to the Grid in code-behind. When the user changes entries, per JavaScript the cells will be updated correctly. But in the code-behind we have no access to the changed data - the original data is still in the data table. We tried to use e.g. AllowAutomaticUpdate, AcceptChanges, Rebind but without success.
Could you please help us. Here is the example code:
| <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebAppTelerikGridProblem._Default" %> | |
| <%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %> | |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml" > | |
| <head runat="server"> | |
| <title>Problem of Telerik - clientside data changed per javascripotto - fetch on code behind</title> | |
| <script type="text/javascript"> | |
| function pageLoad(sender, args) | |
| { | |
| } | |
| var Rows = null; | |
| var Grid = null; | |
| function RadGridFieldsOnGridCreated(sender, eventArgs) | |
| { | |
| Grid = sender | |
| if (Rows == null) | |
| Rows = Grid.get_masterTableView().get_dataItems(); | |
| } | |
| function RadGridFieldsOnActiveRowChanged(sender, args) | |
| { | |
| if ((sender.get_masterTableView().get_selectedItems().length < 1) || (sender.get_masterTableView().get_selectedItems()[0].get_id() != args.get_id())) | |
| args.get_tableView().selectItem($get(args.get_id())); | |
| } | |
| function RadGridFieldsOnRowSelect(sender, args) | |
| { | |
| // synchronisieirt Select and ActiveRow | |
| var grid = $find(sender.get_id()); | |
| var dataItem = $get(args.get_id()); | |
| var row = grid.get_masterTableView().get_dataItems()[dataItem.rowIndex - 1]; | |
| var cell = grid.get_masterTableView().getCellByColumnUniqueName(row, 'value'); | |
| //shows the correct changed value | |
| alert('value = ' + cell.innerText); | |
| } | |
| function SelectRowNumber(nRowNr) | |
| { | |
| var dataItem = Rows[nRowNr]; | |
| dataItem.set_selected(true); | |
| } | |
| function GetCell(oRow, sCellname) | |
| { | |
| return Grid.get_masterTableView().getCellByColumnUniqueName(oRow, sCellname); | |
| } | |
| function EntryCellValue(oRow, sCellname, sValue) | |
| { | |
| var oCell = GetCell(oRow, sCellname); | |
| if (oCell === null) | |
| return; | |
| if (sValue === '') | |
| oCell.innerHTML = ' '; | |
| else | |
| oCell.innerText = sValue; | |
| } | |
| // Changed the Entrys in the grid - this changed values i need inn code behind | |
| function ButtonChangeGridContent_onclick() | |
| { | |
| EntryCellValue( Rows[0], 'Value', 'AAAAA' ); | |
| EntryCellValue( Rows[1], 'Value', 'BBBBB' ); | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <form id="form1" runat="server"> | |
| <asp:ScriptManager ID="ScriptManager1" runat="server"> | |
| </asp:ScriptManager> | |
| <div> | |
| <div id="divHeader" style="width:100%; height:35px; border: solid 1px black"> | |
| <center> | |
| <h1 style=" font-family:Arial; font-weight:bolder">Telerik Grid Problem!?!?</h1> | |
| </center> | |
| </div> | |
| <br /> | |
| <div style="width:100%; height:250px; border: solid 1px black"> | |
| <asp:UpdatePanel ID="UpdatePanelGridView" runat="server"> | |
| <ContentTemplate> | |
| <telerik:RadGrid ID="RadGridFieldView" runat="server" | |
| AutoGenerateColumns = "False" | |
| GroupingEnabled = "False" | |
| Width = "97%" | |
| AllowAutomaticUpdates = "true" | |
| MasterTableView-AllowAutomaticUpdates ="true" | |
| HeaderStyle-Font-Bold = "true" AllowAutomaticInserts="True" AllowMultiRowEdit="True" | |
| > | |
| <MasterTableView CommandItemDisplay="None" GridLines="Both" > | |
| <RowIndicatorColumn Visible="True"> | |
| <HeaderStyle Width="20px" /> | |
| </RowIndicatorColumn> | |
| <ExpandCollapseColumn> | |
| <HeaderStyle Width="20px" /> | |
| </ExpandCollapseColumn> | |
| <Columns> | |
| <telerik:GridBoundColumn | |
| DataType = "System.String" | |
| Display = "true" | |
| HeaderText = "Name" | |
| UniqueName = "Name" | |
| DataField = "Name" | |
| > | |
| <HeaderStyle Width="19%" /> | |
| </telerik:GridBoundColumn> | |
| <telerik:GridBoundColumn | |
| DataType = "System.String" | |
| Display = "true" | |
| HeaderText = "Value" | |
| UniqueName = "Value" | |
| DataField = "Value" | |
| > | |
| <HeaderStyle Width="44%" /> | |
| </telerik:GridBoundColumn> | |
| <telerik:GridBoundColumn | |
| DataType = "System.String" | |
| Display = "true" | |
| HeaderText = "State" | |
| UniqueName = "State" | |
| DataField = "State" | |
| > | |
| <HeaderStyle Width="4%" /> | |
| </telerik:GridBoundColumn> | |
| <telerik:GridBoundColumn | |
| DataType = "System.String" | |
| Display = "true" | |
| HeaderText = "Message" | |
| UniqueName = "Message" | |
| DataField = "Message" | |
| > | |
| <HeaderStyle Width="27%" /> | |
| </telerik:GridBoundColumn> | |
| <telerik:GridBoundColumn | |
| DataType = "System.String" | |
| Display = "true" | |
| HeaderText = "MetaData" | |
| UniqueName = "MetaData" | |
| DataField = "MetaData" | |
| > | |
| <HeaderStyle Width="0px" /> | |
| </telerik:GridBoundColumn> | |
| <telerik:GridBoundColumn | |
| DataType = "System.String" | |
| Display = "true" | |
| HeaderText = "Variables" | |
| UniqueName = "Variables" | |
| DataField = "Variables" | |
| > | |
| <HeaderStyle Width="0px" /> | |
| </telerik:GridBoundColumn> | |
| <telerik:GridBoundColumn | |
| DataType = "System.String" | |
| Display = "true" | |
| HeaderText = "Flags" | |
| UniqueName = "Flags" | |
| DataField = "Flags" | |
| > | |
| <HeaderStyle Width="0px" /> | |
| </telerik:GridBoundColumn> | |
| <telerik:GridBoundColumn | |
| DataType = "System.String" | |
| Display = "true" | |
| HeaderText = "OrgValue" | |
| UniqueName = "OrgValue" | |
| DataField = "OrgValue" | |
| > | |
| <HeaderStyle Width="0px" /> | |
| </telerik:GridBoundColumn> | |
| </Columns> | |
| </MasterTableView> | |
| <HeaderStyle Font-Bold="True" /> | |
| <ClientSettings AllowColumnsReorder = "True" | |
| ReorderColumnsOnClient = "True" | |
| AllowKeyboardNavigation = "True" | |
| Selecting-AllowRowSelect = "True" > | |
| <Selecting AllowRowSelect ="True" /> | |
| <ClientEvents OnRowSelected = "RadGridFieldsOnRowSelect" /> | |
| <ClientEvents OnGridCreated = "RadGridFieldsOnGridCreated" /> | |
| <ClientEvents OnRowSelected = "RadGridFieldsOnRowSelect"/> | |
| <Resizing AllowColumnResize ="True" allowrowresize="True" /> | |
| </ClientSettings> | |
| <FilterMenu EnableTheming="True"> | |
| <CollapseAnimation Duration="200" Type="OutQuint" /> | |
| </FilterMenu> | |
| </telerik:RadGrid> | |
| </ContentTemplate> | |
| </asp:UpdatePanel> | |
| </div> | |
| <div id="div1" style="width:100%; height:60px; border: solid 1px black">> | |
| <asp:UpdatePanel ID="UpdatePanel1" runat="server"> | |
| <ContentTemplate> | |
| <asp:Button runat="server" id="ButtonCallback" Text="Callback" onclick="ButtonCallback_Click" /> | |
| | |
| <input id="ButtonChangeGridContent" onclick="return ButtonChangeGridContent_onclick()" type="button" value="Change Grid Content" /> | |
| <asp:TextBox ID="TextBox1" runat="server" BorderStyle="Groove" Height="22px" Width="207px"></asp:TextBox> | |
| </ContentTemplate> | |
| </asp:UpdatePanel> | |
| <br /> | |
| <asp:Button ID="ButtonPostBack" runat="server" Text="PostBack" onclick="ButtonPostBack_Click" /> | |
| </div> | |
| </div> | |
| </form> | |
| </body> | |
| </html> | |
| using System; | |
| using System.Data; | |
| namespace WebAppTelerikGridProblem | |
| { | |
| public partial class _Default : System.Web.UI.Page | |
| { | |
| protected void Page_Load( object sender, EventArgs e ) | |
| { | |
| if ( !IsPostBack ) | |
| { | |
| RadGridFieldView.DataSource = TFields; | |
| RadGridFieldView.DataBind(); | |
| //[TEST] | |
| // test TFields of correct behaivour | |
| TFields.Rows[2]["Value"] = "CCCCCC"; | |
| string sValue1 = TFields.Rows[2]["Value"].ToString(); | |
| TFields.AcceptChanges(); | |
| //[TEST] | |
| string sValue2 = TFields.Rows[2]["Value"].ToString(); | |
| if ( sValue2 != "CCCCCC") | |
| throw new Exception( "Changes on serverside not processed!" ); | |
| } | |
| } | |
| #region --- Table for Grid data ---------------------- | |
| /// <summary> | |
| /// Table for binding data to grid with 3 rows | |
| /// </summary> | |
| /// <value></value> | |
| public DataTable TFields | |
| { | |
| get | |
| { | |
| if( a_tbFields == null ) | |
| { | |
| a_tbFields = new DataTable("TESTTABLE"); | |
| a_tbFields.Columns.Add( "ID", System.Type.GetType( "System.String" ) ); //PrimKey | |
| a_tbFields.Columns.Add( "Name", System.Type.GetType( "System.String" ) ); | |
| a_tbFields.Columns.Add( "Value", System.Type.GetType( "System.String" ) ); | |
| a_tbFields.Columns.Add( "State", System.Type.GetType( "System.String" ) ); | |
| a_tbFields.Columns.Add( "Message", System.Type.GetType( "System.String" ) ); | |
| a_tbFields.Columns.Add( "MetaData", System.Type.GetType( "System.String" ) ); | |
| a_tbFields.Columns.Add( "Variables", System.Type.GetType( "System.String" ) ); | |
| a_tbFields.Columns.Add( "OrgValue", System.Type.GetType( "System.String" ) ); | |
| DataColumn[] columPrimKey = new DataColumn[1]; | |
| columPrimKey[0] = a_tbFields.Columns["ID"]; | |
| a_tbFields.PrimaryKey = columPrimKey; | |
| DataRow dr = a_tbFields.NewRow(); | |
| dr["ID"] = NextPrimKey.ToString(); | |
| dr["Name"] = "N1111"; | |
| dr["Value"] = "V1111"; | |
| dr["State"] = "S1111"; | |
| dr["Message"] = "M1111"; | |
| dr["MetaData"] = "W1111"; | |
| dr["Variables"] = "V1111"; | |
| dr["OrgValue"] = "O1111"; | |
| TFields.Rows.Add( dr ); | |
| dr = a_tbFields.NewRow(); | |
| dr["ID"] = NextPrimKey.ToString(); | |
| dr["Name"] = "N2222"; | |
| dr["Value"] = "V2222"; | |
| dr["State"] = "S2222"; | |
| dr["Message"] = "M2222"; | |
| dr["MetaData"] = "W2222"; | |
| dr["Variables"] = "V2222"; | |
| dr["OrgValue"] = "O2222"; | |
| TFields.Rows.Add( dr ); | |
| dr = a_tbFields.NewRow(); | |
| dr["ID"] = NextPrimKey.ToString(); | |
| dr["Name"] = "N3333"; | |
| dr["Value"] = "V3333"; | |
| dr["State"] = "S3333"; | |
| dr["Message"] = "M3333"; | |
| dr["MetaData"] = "W3333"; | |
| dr["Variables"] = "V3333"; | |
| dr["OrgValue"] = "O3333"; | |
| TFields.Rows.Add( dr ); | |
| } | |
| return a_tbFields; | |
| } | |
| } | |
| private DataTable a_tbFields = null; | |
| #endregion | |
| /// <summary> | |
| /// artifical Primkey for Table | |
| /// </summary> | |
| public int NextPrimKey | |
| { | |
| set { a_oNextPrimKey = value; } | |
| get { return a_oNextPrimKey++; } | |
| } | |
| private int a_oNextPrimKey = 0; | |
| //[TEST] | |
| protected void ButtonCallback_Click( object sender, EventArgs e ) | |
| { | |
| TFields.AcceptChanges(); | |
| RadGridFieldView.Rebind(); //has no effekt | |
| string sValue = TFields.Rows[0]["Value"].ToString(); | |
| if( sValue != "AAAAA" ) | |
| throw new Exception( "Changes on clientside per javascript not processed!" ); | |
| string sValue2 = TFields.Rows[1]["Value"].ToString(); | |
| if( sValue2 != "BBBB" ) | |
| throw new Exception( "Changes on clientside per javascript not processed!" ); | |
| } | |
| //[TEST] | |
| protected void ButtonPostBack_Click( object sender, EventArgs e ) | |
| { | |
| RadGridFieldView.Rebind(); //has no effekt | |
| TFields.AcceptChanges(); | |
| string sValue = TFields.Rows[0]["Value"].ToString(); | |
| if( sValue != "AAAAA" ) | |
| throw new Exception( "Changes on clientside per javascript not processed!" ); | |
| string sValue2 = TFields.Rows[1]["Value"].ToString(); | |
| if( sValue2 != "BBBB" ) | |
| throw new Exception( "Changes on clientside per javascript not processed!" ); | |
| } | |
| } | |
| } | |
Thank you for your help
Martin Glas
3 Answers, 1 is accepted
0
Hello Martin,
Thank you contacting us.
To find a solution for your problem you have to use different approach. You can try to use RadAjaxManager to start an ajax request and track the changed data in the grid using custom JavaScript. Please refer to our examples to see possible ways of tracking changed data in RadGrid:
http://demos.telerik.com/ASPNET/Prometheus/Grid/Examples/DataEditing/EditOnDblClick/DefaultCS.aspx
http://demos.telerik.com/ASPNET/Prometheus/Grid/Examples/Programming/WebGrid/DefaultCS.aspx
Additionally, consider using advanced binding through the NeedDataSource event of the grid instead of simple binding with DataBind() calls.
Best regards,
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Thank you contacting us.
To find a solution for your problem you have to use different approach. You can try to use RadAjaxManager to start an ajax request and track the changed data in the grid using custom JavaScript. Please refer to our examples to see possible ways of tracking changed data in RadGrid:
http://demos.telerik.com/ASPNET/Prometheus/Grid/Examples/DataEditing/EditOnDblClick/DefaultCS.aspx
http://demos.telerik.com/ASPNET/Prometheus/Grid/Examples/Programming/WebGrid/DefaultCS.aspx
Additionally, consider using advanced binding through the NeedDataSource event of the grid instead of simple binding with DataBind() calls.
Let me know if you need additional directions/assistance.
Best regards,
Georgi
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Sean
Top achievements
Rank 1
Rank 1
answered on 07 Dec 2008, 05:05 AM
I'm having the exact same issue.
The biggest problem with all of those examples is that they apparently make use of the 'SessionDataSource' to persist changes, a concept which, frankly, I'm horrified to see even suggested as a solution. Are there any examples which show retrieving modified data on the server? Our 'ItemUpdated' or 'ItemInserted' events never fire, but that wouldn't matter if we could access the modified data during the 'ItemCommand' events.
So what we should be doing is tracking user manipulations client-side via some mechanism, hidden fields etc, and then on the 'ItemCommand' event after the UI update we need to read the values back and update our local datastores before the next 'NeedDataSource' event resets the UI data?
0
Hi Sean,
Please refer to these online demos which implements server-side updates/inserts:
http://demos.telerik.com/aspnet-ajax/Grid/Examples/DataEditing/UserControlEditForm/DefaultCS.aspx
http://demos.telerik.com/aspnet-ajax/Grid/Examples/DataEditing/TemplateFormUpdate/DefaultCS.aspx
Events like ItemUpdated, ItemInserted, ItemDeleted are raised only when you have automatic data-editing operations. When you are using Advanced data-binding with NeedDataSource event handling, you should handle ItemCommand or UpdatedCommand/InsertCommand/DeleteCommand to achieve insert/update/delete operations on the server.
In addition, you can see some solution for persisting client-side changes here:
http://msdn.microsoft.com/en-us/library/aa720409(VS.71).aspx
Best regards,
Georgi Krustev
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Please refer to these online demos which implements server-side updates/inserts:
http://demos.telerik.com/aspnet-ajax/Grid/Examples/DataEditing/UserControlEditForm/DefaultCS.aspx
http://demos.telerik.com/aspnet-ajax/Grid/Examples/DataEditing/TemplateFormUpdate/DefaultCS.aspx
Events like ItemUpdated, ItemInserted, ItemDeleted are raised only when you have automatic data-editing operations. When you are using Advanced data-binding with NeedDataSource event handling, you should handle ItemCommand or UpdatedCommand/InsertCommand/DeleteCommand to achieve insert/update/delete operations on the server.
In addition, you can see some solution for persisting client-side changes here:
http://msdn.microsoft.com/en-us/library/aa720409(VS.71).aspx
Best regards,
Georgi Krustev
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.