Dynamically add new rows to radgrid

5 posts, 1 answers
  1. Jay Mehta
    Jay Mehta avatar
    15 posts
    Member since:
    Jun 2009

    Posted 08 Oct 2009 Link to this post

    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.
  3. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 09 Oct 2009 Link to this post

    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.
  5. Jay Mehta
    Jay Mehta avatar
    15 posts
    Member since:
    Jun 2009

    Posted 09 Oct 2009 Link to this post

    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.
  7. Jay Mehta
    Jay Mehta avatar
    15 posts
    Member since:
    Jun 2009

    Posted 11 Oct 2009 Link to this post

    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 
     




  9. NLNG
    NLNG avatar
    1 posts
    Member since:
    Jun 2011

    Posted 01 Apr 2014 in reply to Princy Link to this post

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