This is a migrated thread and some comments may be shown as answers.

No update of underlying DataTable

3 Answers 78 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Martin
Top achievements
Rank 1
Martin asked on 26 Nov 2008, 12:56 PM
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:
<%@ 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 = '&nbsp;';   
    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"  /> 
          &nbsp;&nbsp;  
          <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

Sort by
0
Georgi Krustev
Telerik team
answered on 27 Nov 2008, 11:22 AM
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.

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
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
Georgi Krustev
Telerik team
answered on 09 Dec 2008, 08:59 AM
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.
Tags
Grid
Asked by
Martin
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
Sean
Top achievements
Rank 1
Share this question
or