Dynamically add new rows to radgrid

[Jay Mehta]

Hi,
I want to use the radgrid control to create a filter functionality for my project.
Each row in radgrid should have two columns one with a radcombobox and another with a textbox. On the button  click the user can add more rows with same structure preserving the previous selections, user can add n number of rows.
Once the user has add all the required filter rows, they apply that filter, this triggers a postback event. I need to preserve the state of the radgrid with all the filters (rows).

Is this possible, any starting ideas to it?

Thank you,
Jay Mehta.

[Princy]

Hello Jay,

Check out the following example that I implemented which is similar to what you require. You can alter the logic according to your requirement:
aspx:

<telerik:RadGrid ID="RadGrid1" AutoGenerateColumns="false" runat="server" OnNeedDataSource="RadGrid1_NeedDataSource" OnColumnCreated="RadGrid1_ColumnCreated">
                <MasterTableView>
                    <Columns>
                        <telerik:GridTemplateColumn UniqueName="TemplateColumn1">
                            <ItemTemplate>
                                <asp:TextBox ID="TextBox1" Text='<%#Eval("Text") %>' runat="server"></asp:TextBox>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                        <telerik:GridTemplateColumn UniqueName="TemplateColumn2">
                            <ItemTemplate>
                                <asp:DropDownList ID="DropDownList1" AppendDataBoundItems="true" SelectedValue='<%#Eval("Selected") %>' runat="server">
                                <asp:ListItem Text="" Value=""></asp:ListItem>
                                <asp:ListItem Text="Princy" Value="1"></asp:ListItem>
                                 <asp:ListItem Text="Julie" Value="2"></asp:ListItem>
                                </asp:DropDownList>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                    </Columns>
                </MasterTableView>
</telerik:RadGrid>

c#:

 public DataTable dt;
    protected void Page_Load(object sender, EventArgs e)
    {
       if (IsPostBack && ViewState["dt"] == null)
        {
            dt = new DataTable();
            dt.Columns.Add(new DataColumn("Text", typeof(string)));
            dt.Columns.Add(new DataColumn("Selected", typeof(string)));
        }
        else
        {
            dt = (DataTable)ViewState["dt"];
        }
    }

    private DataTable AddRow(DataTable dt)
    {
        // method to create row
        DataRow dr = dt.NewRow();
        dr["Text"] = "";
        dr["Selected"] = "";
        dt.Rows.Add(dr);
        return dt;
    }

    protected void Button1_Click1(object sender, EventArgs e)
    {
        DataTable dt = (DataTable)ViewState["dt"];
        foreach (GridDataItem item in RadGrid1.Items)
        {
            TextBox txt1 = (TextBox)item.FindControl("TextBox1");
            DropDownList ddl1 = (DropDownList)item.FindControl("DropDownList1");
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                if (item.ItemIndex == i)
                {
                    dt.Rows[i][0] = txt1.Text;
                    dt.Rows[i][1] = ddl1.SelectedValue;
                }
            }
        }

        ViewState["dt"] = AddRow(dt);
        RadGrid1.Rebind();
    }

    protected void RadGrid1_NeedDataSource(object source, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
    {
        if (IsPostBack)
        {
            ViewState["dt"] = dt;
            dt = (DataTable)ViewState["dt"];
            RadGrid1.DataSource = dt;
        }
    }

Hope this helps..
Princy.

[Jay Mehta]

hi Princy,

Thank you for the answer, that worked. Great!!!!!!!!!!!

Also, I am trying to read the values in this radgrid and create a comma separated string like, "row1_ddl, row1_txt, row2_ddl, row2_txt......"

I am able to get this working on the server side, but is there any way of getting this on the client side using javascript. 

Thank you,

Jay Mehta.

[Jay Mehta]

HI,

One more quick question. In the above example, the next I need to do is have 2 related radcombobox's (instead of a dropdown and a textbox) for each dynamic row created. On the selection of the first radcombobox's, the second should be populated (for eg. if the person selects state in the first radcombo, the second should populate with the list of states.)
I tried doing this, I was binding the second drop down box on the selected_indexchange event of the first dropdown, but it is giving me error saying that the bind() can only be used for the databound columns.
Any help on this.

<telerik:RadGrid ID="RadGrid1" AutoGenerateColumns="false" runat="server" OnNeedDataSource="RadGrid1_NeedDataSource" >
                <MasterTableView>
                    <Columns>
                        <telerik:GridTemplateColumn UniqueName="TemplateColumn2" HeaderText="Filter Type">
                            <ItemTemplate>
                                <telerik:RadComboBox ID="rcbFilterType" AppendDataBoundItems="true" SelectedValue='<%#Eval("Selected1") %>' runat="server" OnSelectedIndexChanged="rcbFilterType_SelectedIndexChanged" AutoPostBack="true">
                                <Items>
                                <telerik:RadComboBoxItem Value="" Text=""/>
                                <telerik:RadComboBoxItem Value="0" Text="Keyword"/>
                                <telerik:RadComboBoxItem Value="1" Text="State"/>
                                <telerik:RadComboBoxItem Value="2" Text="Provider"/>
                                <telerik:RadComboBoxItem Value="3" Text="Faculty"/>
                                </Items>
                                </telerik:RadComboBox>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                        <telerik:GridTemplateColumn UniqueName="TemplateColumn1" HeaderText="Filter Options">
                            <ItemTemplate>
                                <telerik:RadComboBox ID="rcbFilterOptions" AppendDataBoundItems="true" SelectedValue='<%#Eval("Selected2") %>' runat="server">
                                </telerik:RadComboBox>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>

                    </Columns>
                </MasterTableView>
        </telerik:RadGrid>

Imports System.Web
Imports System.Web.SessionState
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Web.UI.HtmlControls
Imports System.Data
Imports Telerik.Web.UI
Imports System.Data.SqlClient

Partial Class Dailog2
    Inherits System.Web.UI.Page
    Public dt As DataTable
    Public _store As String = "FilterTable"

    Protected Sub form2_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Form2.Load
        If Not IsPostBack AndAlso ViewState("dt") = Nothing Then
            If Session(_store) Is Nothing Then
                dt = New DataTable()
                dt.Columns.Add(New DataColumn("Selected1", GetType(String)))
                dt.Columns.Add(New DataColumn("Selected2", GetType(String)))
                'Cache.Remove(_store)
            Else
                dt = DirectCast(Session(_store), DataTable)
            End If
        Else
            ' Cache.Remove(_store)
            dt = DirectCast(ViewState("dt"), DataTable)

        End If

    End Sub

    Private Function AddRow(ByVal dt As DataTable) As DataTable
        ' method to create row
        Dim dr As DataRow = dt.NewRow()
        dr("Selected1") = ""
        dr("Selected2") = ""
        dt.Rows.Add(dr)
        Return dt
    End Function

    Protected Sub Button1_Click1(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click

        Dim dt As DataTable = DirectCast(ViewState("dt"), DataTable)
        For Each item As GridDataItem In RadGrid1.Items
            Dim ddl1 As RadComboBox = DirectCast(item.FindControl("rcbFilterType"), RadComboBox)
            Dim ddl2 As RadComboBox = DirectCast(item.FindControl("rcbFilterOptions"), RadComboBox)
            Dim i As Integer = 0

            While i < dt.Rows.Count
                If iitem.ItemIndex = i Then
                    dt.Rows(i)(0) = ddl1.SelectedValue
                    dt.Rows(i)(1) = ddl2.SelectedValue
                End If
                System.Math.Max(System.Threading.Interlocked.Increment(i), i - 1)
            End While
        Next

        ViewState("dt") = AddRow(dt)
        RadGrid1.Rebind()
    End Sub

    Protected Sub RadGrid1_NeedDataSource(ByVal source As Object, ByVal e As Telerik.Web.UI.GridNeedDataSourceEventArgs)
        If Not IsPostBack Then
            ViewState("dt") = dt
            RadGrid1.DataSource = dt
        Else
            dt = DirectCast(ViewState("dt"), DataTable)
            RadGrid1.DataSource = dt
        End If
    End Sub

    Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button2.Click
        Dim dt As DataTable = DirectCast(ViewState("dt"), DataTable)
        For Each item As GridDataItem In RadGrid1.Items
            Dim ddl1 As RadComboBox = DirectCast(item.FindControl("rcbFilterType"), RadComboBox)
            Dim ddl2 As RadComboBox = DirectCast(item.FindControl("rcbFilterOptions"), RadComboBox)
            Dim item1 As New RadComboBoxItem()
            item1.Text = "key1"
            item1.Value = "0"
            Dim i As Integer = 0
            While i < dt.Rows.Count
                If iitem.ItemIndex = i Then
                    dt.Rows(i)(0) = ddl1.SelectedValue
                    dt.Rows(i)(1) = ddl2.SelectedValue

                End If

                System.Math.Max(System.Threading.Interlocked.Increment(i), i - 1)
            End While
        Next
        If (Not ClientScript.IsStartupScriptRegistered("return")) Then
            Page.ClientScript.RegisterStartupScript(Me.GetType(), "return", "returnToParent();", True)
        End If
    End Sub

    Protected Sub rcbFilterType_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs)
        Dim connection As New SqlConnection(ConfigurationManager.ConnectionStrings("ConnectionString").ConnectionString)
        Dim query As String = ""

        Dim ddl1 As RadComboBox = CType(sender, RadComboBox)
        Dim DataItem As GridDataItem = CType(ddl1.NamingContainer, GridDataItem)
        Dim ddl2 As RadComboBox = DirectCast(DataItem.FindControl("rcbFilterOptions"), RadComboBox)

        If ddl1.SelectedValue = 0 Then
            query = "SELECT CategoryID as ID, CategoryName as NAME FROM Categories"
        ElseIf ddl1.SelectedValue = 1 Then
            query = "SELECT CategoryID as ID, CategoryName as NAME FROM Categories"
        ElseIf ddl1.SelectedValue = 2 Then
            query = "SELECT CategoryID as ID, CategoryName as NAME FROM Categories"
        Else
            query = "SELECT CategoryID as ID, CategoryName as NAME FROM Categories"
        End If
        Dim adapter As New SqlDataAdapter(query, connection)
        Dim dt As New DataTable()
        adapter.Fill(dt)

        ddl2.DataTextField = "Name"
        ddl2.DataValueField = "ID"
        ddl2.DataSource = dt
        ddl2.DataBind()
    End Sub


End Class

[NLNG]

Thanks for the solution, but you didnt add the handler for "OnColumnCreated="RadGrid1_ColumnCreated"".