Question : Grid inline editing

I am using telerik radgrid and I have this code below that when I hit edit for editing mode it is not displaying whole row in left to right instead it shows all the columns vertically.. How can I fix that? I need all my GridBoundColumns editable textboxes...

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:



<radG:RadGrid ID="RadGrid1" Skin="Inox" GridLines="None" EnableAJAX="true" runat="server" AllowAutomaticDeletes="True" AllowAutomaticInserts="True" Width="80%" PageSize="20"
            AllowAutomaticUpdates="True"  AutoGenerateColumns="False" DataSourceID="SessionDataSource1"
            OnItemUpdated="RadGrid1_ItemUpdated" OnItemDeleted="RadGrid1_ItemDeleted" OnItemInserted="RadGrid1_ItemInserted" ShowStatusBar="true" >
         
            
            <MasterTableView Width="100%" CommandItemDisplay="TopAndBottom"  DataSourceID="SessionDataSource1" HorizontalAlign="NotSet" AutoGenerateColumns="False">
                <Columns>
                    <radg:GridEditCommandColumn ButtonType="ImageButton" UpdateImageUrl="..\Images\dots.gif" 
                    EditImageUrl="..\Images\Edit.gif" InsertImageUrl="..\images\equal.gif" 
                    CancelImageUrl="..\Images\on.gif" UniqueName="EditCommandColumn">
                        <HeaderStyle Width="30px" /> 
                        <ItemStyle />
                    </radg:GridEditCommandColumn>                  
                  
                                    
                    
                    <radG:GridBoundColumn DataField="displayName" HeaderText="Name"
                        SortExpression="displayName" UniqueName="displayName" >                       
                    </radG:GridBoundColumn>
                    
                    <radG:GridBoundColumn DataField="loginPassword" HeaderText="Password" SortExpression="loginPassword"
                        UniqueName="loginPassword">
                    </radG:GridBoundColumn>                    
                   
                    <radG:GridBoundColumn DataField="lastLogged" HeaderText="Last Logged" SortExpression="lastLogged"
                        UniqueName="lastLogged" DataFormatString="{0:d}">                       
                    </radG:GridBoundColumn>
                    
                   
                    <radG:GridButtonColumn ConfirmText="Delete this product?" ButtonType="ImageButton" ImageUrl="..\Images\Delete.gif" CommandName="Delete" Text="Delete" UniqueName="DeleteColumn">
                        <HeaderStyle Width="20px" />
                        <ItemStyle HorizontalAlign="Center"  />
                    </radG:GridButtonColumn>
                  
                </Columns>
                
                <EditFormSettings>
                    <FormTableItemStyle Wrap="False"></FormTableItemStyle>
                        <FormCaptionStyle ></FormCaptionStyle>
                        <FormMainTableStyle GridLines="Horizontal" CellSpacing="0" CellPadding="3" BackColor="White" Width="100%" />
                        <FormTableStyle CellSpacing="0" CellPadding="2"  Height="110px"
                            BackColor="White" />
                        <FormTableAlternatingItemStyle Wrap="False"></FormTableAlternatingItemStyle>
                        <EditColumn ButtonType="ImageButton" UpdateImageUrl="..\Images\dots.gif" EditImageUrl="..\Images\Edit.gif" InsertImageUrl="..\Images\equal.gif" CancelImageUrl="..\Images\on.gif" InsertText="Insert Order" UpdateText="Update record" UniqueName="EditCommandColumn1" CancelText="Cancel edit"></EditColumn>
                        <FormTableButtonRowStyle HorizontalAlign="Right" ></FormTableButtonRowStyle>
                </EditFormSettings>
                
            </MasterTableView> 
        </radG:RadGrid><br />
      
        <asp:SqlDataSource ID="SessionDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:mystring %>"
            SelectCommand="myspcustomer" SelectCommandType="StoredProcedure">
            
            <SelectParameters>
                <asp:Parameter Name="customerID" Type="Int32" DefaultValue = "1"/>
            </SelectParameters>
      
        </asp:SqlDataSource>

Answer : Grid inline editing

------------------------------------C# Code---------------------------------
using System;
using System.Collections;
using System.Data;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.QuickStart;
using Telerik.QuickStart.Grid;
using Telerik.WebControls;

namespace Telerik.GridExamplesCSharp.AJAX.EditOnDblClick
{
public abstract class DefaultCS : XhtmlPage
{
#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: This call is required by the ASP.NET Web Form Designer.
//
InitializeComponent();
base.OnInit(e);
}

/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>
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);
}
#endregion

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);
item.Edit = false;
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;
}

}

}
------------------------------ASPX Code------------------------------
<%@ Page Language="c#" AutoEventWireup="false" Codebehind="DefaultCS.aspx.cs" Inherits="Telerik.GridExamplesCSharp.AJAX.EditOnDblClick.DefaultCS" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.QuickStart" Assembly="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" TagName="Header" Src="~/Common/Header.ascx" %>
<%@ Register TagPrefix="telerik" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
<%@ Register TagPrefix="telerik" TagName="Footer" Src="~/Common/Footer.ascx" %>
<%@ Register TagPrefix="radG" Namespace="Telerik.WebControls" Assembly="RadGrid" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<telerik:headtag runat="server" id="Headtag2"></telerik:headtag>

<script type="text/javascript">

</script>

</head>
<body class="BODY">
<form runat="server" id="mainForm" method="post" style="WIDTH:100%">
<telerik:header runat="server" id="Header1" navigationlanguage="CS"></telerik:header>

<radg:radgrid id="RadGrid1" Width="97%" skin="WinXP" EnableAJAX="true" ShowStatusBar="true" allowsorting="True"
pagesize="20" GridLines="None" allowpaging="True" runat="server">
<pagerstyle mode="NumericPages"/>
<mastertableview editmode="InPlace" Width="100%"/>
<clientsettings>
<clientevents onrequeststart="RequestStart" OnRowClick="RowClick" onrowdblclick="RowDblClick" onrowcreated="RowCreated"></clientevents>
</clientsettings>
</radg:radgrid>
<br />
<asp:label id="Label1" Runat="server"></asp:label>

<telerik:footer runat="server" id="Footer1"></telerik:footer>
</form>
</body>
</html>

You may want to allow the user to force grid item in edit mode by simply double-clicking the respective item (an easy and intuitive approach). This demo illustrates how to switch a row in edit mode by double-clicking an arbitrary grid item and how to update this row when the user clicks another row in the grid. Furthermore, a user-friendly confirm dialog will be displayed to prompt whether the operation should be propagated or not.
The example uses RadGridClientObject.AjaxRequest() calls (wiring the RowClick and RowDblClick events) and the onchange event of the inputs in the grid rows used for editing (the handler for the onchange event is assigned in the RowCreated handler of the grid).

Additional editing tips and tricks (for example how to perform batch updates) you can find in the How-to subchapter from the Insert/Update/Delete records section in the product's online help:
How-to's
using System;
using System.Collections;
using System.Data;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.QuickStart;
using Telerik.QuickStart.Grid;
using Telerik.WebControls;

namespace Telerik.GridExamplesCSharp.AJAX.EditOnDblClick
{
public abstract class DefaultCS : XhtmlPage
{
#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: This call is required by the ASP.NET Web Form Designer.
//
InitializeComponent();
base.OnInit(e);
}

/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>
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);
}
#endregion

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);
item.Edit = false;
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;
}

}

}

<%@ Page Language="c#" AutoEventWireup="false" Codebehind="DefaultCS.aspx.cs" Inherits="Telerik.GridExamplesCSharp.AJAX.EditOnDblClick.DefaultCS" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.QuickStart" Assembly="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" TagName="Header" Src="~/Common/Header.ascx" %>
<%@ Register TagPrefix="telerik" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
<%@ Register TagPrefix="telerik" TagName="Footer" Src="~/Common/Footer.ascx" %>
<%@ Register TagPrefix="radG" Namespace="Telerik.WebControls" Assembly="RadGrid" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<telerik:headtag runat="server" id="Headtag2"></telerik:headtag>

<script type="text/javascript">

</script>

</head>
<body class="BODY">
<form runat="server" id="mainForm" method="post" style="WIDTH:100%">
<telerik:header runat="server" id="Header1" navigationlanguage="CS"></telerik:header>

<radg:radgrid id="RadGrid1" Width="97%" skin="WinXP" EnableAJAX="true" ShowStatusBar="true" allowsorting="True"
pagesize="20" GridLines="None" allowpaging="True" runat="server">
<pagerstyle mode="NumericPages"/>
<mastertableview editmode="InPlace" Width="100%"/>
<clientsettings>
<clientevents onrequeststart="RequestStart" OnRowClick="RowClick" onrowdblclick="RowDblClick" onrowcreated="RowCreated"></clientevents>
</clientsettings>
</radg:radgrid>
<br />
<asp:label id="Label1" Runat="server"></asp:label>

<telerik:footer runat="server" id="Footer1"></telerik:footer>
</form>
</body>
</html>

Hope this help