Hello,
I have a RadGrid with 4 template columns.
1. ASP:TextBox
2. RadEditor
3. ASP:LinkButton (ADD)
4. ASP:LinkButton. (DELETE)
When we click on "ADD" button we are adding a new row next to the selected row. Same way we are deleting the selected row on click of "DELETE" button. This we are doing in postback by rebinding the RadGrid. We need to avoid the postback and Add/Delete rows dynamically in javascript. Please provide the solution. Please find herewith the sample code that we are doing in code behind.
FYI: we are using net framework 4.0 and the Telerik.Web.UI.dll version is v. 2011.2.915.40
I have a RadGrid with 4 template columns.
1. ASP:TextBox
2. RadEditor
3. ASP:LinkButton (ADD)
4. ASP:LinkButton. (DELETE)
When we click on "ADD" button we are adding a new row next to the selected row. Same way we are deleting the selected row on click of "DELETE" button. This we are doing in postback by rebinding the RadGrid. We need to avoid the postback and Add/Delete rows dynamically in javascript. Please provide the solution. Please find herewith the sample code that we are doing in code behind.
FYI: we are using net framework 4.0 and the Telerik.Web.UI.dll version is v. 2011.2.915.40
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="RadGridTesting.WebForm1" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerikControls" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
runat
=
"server"
>
<
title
></
title
>
<
link
href
=
"../../TelerikCSS_ETO/Grid.ETOGrid.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
</
head
>
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
asp:ScriptManager
ID
=
"scrpt1"
runat
=
"server"
></
asp:ScriptManager
>
<
div
>
<
telerikControls:RadGrid
ID
=
"gvTest"
runat
=
"server"
GridLines
=
"None"
onitemcommand
=
"gvTest_ItemCommand"
onneeddatasource
=
"gvTest_NeedDataSource"
>
<
MasterTableView
AutoGenerateColumns
=
"false"
ShowFooter
=
"true"
Width
=
"100%"
TableLayout
=
"Auto"
HeaderStyle-VerticalAlign
=
"Middle"
HeaderStyle-HorizontalAlign
=
"Left"
HeaderStyle-Font-Bold
=
"true"
ViewStateMode
=
"Enabled"
ItemStyle-VerticalAlign
=
"Middle"
ExpandCollapseColumn-Display
=
"false"
ExpandCollapseColumn-Visible
=
"false"
>
<
Columns
>
<
telerikControls:GridTemplateColumn
>
<
ItemTemplate
>
<
asp:TextBox
ID
=
"txtsno"
MaxLength
=
"3"
runat
=
"server"
Width
=
"25px"
Text='<%# Eval("sno") %>'></
asp:TextBox
>
</
ItemTemplate
>
</
telerikControls:GridTemplateColumn
>
<
telerikControls:GridTemplateColumn
HeaderStyle-HorizontalAlign
=
"Left"
>
<
ItemTemplate
>
<
telerikControls:RadEditor
ID
=
"txt1"
runat
=
"server"
Height
=
"25px"
ToolsWidth
=
"130px"
Content='<%# DataBinder.Eval(Container.DataItem, "text") %>'
ToolbarMode="ShowOnFocus" EditModes="Design" ContentFilters="DefaultFilters" />
</
ItemTemplate
>
</
telerikControls:GridTemplateColumn
>
<
telerikControls:GridTemplateColumn
ItemStyle-VerticalAlign
=
"Top"
>
<
ItemTemplate
>
<
asp:LinkButton
ID
=
"lbtn1"
CausesValidation
=
"false"
CommandName
=
"DELETE"
Text
=
"Delete"
runat
=
"server"
></
asp:LinkButton
>
</
ItemTemplate
>
</
telerikControls:GridTemplateColumn
>
<
telerikControls:GridTemplateColumn
ItemStyle-VerticalAlign
=
"Top"
>
<
ItemTemplate
>
<
asp:LinkButton
ID
=
"lbtn2"
CausesValidation
=
"false"
CommandName
=
"ADD"
Text
=
"Add"
runat
=
"server"
></
asp:LinkButton
>
</
ItemTemplate
>
</
telerikControls:GridTemplateColumn
>
</
Columns
>
</
MasterTableView
>
</
telerikControls:RadGrid
>
</
div
>
</
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;
namespace
RadGridTesting
{
public
partial
class
WebForm1 : System.Web.UI.Page
{
List<DataText> lstList =
new
List<DataText>();
protected
void
Page_Load(
object
sender, EventArgs e)
{
}
/// <summary>
/// Add and remove row
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected
void
gvTest_ItemCommand(
object
sender, Telerik.Web.UI.GridCommandEventArgs e)
{
if
(e.CommandName ==
"ADD"
)
{
GridDataItem item = (GridDataItem)((LinkButton)e.CommandSource).NamingContainer;
lstList = BindGrid(item.ItemIndex,
"Add"
);
this
.gvTest.Rebind();
}
else
if
(e.CommandName ==
"DELETE"
)
{
GridDataItem item = (GridDataItem)((LinkButton)e.CommandSource).NamingContainer;
lstList = BindGrid(item.ItemIndex,
"Delete"
);
this
.gvTest.Rebind();
}
}
protected
void
gvTest_NeedDataSource(
object
sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
{
if
(!IsPostBack)
{
lstList =
new
List<DataText> {
new
DataText{ sno = 1 , text =
"A"
},
new
DataText{ sno = 2 , text =
"B"
},
new
DataText{ sno = 3 , text =
"C"
},
new
DataText{ sno = 4 , text =
"D"
},
new
DataText{ sno = 5 , text =
"E"
}
};
}
this
.gvTest.DataSource = lstList;
}
private
List<DataText> BindGrid(
int
_RowID,
string
opAddDelete)
{
lstList =
new
List<DataText>();
int
sno = 1;
foreach
(GridDataItem item
in
this
.gvTest.Items)
{
RadEditor txt1 = (RadEditor)item.FindControl(
"txt1"
);
DataText dt =
new
DataText();
if
(opAddDelete ==
"Delete"
&& item.ItemIndex == _RowID)
{
}
else
{
dt.sno = sno;
dt.text = txt1.Text;
lstList.Add(dt);
sno++;
}
if
(opAddDelete ==
"Add"
&& item.ItemIndex == _RowID)
{
dt =
new
DataText();
dt.sno = sno;
lstList.Add(dt);
sno++;
}
}
return
lstList;
}
}
}
using
System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Web;
namespace
RadGridTesting
{
public
class
DataText
{
public
int
sno {
get
;
set
; }
public
string
text {
get
;
set
; }
}
}