可能你想讓用戶雙擊item就進入edit模式。
這章就是告訴大家 如何使得雙擊row進入row的編輯模式,儅用戶點擊其他行的時候更新row,而且彈出一個confirm框。
下面的例子使用了RadGrid.AjaxRequest() , OnRowClick , onrowdblclick 和grid裏面inputs的onchange事件
[ASPX]
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<script type="text/javascript">![](https://www.cnblogs.com/Images/dot.gif)
<!--
var HasChanges, inputs, lastChanged, editedRow;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
function RowClick(index)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
if ((this.Rows[index].ItemType == "Item" || this.Rows[index].ItemType == "AlternatingItem"))
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
if(editedRow != null && HasChanges)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
if(confirm("Update changes?"))
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
HasChanges = false;
window["<%= RadGrid1.ClientID %>"].AjaxRequest("<%= RadGrid1.UniqueID %>", "Update:" + editedRow.RealIndex);
}
else
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
HasChanges = false;
}
}
}
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
function RowDblClick(index)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
if (this.Rows[index].ItemType == "Item" || this.Rows[index].ItemType == "AlternatingItem")
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
if(editedRow && HasChanges)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
if(confirm("Update changes?"))
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
HasChanges = false;
window["<%= RadGrid1.ClientID %>"].AjaxRequest("<%= RadGrid1.UniqueID %>", "Update:" + editedRow.RealIndex);
}
else
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
HasChanges = false;
}
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
window["<%= RadGrid1.ClientID %>"].AjaxRequest("<%= RadGrid1.UniqueID %>", "Edit:" + this.Rows[index].RealIndex);
editedRow = this.Rows[index];
}
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
function RowCreated(row)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
if(row.ItemType == "EditItem")
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
inputs = row.Control.getElementsByTagName("input");
for (var i = 0; i < inputs.length;i++)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
inputs[i].onchange = TrackChanges;
}
inputs[0].focus();
}
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
function RequestStart(e)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
var canRequest = true;
if (HasChanges)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
canRequest = confirm("Cancel changes?");
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
if(canRequest)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
HasChanges = false;
return true;
}
else
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
lastChanged. select();
return false;
}
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
function TrackChanges(e)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
lastChanged = GetCurrentElement(e);
HasChanges = true;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
function GetCurrentElement(e)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
if(!e)
var e = window.event;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
if (e.srcElement)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
return e.srcElement;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
if(e.target)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
return e.target;
}
}
-->
</script>
<!-- end of custom head section -->
</head>
![](https://www.cnblogs.com/Images/dot.gif)
<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()
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
{
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);
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
protected System.Web.UI.WebControls.Label Label1;
protected Telerik.WebControls.RadGrid RadGrid1;
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
protected void Page_Load(object sender, System.EventArgs e)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
{
string clientExecute = string.Format("document.getElementById('{0}').innerHTML = '';", this.Label1.ClientID);
this.RadGrid1.ClientSettings.ClientEvents.OnGridCreated = clientExecute;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
private void RadGrid1_NeedDataSource(object source, Telerik.WebControls.GridNeedDataSourceEventArgs e)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
{
RadGrid1.DataSource = OrderDetails;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
private DataTable OrderDetails
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
{
get
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{
if (this.Session["OrderDetails"] != null)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
return (DataTable)this.Session["OrderDetails"];
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
DataTable res = DataSourceHelperCS.GetDataTable("SELECT * FROM [Order Details]");
this.Session["OrderDetails"] = res;
return res;
}
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
protected override void RaisePostBackEvent(IPostBackEventHandler sourceControl, string eventArgument)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
{
base.RaisePostBackEvent(sourceControl, eventArgument);
if (sourceControl is RadGrid)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{
string[] postBackEventArgumentData = eventArgument.Split(':');
switch (postBackEventArgumentData[0])
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
case "Edit":
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
((RadGrid1.MasterTableView.Controls[0] as Table).Rows[int.Parse(postBackEventArgumentData[1])] as GridItem).Edit = true;
RadGrid1.Rebind();
break;
}
case "Update":
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
GridItem item = ((RadGrid1.MasterTableView.Controls[0] as Table).Rows[int.Parse(postBackEventArgumentData[1])] as GridItem);
UpdateItem(item);
RadGrid1.Rebind();
break;
}
}
}
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
private void RadGrid1_ColumnCreated(object sender, Telerik.WebControls.GridColumnCreatedEventArgs e)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
{
if (e.Column is GridBoundColumn)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{
if ((e.Column as GridBoundColumn).DataField == "OrderID" || (e.Column as GridBoundColumn).DataField == "ProductID")
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
(e.Column as GridBoundColumn).ReadOnly = true;
e.Column.HeaderStyle.Width = Unit.Pixel(60);
}
else
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
e.Column.HeaderStyle.Width = Unit.Pixel(150);
}
}
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
private void UpdateItem(GridItem item)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
{
GridEditableItem editedItem = item as GridEditableItem;
DataTable ordersTable = this.OrderDetails;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
//Locate the changed row in the DataSource
DataRow[] changedRows = ordersTable.Select( "OrderID = " + editedItem["OrderID"].Text + " AND " + " ProductID = " +
editedItem["ProductID"].Text );
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
string labelID = this.Label1.ClientID;
string clientExecute = string.Format("document.getElementById('{0}').innerHTML = '{1}';", labelID, "");
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
if (changedRows.Length != 1)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{
clientExecute = string.Format("document.getElementById('{0}').innerHTML = '{1}';",
labelID, "Unbale to locate the Order for updating.");
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
this.RadGrid1.ClientSettings.ClientEvents.OnGridCreated = clientExecute;
return;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
//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);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
DataRow changedRow = changedRows[0];
changedRow.BeginEdit();
try
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{
foreach( DictionaryEntry entry in newValues )
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
changedRow[(string)entry.Key] = entry.Value;
}
changedRow.EndEdit();
}
catch( Exception ex )
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{
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 />"));
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
this.RadGrid1.ClientSettings.ClientEvents.OnGridCreated = clientExecute;
return;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
//Code for updating the database can go here![](https://www.cnblogs.com/Images/dot.gif)
clientExecute = string.Format("document.getElementById('{0}').innerHTML = '{1}';",
labelID, "Order " + changedRow["OrderID"] + ", ProductID " + changedRow["ProductID"] + " updated");
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
this.RadGrid1.ClientSettings.ClientEvents.OnGridCreated = clientExecute;
}