RadGrid双击row编辑更新

可能你想讓用戶雙擊item就進入edit模式。
這章就是告訴大家 如何使得雙擊row進入row的編輯模式，儅用戶點擊其他行的時候更新row,而且彈出一個confirm框。

下面的例子使用了RadGrid.AjaxRequest() ， OnRowClick ， onrowdblclick 和grid裏面inputs的onchange事件
[ASPX]

<script type="text/javascript">
          <!--
          var HasChanges, inputs, lastChanged, editedRow;

         function RowClick(index)
          {
             if ((this.Rows[index].ItemType == "Item" || this.Rows[index].ItemType == "AlternatingItem"))
              {
                 if(editedRow != null && HasChanges)
                  {
                     if(confirm("Update changes?"))
                      {
                          HasChanges = false;
   window["<%= RadGrid1.ClientID %>"].AjaxRequest("<%= RadGrid1.UniqueID %>", "Update:" + editedRow.RealIndex);
                      }
                     else
                      {
                          HasChanges = false;
                      }
                  }
              }
          }

         function RowDblClick(index)
          {
             if (this.Rows[index].ItemType == "Item" || this.Rows[index].ItemType == "AlternatingItem")
              {
                 if(editedRow && HasChanges)
                  {
                     if(confirm("Update changes?"))
                      {
                          HasChanges = false;
 window["<%= RadGrid1.ClientID %>"].AjaxRequest("<%= RadGrid1.UniqueID %>",  "Update:" + editedRow.RealIndex);
                      }
                     else
                      {
                          HasChanges = false;
                      }
                  }

 window["<%= RadGrid1.ClientID %>"].AjaxRequest("<%= RadGrid1.UniqueID %>",  "Edit:" + this.Rows[index].RealIndex);
                  editedRow = this.Rows[index];
              }
          }

         function RowCreated(row)
          {
             if(row.ItemType == "EditItem")
              {
                  inputs = row.Control.getElementsByTagName("input");
                 for (var i = 0; i < inputs.length;i++)
                  {
                      inputs[i].onchange = TrackChanges;
                  }
                  inputs[0].focus();
              }
          }

         function RequestStart(e)
          {
              var canRequest = true;
             if (HasChanges)
              {
                  canRequest = confirm("Cancel changes?");
              }

             if(canRequest)
              {
                  HasChanges = false;
                 return true;
              }
             else
              {
                  lastChanged. select();
                 return false;
              }
          }

         function TrackChanges(e)
          {
              lastChanged = GetCurrentElement(e);
              HasChanges = true;
          }

         function GetCurrentElement(e)
          {
             if(!e)
                  var e = window.event;

             if (e.srcElement)
              {
                 return e.srcElement;
              }

             if(e.target)
              {
                 return e.target;
              }
          }
          -->
          </script>
          <!-- end of custom head section -->
      </head>
        
    <radg:radgrid id="RadGrid1" Width="95%" cssclass="RadGrid" EnableAjax="true" allowsorting="True"
        pagesize="20" GridLines="None" allowpaging="True" runat="server">
        <headerstyle cssclass="GridHeader"/>
        <pagerstyle mode="NumericPages" cssclass="GridPager" Height="18px"/>
        <itemstyle cssclass="GridRow" Height="20px"/>
        <alternatingitemstyle cssclass="GridRow" Height="20px"/>
        <mastertableview editmode="InPlace" cssclass="MasterTable" Width="100%"/>
        <clientsettings>
             <clientevents onrequeststart="RequestStart" OnRowClick="RowClick" onrowdblclick="RowDblClick"
                    onrowcreated= "RowCreated"></clientevents>
              </clientsettings>
    </radg:radgrid>
    <asp:label id="Label1" Runat="server"></asp:label>

And in the code-behind:
[C#]

private void InitializeComponent()
{
this.RadGrid1.NeedDataSource += new Telerik.WebControls.GridNeedDataSourceEventHandler(this.RadGrid1_NeedDataSource);
this.RadGrid1.ColumnCreated += new Telerik.WebControls.GridColumnCreatedEventHandler(this.RadGrid1_ColumnCreated);
this.Load += new EventHandler(this.Page_Load);
}

protected System.Web.UI.WebControls.Label Label1;
protected Telerik.WebControls.RadGrid RadGrid1;

protected void Page_Load(object sender, System.EventArgs e)
{
string clientExecute = string.Format("document.getElementById('{0}').innerHTML = '';", this.Label1.ClientID);
this.RadGrid1.ClientSettings.ClientEvents.OnGridCreated = clientExecute;
}

private void RadGrid1_NeedDataSource(object source, Telerik.WebControls.GridNeedDataSourceEventArgs e)
{
RadGrid1.DataSource = OrderDetails;
}

private DataTable OrderDetails
{
get
{
  if (this.Session["OrderDetails"] != null)
    {
   return (DataTable)this.Session["OrderDetails"];
    }

    DataTable res = DataSourceHelperCS.GetDataTable("SELECT * FROM [Order Details]");
    this.Session["OrderDetails"] = res;
  return res;
}
}

protected override void RaisePostBackEvent(IPostBackEventHandler sourceControl, string eventArgument)
{
base.RaisePostBackEvent(sourceControl, eventArgument);
if (sourceControl is RadGrid)
{
    string[] postBackEventArgumentData = eventArgument.Split(':');
    switch (postBackEventArgumentData[0])
    {
   case "Edit":
     {
 ((RadGrid1.MasterTableView.Controls[0] as Table).Rows[int.Parse(postBackEventArgumentData[1])] as GridItem).Edit = true;
      RadGrid1.Rebind();
      break;
     }
   case "Update":
     {
GridItem item = ((RadGrid1.MasterTableView.Controls[0] as Table).Rows[int.Parse(postBackEventArgumentData[1])] as GridItem);
      UpdateItem(item);
      RadGrid1.Rebind();
      break;
     }
    }
}
}

private void RadGrid1_ColumnCreated(object sender, Telerik.WebControls.GridColumnCreatedEventArgs e)
{
if (e.Column is GridBoundColumn)
{
  if ((e.Column as GridBoundColumn).DataField == "OrderID" || (e.Column as GridBoundColumn).DataField == "ProductID")
    {
     (e.Column as GridBoundColumn).ReadOnly = true;
     e.Column.HeaderStyle.Width = Unit.Pixel(60);
    }
  else
    {
     e.Column.HeaderStyle.Width = Unit.Pixel(150);
    }
}
}

private void UpdateItem(GridItem item)
{
GridEditableItem editedItem = item as GridEditableItem;
DataTable ordersTable = this.OrderDetails;

//Locate the changed row in the DataSource
DataRow[] changedRows = ordersTable.Select( "OrderID = " + editedItem["OrderID"].Text + " AND " + " ProductID = " +
editedItem["ProductID"].Text );

string labelID = this.Label1.ClientID;
string clientExecute = string.Format("document.getElementById('{0}').innerHTML = '{1}';", labelID, "");

if (changedRows.Length != 1)
{
    clientExecute = string.Format("document.getElementById('{0}').innerHTML = '{1}';",
     labelID, "Unbale to locate the Order for updating.");

    this.RadGrid1.ClientSettings.ClientEvents.OnGridCreated = clientExecute;
  return;
}

//Update new values
Hashtable newValues = new Hashtable();
//The GridTableView will fill the values from all editable columns in the hash
item.OwnerTableView.ExtractValuesFromItem(newValues, editedItem);

DataRow changedRow = changedRows[0];
changedRow.BeginEdit();
try
{
    foreach( DictionaryEntry entry in newValues )
    {
     changedRow[(string)entry.Key] = entry.Value;
    }
    changedRow.EndEdit();
}
catch( Exception ex )
{
    changedRow.CancelEdit();
    //In AJAX mode this will update the corresponding label text, client-side:
    clientExecute = string.Format("document.getElementById('{0}').innerHTML = '{1}';",
labelID, Server.HtmlEncode("Unable to update Orders. Reason: " + ex.Message).Replace("'", "'").Replace("\r\n", "<br />"));

    this.RadGrid1.ClientSettings.ClientEvents.OnGridCreated = clientExecute;
  return;
}

//Code for updating the database can go here
clientExecute = string.Format("document.getElementById('{0}').innerHTML = '{1}';",
    labelID, "Order " + changedRow["OrderID"] + ", ProductID " + changedRow["ProductID"] + " updated");

this.RadGrid1.ClientSettings.ClientEvents.OnGridCreated = clientExecute;
}