Here is my code : just change the datasource to northwind database in "GetConnectionString()" method
I'm only able to edit EmployeeID = 2 ... in RadGrid2 ... All other rows can't get edited.
Besides, I'm unable to update the only editable row (EmployeeID = 2) ...
Must I add "NeedDataSource" or something like that for RadGrid2 ?
Any help would be great, because this is a basic thing and I waste a lot of time to figure out how to do with Telerik component ...
Is it possible to have an "EditItemTemplate" instead of all columns spreaded vertically when I click "edit" button ?
| <%@ Page Language="C#" AutoEventWireup="true" CodeFile="RadGridMarche2.aspx.cs" Inherits="RadGridMarche2" %> |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> |
| <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> |
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head> |
| <title></title> |
| <style type="text/css"> |
| .StaticColumn |
| { |
| font-family: Arial,Verdana, Helvetica; |
| font-size: 14px; |
| font-weight: normal; |
| border: none; |
| position: relative; |
| } |
| .RadGrid td{padding:0} |
| .rgExpand |
| { |
| background:url('Images/CollapsedButton.gif') center no-repeat !important; |
| } |
| .rgCollapse |
| { |
| background:url('Images/ExpandedButton.gif') center no-repeat !important; |
| } |
| .RadGrid_Vista tr.DetailRow |
| { |
| background:#ebe4d6; |
| } |
| .DetailTable_Vista |
| { |
| background:#f4ede1; |
| } |
| .RadGrid_Vista .DetailTable_Vista .GridHeader_Vista, |
| .RadGrid_Vista .DetailTable_Vista .ResizeHeader_Vista |
| { |
| padding-top:2px; |
| padding-bottom:2px; |
| background-position:0 -6px; |
| } |
| </style> |
| </head> |
| <body> |
| <form runat="server" id="mainForm" method="post"> |
| <telerik:RadScriptManager ID="RadScriptManager1" runat="server" /> |
| <!-- content start --> |
| <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"> |
| <AjaxSettings> |
| <telerik:AjaxSetting AjaxControlID="RadGrid1"> |
| <UpdatedControls> |
| <telerik:AjaxUpdatedControl ControlID="RadGrid1" /> |
| <telerik:AjaxUpdatedControl ControlID="RadGrid2" /> |
| </UpdatedControls> |
| </telerik:AjaxSetting> |
| </AjaxSettings> |
| </telerik:RadAjaxManager> |
| <!-- DataSourceID="SqlDataSource1" --> |
| <br /> |
| <asp:Label ID="LblRadgrid1_height" runat="server" Width="900px" BackColor="red"></asp:Label> |
| <br /> |
| <table border="0" cellspacing="0" cellpadding="0" style="height:auto;"> |
| <tr> |
| <td style="vertical-align:top;height:auto;"> |
| <telerik:RadGrid ID="RadGrid1" Skin="Vista" OnPreRender="RadGrid1_PreRender" |
| runat="server" DataSourceID="SqlDataSource1" OnColumnCreated="RadGrid1_ColumnCreated" |
| OnItemCreated="RadGrid1_ItemCreated" OnItemDataBound="RadGrid1_ItemDataBound" |
| Width="100%" onselectedindexchanged="RadGrid1_SelectedIndexChanged"> |
| <MasterTableView HierarchyDefaultExpanded="false" EnableNoRecordsTemplate="false" HierarchyLoadMode="ServerBind" AllowSorting="true" Width="800px" |
| DataKeyNames="EmployeeID" ExpandCollapseColumn-ButtonType="ImageButton" ExpandCollapseColumn-Display="true" |
| ExpandCollapseColumn-ExpandImageUrl="Images/CollapsedButton.gif" ExpandCollapseColumn-CollapseImageUrl="Images/ExpandedButton.gif"> |
| <ItemStyle Wrap="false" Width="200px" BackColor="Azure" Height="17px" BorderWidth="1"/> |
| <AlternatingItemStyle Wrap="false" BackColor="BlanchedAlmond" Width="200px" Height="17px" BorderWidth="1"/> |
| <HeaderStyle Wrap="false" Width="1500px" Height="20px"/> |
| <SelfHierarchySettings ParentKeyName="ReportsTo" KeyName="EmployeeID"/> |
| </MasterTableView> |
| <ClientSettings AllowExpandCollapse="true" EnablePostBackOnRowClick="true" EnableRowHoverStyle="true"> |
| <Selecting AllowRowSelect="true" /> |
| </ClientSettings> |
| </telerik:RadGrid> |
| </td> |
| <td style="vertical-align:top;height:100%;"> |
| <table style="vertical-align:top" cellpadding="0" cellspacing="0"> |
| <tr valign="top"> |
| <td valign="top"> |
| <div style="width:800px;overflow:scroll; vertical-align:top;"> |
| <telerik:RadGrid ID="RadGrid2" ShowStatusBar="true" EnableViewState="true" AllowAutomaticUpdates="True" |
| OnItemUpdated="RadGrid2_ItemUpdated" |
| runat="server" AutoGenerateColumns="false" AllowSorting="False" AllowMultiRowSelection="False" Width="800px" GridLines="None"> |
| <MasterTableView ItemStyle-Wrap="false" Name="Employees" DataKeyNames="EmployeeID" > |
| <HeaderStyle Wrap="false" Height="20px"/> |
| <AlternatingItemStyle Height="17px" Width="200px" BackColor="BlanchedAlmond" Wrap="false" /> |
| <ItemStyle Height="17px" Width="100px" BackColor="Azure" Wrap="false" /> |
| <Columns> |
| <telerik:GridBoundColumn SortExpression="EmployeeID" HeaderText="EmployeeID" HeaderButtonType="TextButton" |
| DataField="EmployeeID" UniqueName="EmployeeID" ItemStyle-Height="17px"> |
| </telerik:GridBoundColumn> |
| <telerik:GridBoundColumn SortExpression="LastName" HeaderText="LastName" HeaderButtonType="TextButton" |
| DataField="LastName" UniqueName="LastName" ItemStyle-Height="17px"> |
| </telerik:GridBoundColumn> |
| <telerik:GridBoundColumn SortExpression="FirstName" HeaderText="FirstName" HeaderButtonType="TextButton" |
| DataField="FirstName" UniqueName="FirstName" ItemStyle-Height="17px"> |
| </telerik:GridBoundColumn> |
| <telerik:GridBoundColumn SortExpression="Title" HeaderText="Title" HeaderButtonType="TextButton" |
| DataField="Title" UniqueName="Title" ItemStyle-Height="17px"> |
| </telerik:GridBoundColumn> |
| <telerik:GridBoundColumn SortExpression="ReportsTo" HeaderText="ReportsTo" HeaderButtonType="TextButton" |
| DataField="ReportsTo" UniqueName="ReportsTo" ItemStyle-Height="17px"> |
| </telerik:GridBoundColumn> |
| <telerik:GridEditCommandColumn Display="true" EditImageUrl="Images/ExpandedButton.gif" AutoPostBackOnFilter="true"> |
| </telerik:GridEditCommandColumn> |
| </Columns> |
| </MasterTableView> |
| <clientsettings allowexpandcollapse="false" EnableRowHoverStyle="true"> |
| <Scrolling AllowScroll="false" UseStaticHeaders="true"></Scrolling> |
| </clientsettings> |
| </telerik:RadGrid> |
| </div> |
| </td> |
| </tr> |
| </table> |
| </td> |
| </tr> |
| </table> |
| <asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" |
| ProviderName="System.Data.SqlClient" SelectCommand="SELECT EmployeeID, LastName, FirstName, Title, ReportsTo from Employees" |
| runat="server" UpdateCommand="UPDATE [Employees] SET [LastName] = ?, [Company] = ? [FirstName] = ?, [Title]= ? WHERE [EmployeeID] = ?" |
| OldValuesParameterFormatString="original_{0}" ConflictDetection="CompareAllValues"> |
| <UpdateParameters> |
| <asp:Parameter Name="LastName" Type="String" /> |
| <asp:Parameter Name="FirstName" Type="String" /> |
| <asp:Parameter Name="Title" Type="String" /> |
| <asp:Parameter Name="original_LastName" Type="String" /> |
| <asp:Parameter Name="original_FirstName" Type="String" /> |
| <asp:Parameter Name="original_Title" Type="String" /> |
| </UpdateParameters> |
| </asp:SqlDataSource> |
| <!-- content end --> |
| </form> |
| </body> |
| </html> |
| ----------------------------------- |
| using System; |
| using System.Collections.Generic; |
| using System.Linq; |
| using System.Web; |
| using System.Web.UI; |
| using System.Web.UI.WebControls; |
| using Telerik.Web.UI; |
| using System.Reflection; |
| using System.Data; |
| using System.Data.SqlClient; |
| public partial class RadGridMarche2 : System.Web.UI.Page |
| { |
| public void Page_Load(object sender, EventArgs e) |
| { |
| bindGrid2(); |
| if (Assembly.GetAssembly(typeof(ScriptManager)).FullName.IndexOf("3.5") != -1) |
| { |
| RadGrid1.MasterTableView.FilterExpression = @"it[""ReportsTo""] = Convert.DBNull"; |
| } |
| else |
| { |
| RadGrid1.MasterTableView.FilterExpression = "ReportsTo IS NULL"; |
| } |
| if (RadGrid1.MasterTableView.DetailTables != null) |
| { |
| RadGrid1.MasterTableView.DetailTables[0].AlternatingItemStyle.BackColor = System.Drawing.Color.Azure ; |
| RadGrid1.MasterTableView.DetailTables[0].ItemStyle.BackColor = System.Drawing.Color.BlanchedAlmond; |
| if (RadGrid1.MasterTableView.DetailTables[0].DetailTables[0] != null) |
| { |
| RadGrid1.MasterTableView.DetailTables[0].DetailTables[0].AlternatingItemStyle.BackColor = System.Drawing.Color.Azure; |
| RadGrid1.MasterTableView.DetailTables[0].DetailTables[0].ItemStyle.BackColor = System.Drawing.Color.BlanchedAlmond; |
| } |
| } |
| } |
| public void Page_PreRenderComplete(object sender, EventArgs e) |
| { |
| HideExpandColumnRecursive(RadGrid1.MasterTableView); |
| string ActualNodes = string.Empty; |
| int counterVisibleNodes = 0; |
| foreach (GridDataItem dataItem in RadGrid1.Items) |
| { |
| if (dataItem.Visible) |
| { |
| ActualNodes += dataItem["EmployeeID"].Text + ","; |
| counterVisibleNodes++; |
| } |
| } |
| if (ActualNodes.Length > 0) |
| ActualNodesActualNodes = ActualNodes.Substring(0, ActualNodes.Length - 1); |
| RadGrid2.Controls.Clear(); |
| RadGrid2.DataSource = getDetails(ActualNodes); |
| RadGrid2.DataBind(); |
| if (Session["RadGrid1_SelectedValue"] != null) |
| { |
| for (int m = 0; m < RadGrid2.Items.Count; m++) |
| { |
| if (RadGrid2.Items[m]["EmployeeID"].Text.Equals(Session["RadGrid1_SelectedValue"].ToString())) |
| { |
| RadGrid2.Items[m].Selected = true; |
| break; |
| } |
| } |
| Session.Remove("RadGrid1_SelectedValue"); |
| } |
| } |
| public void HideExpandColumnRecursive(GridTableView tableView) |
| { |
| GridItem[] nestedViewItems = tableView.GetItems(GridItemType.NestedView); |
| foreach (GridNestedViewItem nestedViewItem in nestedViewItems) |
| { |
| foreach (GridTableView nestedView in nestedViewItem.NestedTableViews) |
| { |
| nestedView.Style["border"] = "0"; |
| Button MyExpandCollapseButton = (Button)nestedView.ParentItem.FindControl("MyExpandCollapseButton"); |
| if (nestedView.Items.Count == 0) |
| { |
| if (MyExpandCollapseButton != null) |
| { |
| MyExpandCollapseButton.Style["visibility"] = "hidden"; |
| } |
| nestedViewItem.Visible = false; |
| } |
| else |
| { |
| if (MyExpandCollapseButton != null) |
| { |
| MyExpandCollapseButton.Style.Remove("visibility"); |
| } |
| } |
| if (nestedView.HasDetailTables) |
| { |
| HideExpandColumnRecursive(nestedView); |
| } |
| } |
| } |
| } |
| protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e) |
| { |
| CreateExpandCollapseButton(e.Item, "EmployeeID"); |
| if (e.Item is GridHeaderItem && e.Item.OwnerTableView != RadGrid1.MasterTableView) |
| { |
| e.Item.Style["display"] = "none"; |
| } |
| if (e.Item is GridNestedViewItem) |
| { |
| e.Item.Cells[0].Visible = false; |
| Table table = (Table)e.Item.OwnerTableView.Controls[0]; |
| GridItem prevItem = (GridItem)table.Rows[table.Rows.Count - 1]; |
| // Why -3? We need to skip the NestedViewItem and the preceding DataItem's invisible EditItem |
| if (prevItem.ItemType == GridItemType.AlternatingItem) |
| { |
| e.Item.CssClass = "DetailAltRow"; |
| } |
| else |
| { |
| e.Item.CssClass = "DetailRow"; |
| } |
| /* |
| e.Item.Cells[0].CssClass = "DetailRowCell"; |
| e.Item.Cells[1].CssClass = "DetailRowCell"; |
| */ |
| } |
| } |
| protected void RadGrid1_ColumnCreated(object sender, GridColumnCreatedEventArgs e) |
| { |
| if (e.Column is GridExpandColumn) |
| { |
| e.Column.Visible = false; |
| } |
| else if (e.Column is GridBoundColumn) |
| { |
| e.Column.HeaderStyle.Width = Unit.Pixel(100); |
| } |
| } |
| protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e) |
| { |
| CreateExpandCollapseButton(e.Item, "EmployeeID"); |
| } |
| public void CreateExpandCollapseButton(GridItem item, string columnUniqueName) |
| { |
| if (item is GridDataItem) |
| { |
| if (item.FindControl("MyExpandCollapseButton") == null) |
| { |
| Button button = new Button(); |
| button.Click += new EventHandler(button_Click); |
| button.CommandName = "ExpandCollapse"; |
| button.CssClass = (item.Expanded) ? "rgCollapse" : "rgExpand"; |
| button.ID = "MyExpandCollapseButton"; |
| if (item.OwnerTableView.HierarchyLoadMode == GridChildLoadMode.Client) |
| { |
| string script = String.Format(@"$find(""{0}"")._toggleExpand(this, event); return false;", item.Parent.Parent.ClientID); |
| button.OnClientClick = script; |
| } |
| int level = item.ItemIndexHierarchical.Split(':').Length; |
| if (level > 1) |
| { |
| button.Style["margin-left"] = level + 10 + "px"; |
| button.Style["height"] = "15px"; |
| } |
| TableCell cell = ((GridDataItem)item)[columnUniqueName]; |
| cell.Controls.Add(button); |
| LiteralControl liSpace = new LiteralControl(" "); |
| cell.Controls.Add(liSpace); |
| cell.Controls.Add(new LiteralControl(((GridDataItem)item).GetDataKeyValue(columnUniqueName).ToString())); |
| cell.Style["height"] = "15px"; |
| } |
| } |
| } |
| protected void RadGrid1_PreRender(object sender, EventArgs e) |
| { |
| string ActualNodes = string.Empty; |
| foreach (GridDataItem dataItem in RadGrid1.Items) |
| { |
| if (dataItem.Visible) |
| { |
| ActualNodes += dataItem["EmployeeID"].Text + ","; |
| } |
| } |
| if (ActualNodes.Length > 0) |
| ActualNodesActualNodes = ActualNodes.Substring(0, ActualNodes.Length - 1); |
| RadGrid2.Controls.Clear(); |
| RadGrid2.DataSource = getDetails(ActualNodes); |
| RadGrid2.DataBind(); |
| //Response.Write("<script> alert(" + sTest + ");</script>"); |
| } |
| void button_Click(object sender, EventArgs e) |
| { |
| ((Button)sender).CssClass = (((Button)sender).CssClass == "rgExpand") ? "rgCollapse" : "rgExpand"; |
| LblRadgrid1_height.Text = RadGrid1.Height.Value.ToString(); |
| //Response.Write("<script language='javascript'> document.alert(" + RadGrid1.Height.Value.ToString() + ");</script>"); |
| } |
| private void bindGrid2() |
| { |
| RadGrid2.Controls.Clear(); |
| string initialNodes = string.Empty; |
| for (int m = 0; m < RadGrid1.Items.Count; m++) |
| { |
| if (!RadGrid1.Items[m]["EmployeeID"].Text.ToLower().Equals(" ") && RadGrid1.Items[m].Visible) |
| initialNodes += RadGrid1.Items[m]["EmployeeID"].Text + ","; |
| } |
| if (initialNodes.Length > 0) |
| { |
| RadGrid2.DataSource = getEmployees(initialNodes.Substring(0, initialNodes.Length - 1)); |
| } |
| else |
| RadGrid2.DataSource = getEmployees(""); |
| RadGrid2.DataBind(); |
| } |
| private DataView getEmployees(string initialNodes) |
| { |
| DataSet ds = new DataSet(); |
| string sqlFinal = string.Empty; |
| if (!initialNodes.Equals(string.Empty)) |
| { |
| sqlFinal = "Where EmployeeID in (" + initialNodes + ")"; |
| } |
| using (SqlConnection conn = new SqlConnection()) |
| { |
| conn.ConnectionString = GetConnectionString(); |
| SqlCommand cmd = new SqlCommand("SELECT top 1 [EmployeeID], [LastName], [FirstName], [Title], [ReportsTo] FROM [Employees] " + sqlFinal, conn); |
| conn.Open(); |
| SqlDataAdapter sqlAdapter = new SqlDataAdapter(cmd); |
| sqlAdapter.Fill(ds); |
| } |
| DataView dv = new DataView(ds.Tables[0]); |
| return dv; |
| } |
| private DataTable getChildNodesByID(string ParentID) |
| { |
| DataSet ds = new DataSet(); |
| string sql = "SELECT [EmployeeID], [LastName], [FirstName], [Title], [ReportsTo] FROM [Employees] Where ReportsTo = " + ParentID; |
| using (SqlConnection conn = new SqlConnection()) |
| { |
| conn.ConnectionString = GetConnectionString(); |
| SqlCommand cmd = new SqlCommand(sql, conn); |
| conn.Open(); |
| SqlDataAdapter sqlAdapter = new SqlDataAdapter(cmd); |
| sqlAdapter.Fill(ds); |
| } |
| DataTable dt = new DataTable(); |
| if (ds != null && ds.Tables.Count > 0 && ds.Tables[0].Rows.Count > 0) |
| return ds.Tables[0]; |
| else |
| return null; |
| } |
| private DataView getDetails(string ActualNodes) |
| { |
| DataSet ds = new DataSet(); |
| //string noeuds = ActualNodes.Substring(0, ActualNodes.Length - 1); |
| string[] tabNoeuds = ActualNodes.Split(','); |
| string swhen = " CASE "; |
| for (int i = 0; i < tabNoeuds.Length; i++) |
| { |
| swhen += " WHEN EmployeeID = " + tabNoeuds[i] + " THEN " + (i + 1) + " "; |
| } |
| swhen += " END "; |
| string sql = "SELECT [EmployeeID], [LastName], [FirstName], [Title], [ReportsTo] FROM [Employees] Where EmployeeID in (" + ActualNodes + ")"; |
| sql += " ORDER BY " + swhen; |
| using (SqlConnection conn = new SqlConnection()) |
| { |
| conn.ConnectionString = GetConnectionString(); |
| SqlCommand cmd = new SqlCommand(sql, conn); |
| conn.Open(); |
| SqlDataAdapter sqlAdapter = new SqlDataAdapter(cmd); |
| sqlAdapter.Fill(ds); |
| } |
| DataView dv = new DataView(ds.Tables[0]); |
| return dv; |
| } |
| static private string GetConnectionString() |
| { |
| return "server=STATION00374;database=Northwind;Integrated Security=SSPI;"; |
| } |
| protected void RadGrid1_SelectedIndexChanged(object sender, EventArgs e) |
| { |
| if (Session["RadGrid1_SelectedValue"] != null) |
| Session.Remove("RadGrid1_SelectedValue"); |
| Session["RadGrid1_SelectedValue"] = RadGrid1.SelectedValue.ToString(); |
| } |
| protected void RadGrid2_ItemUpdated(object source, Telerik.Web.UI.GridUpdatedEventArgs e) |
| { |
| string item = getItemName(e.Item.OwnerTableView.Name); |
| string field = getFieldName(e.Item.OwnerTableView.Name); |
| if (e.Exception != null) |
| { |
| e.KeepInEditMode = true; |
| e.ExceptionHandled = true; |
| DisplayMessage(item + " " + e.Item[field].Text + " cannot be updated. Reason: " + e.Exception.Message); |
| } |
| else |
| { |
| DisplayMessage(item + " " + e.Item[field].Text + " updated"); |
| } |
| } |
| private String getItemName(string tableName) |
| { |
| switch (tableName) |
| { |
| case ("Employees"): |
| { |
| return "Employees"; |
| } |
| default: return ""; |
| } |
| } |
| private String getFieldName(string tableName) |
| { |
| switch (tableName) |
| { |
| case ("Employees"): |
| { |
| return "EmployeeID"; |
| } |
| default: return ""; |
| } |
| } |
| private void DisplayMessage(string text) |
| { |
| RadGrid1.Controls.Add(new LiteralControl(string.Format("<span style='color:red'>{0}</span>", text))); |
| } |
| } |