Inline editing in RadGrid
In this article we will see the working with the RadGridview. How to bind Radgridview and how to perform inline editing of the
radgridview.we will see insert, update as well as the delete operations on radgrid.
RadGrid is a telerik control i.e. athird party control which is similar to the gridview control of asp.net . Here we will see how to bind a radgrid control from sql database table. Below is the source page code:
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<telerik:RadAjaxManager ID="RadAjaxManger1" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="rgd_inline" EventName="Delete,Edit">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="rgd_inline" LoadingPanelID="RadAjaxLoadingPanel1" />
<telerik:AjaxUpdatedControl ControlID="RadWindowManager1" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />
<telerik:RadGrid ID="rgd_inline" GridLines="None" runat="server" AllowAutomaticDeletes="false"
AllowAutomaticInserts="false" PageSize="5" AllowAutomaticUpdates="false" AllowPaging="True"
AutoGenerateColumns="False" OnItemCommand="rgd_inline_ItemCommand" OnUpdateCommand="rgd_inline_UpdateCommand"
OnItemDataBound="rgd_inline_ItemDataBound">
<PagerStyle Mode="NextPrevAndNumeric" />
<MasterTableView Width="100%" CommandItemDisplay="Top" HorizontalAlign="NotSet" AutoGenerateColumns="False"
CommandItemSettings-ShowRefreshButton="false" EditMode="InPlace" DataKeyNames="Id">
<Columns>
<telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditCommandColumn"
HeaderText="Edit">
</telerik:GridEditCommandColumn>
<telerik:GridBoundColumn DataField="Name" HeaderText="Name" UniqueName="Name" ColumnEditorID=" GridTextBoxColumnEditor1">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Salary" HeaderText="Salary" UniqueName="Salary"
ColumnEditorID=" GridTextBoxColumnEditor2">
</telerik:GridBoundColumn>
<telerik:GridButtonColumn ConfirmText="" ConfirmDialogType="RadWindow" ConfirmTitle="Delete"
ButtonType="ImageButton" CommandName="Delete" Text="Delete" UniqueName="DeleteColumn">
</telerik:GridButtonColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>
<asp:Button ID="Button1" runat="server" Text="Button" />
<telerik:GridTextBoxColumnEditor ID="GridTextBoxColumnEditor1" runat="server" TextBoxStyle-Width="200px" />
<telerik:GridTextBoxColumnEditor ID="GridTextBoxColumnEditor2" runat="server" TextBoxStyle-Width="200px" />
<telerik:RadWindowManager ID="RadWindowManager1" runat="server">
</telerik:RadWindowManager>
</div>Points to be noted:
GridTextBoxColumnEditor is taken seperately for each column. If we have to use dropdownlist we have to take
GridDropDownColumnEditor.
We have set EditMode="InPlace" property of radgrid to performinline editing.
Below is the code of code behind:
public static DataTable dtTable;
public static string connectionString = ConfigurationManager.ConnectionStrings["EmployeeDBConnectionString"].ConnectionString;
public SqlConnection SqlConnection = new SqlConnection(connectionString);
public SqlDataAdapter SqlDataAdapter = new SqlDataAdapter();
public SqlCommand SqlCommand = new SqlCommand();
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
try
{
GridBind();
}
catch (Exception ex)
{
Button1.Text = ex.Message;
}
finally
{
SqlConnection.Close();
}
}
}
protected void rgd_inline_ItemCommand(object sender, Telerik.Web.UI.GridCommandEventArgs e)
{
GridBind();
if (e.CommandName == "Delete")
{
GridDataItem item = (GridDataItem)e.Item;
string Ids = Convert.ToString(item.GetDataKeyValue("Id"));
dtTable = new DataTable();
//Open the SqlConnection
SqlConnection.Open();
//Select Query to populate the RadGrid with data from table Employee.
string selectQuery1 = "delete FROM Employee where Id = " + Ids;
SqlCommand cmd = new SqlCommand(selectQuery1, SqlConnection);
cmd.ExecuteNonQuery();
SqlConnection.Close();
GridBind();
rgd_inline.Rebind();
}
if (e.CommandName == "PerformInsert")
{
GridEditableItem editedItem = e.Item as GridEditableItem;
GridEditManager editMan = editedItem.EditManager;
string name = Convert.ToString(((GridTextBoxColumnEditor)(editMan.GetColumnEditor("Name"))).Text);
string sal = Convert.ToString((((GridTextBoxColumnEditor)editMan.GetColumnEditor("Salary"))).Text);
SqlConnection.Open();
SqlCommand cmd = new SqlCommand("insert into Employee(Name,Salary) values ('" + name + "' , '" + sal + "')", SqlConnection);
cmd.ExecuteNonQuery();
e.Item.OwnerTableView.IsItemInserted = false;
SqlConnection.Close();
GridBind();
}
}
protected void rgd_inline_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
{
if (e.Item is GridEditableItem && e.Item.IsInEditMode)
{
GridEditableItem editItem = (GridEditableItem)e.Item;
TextBox t1 = (TextBox)editItem["Name"].Controls[0];
TextBox t2 = (TextBox)editItem["Salary"].Controls[0];
ImageButton updateBtn = (ImageButton)editItem.FindControl("UpdateButton");
ImageButton cancelBtn = (ImageButton)editItem.FindControl("CancelButton");
}
}
protected void rgd_inline_UpdateCommand(object sender, Telerik.Web.UI.GridCommandEventArgs e)
{
GridEditableItem editedItem = e.Item as GridEditableItem;
GridEditManager editMan = editedItem.EditManager;
int id = Convert.ToInt32(((GridDataItem)e.Item).GetDataKeyValue("Id"));
string name = Convert.ToString(((GridTextBoxColumnEditor)(editMan.GetColumnEditor("Name"))).Text);
string sal = Convert.ToString(((GridTextBoxColumnEditor)(editMan.GetColumnEditor("Salary"))).Text);
SqlConnection.Open();
SqlCommand cmd = new SqlCommand("update Employee set Name = '" + name + "' , Salary = '" + sal + "' where Id = '" + id + "'", SqlConnection);
cmd.ExecuteNonQuery();
rgd_inline.MasterTableView.ClearEditItems();
SqlConnection.Close();
GridBind();
}
private void GridBind()
{
dtTable = new DataTable();
//Open the SqlConnection
SqlConnection.Open();
//Select Query to populate the RadGrid with data from table Employee.
string selectQuery = "SELECT Id,Name,Salary FROM Employee";
SqlDataAdapter.SelectCommand = new SqlCommand(selectQuery, SqlConnection);
SqlDataAdapter.Fill(dtTable);
rgd_inline.DataSource = dtTable;
rgd_inline.DataBind();
SqlConnection.Close();
}
And this is the table structure:
CREATE TABLE [dbo].[Employee](
[Id] [int] IDENTITY(1,1) NOT NULL,
[Name] [varchar](50) NULL,
[Salary] [varchar](50) NULL
) ON [PRIMARY]
GridTextBoxColumnEditor is used like a textbox. When we click on edit button the columns gets converted into GridTextBoxColumnEditor. similarly if we have a dropdown inside radgrid we will take a DropDownColumnEditor.