This is a migrated thread and some comments may be shown as answers.

Binding the RadGrid dynamically with RadEditor in javascript

0 Answers 36 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Abhinav
Top achievements
Rank 1
Abhinav asked on 02 Nov 2012, 01:57 PM
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

<%@ 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">
<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; }
    }
}

No answers yet. Maybe you can help?

Tags
Grid
Asked by
Abhinav
Top achievements
Rank 1
Share this question
or