Dynamically add server controls in Grid template column in runtime using RadGrid client Events

11 posts, 0 answers
  1. NLV
    NLV avatar
    87 posts
    Member since:
    Aug 2009

    Posted 05 Aug 2010 Link to this post

    Hello

    I've the following Grid Template Column

    <telerik:GridTemplateColumn UniqueName="TemplateColumn">
    <ItemTemplate>
          <div class="divPopularGridTags">
             <%# Convert.ToString(Eval("Tags"))%>
          </div>
    </ItemTemplate>
    </telerik:GridTemplateColumn>

    In the tags datafield i may get a single tag or multiple tags (separated by spaces). Eg. sports, sports cricket, sports cricket sachin etc.

    For each tag i need to create a link button which when clicked will take it to a different page. How can i dynamically do that?

    I've trapped GridCreated client side event of RadGrid and i've written the following JQuery function to dynamically build the controls.

    function RadGridPopular_GridCreated(sender, args)
    {
        $(".divPopularGridTags").each(function()
        {
            var tagsText = $(this)[0].innerText;
            var tags = tagsText.split(' ');
            var innerContent = '';
             
            if(tags.length > 2)
            {
                $.each(tags, function(){
                    //generate random number to set it to ID
                    var randomNum = Math.floor(Math.random()*2);
                    var ranNumberString = randomNum + '';
                    innerContent = innerContent + "<asp:LinkButton CommandName='tagPopular" + $(this) +"' ToolTip='Tag' runat='server' ID='aspLinkPopularBookmarkTag' CssClass='popularbookmarkTag' onmouseover='popBookmarkTagMouseOver(this)' onmouseout='popBookmarkTagMouseOut(this)'/> ";                       
                });
            }
            else
            {
                innerContent = innerContent + "<a href='#'>" + tags[0]+ "</a>"
            }
             
            this.innerText = '';
            this.innerHTML = innerContent;
        });
         
    }

    But i get the following error

    Control 'aspLinkPopularBookmarkTag' of type 'LinkButton' must be placed inside a form tag with runat=server.   at System.Web.UI.Page.VerifyRenderingInServerForm(Control control)
       at System.Web.UI.WebControls.LinkButton.AddAttributesToRender(HtmlTextWriter writer)

    Any ideas how can i achieve this?

    Regards
    Raghavendra
  2. NLV
    NLV avatar
    87 posts
    Member since:
    Aug 2009

    Posted 05 Aug 2010 Link to this post

    Okie, that was stupid trying to create server controls using javascript at the client side. How can i achieve this?
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 11 Aug 2010 Link to this post

    Hello,

    I would suggest you to handle the RadGrid_ItemCreated event in order to achieve the required functionality. Please refer to the following forum post which elaborates on similar scenario.


    Greetings,
    Maria Ilieva
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  5. NLV
    NLV avatar
    87 posts
    Member since:
    Aug 2009

    Posted 01 Sep 2010 Link to this post

    Thanks for your reply. I made use of asp repeater to create controls during runtime.
  6. gmendez
    gmendez avatar
    82 posts
    Member since:
    Jun 2012

    Posted 24 Nov 2010 Link to this post

    Hello,

    I need to perform a similar task.
    I have a Grid showing a set of records. There's a column that should display a different editor for each record since each one represent different kinds of data.
    For example, for the 1st record I would need to display a simple text box. For the second, a date picker, for the 3rd a checkbox, and so on. I can't know in advance which editor should be used. The application must choose it at runtime. I thought about item templates but I don't know how to achieve this and I don't have much time. Any help will be very apreciated.
    I posted more details about this regard here.
    Thanks in advance,

    Gonzalo
  7. NLV
    NLV avatar
    87 posts
    Member since:
    Aug 2009

    Posted 24 Nov 2010 Link to this post

    Hello Gonzalo

    I would simply achieve that by trapping the event 'ItemCreated'. Put a GridTemplateColumn with an empty panel in it. During the ItemCreated event trap the panel creating for each row and based on the data on another column add your dynamic control into the panel.

    Note: There could be better ways

    Regards
    NLV.
  8. gmendez
    gmendez avatar
    82 posts
    Member since:
    Jun 2012

    Posted 24 Nov 2010 Link to this post

    Hello NVL,

    After reading about GridItems and Templates I supposed the solution would be in the direction you're pointing.
    I' will try your approach.
    Thanks a lot for your kind advice.

    Regards,

    Gonzalo
  9. NLV
    NLV avatar
    87 posts
    Member since:
    Aug 2009

    Posted 25 Nov 2010 Link to this post

    I'm not NVL :).

    Dont forget to check your original post here http://www.telerik.com/community/forums/aspnet-ajax/grid/how-to-use-different-editors-depending-on-some-row-data.aspx. You need to use ItemDataBound instead of ItemCreated.
  10. Harry
    Harry avatar
    6 posts
    Member since:
    Mar 2012

    Posted 17 May 2013 Link to this post

    Maria,

    This does not work for me.  The follwing is code called, but the controls are not showing up.  If I put these code in the ItemDataBound Event, the controls show up; however, on postback, they disappear.
    protected void RadGrid1_Itemcreated(object sender, Telerik.Web.UI.GridItemEventArgs e)

     

    {

     

     

    if (e.Item is GridGroupHeaderItem)

     

    {

     GridGroupHeaderItem item = (GridGroupHeaderItem)e.Item;

     DataRowView groupDataRow = (DataRowView)e.Item.DataItem;

     

    item.DataCell.Text = groupDataRow[

     

    "CM_Questions_Description"].ToString();

     

    }

     if (e.Item is GridDataItem)

     

    {

     if (e.Item.Cells[8].Text == "Textbox")

     

    {

     TextBox myCB = new TextBox();

     

    myCB.Width = 200;

     if (!IsPostBack)

     

    {

    e.Item.Cells[5].Controls.Add(myCB);

     

    }

    }

     if (e.Item.Cells[8].Text == "Checkbox")

     

    {

     RadioButtonList myCB = new RadioButtonList();

     

    myCB.Width = 200;

    myCB.Items.Add(

     

    "Yes");

     

    myCB.Items.Add(

     

    "No");

     

    myCB.AutoPostBack =

     

    true;

     if (!IsPostBack)

     

    {

    e.Item.Cells[5].Controls.Add(myCB);

     

    }

    }

    if (e.Item.Cells[8].Text == "Dropdown")

     

    {

     .String connectionString = ConfigurationManager.ConnectionStrings["ConflictMinerals"].ConnectionString;

     .SqlConnection cn = new SqlConnection(connectionString);

     .RadComboBox myDL = new RadComboBox();

     

    cn.Open();

     .SqlCommand cmd = new SqlCommand("Questionaire.GetDropDown", cn);

     .SqlDataReader MyDataSet = cmd.ExecuteReader();

     

    myDL.DataSource = MyDataSet;

    myDL.DataValueField =

     

    "EY_DD_Val_PK";

     

    myDL.DataTextField =

     

    "Response";

     

    myDL.DataBind();

    myDL.Width = 200;

     .if (!IsPostBack)

     

    {

    e.Item.Cells[5].Controls.Add(myDL);

    }

    }

     .// if (e.Item.Cells[8].Text == "Textbox")

     

    {

     

     

    TextBox myCB = new TextBox();

     

    myCB.Width = 400;

     

     

    if (!IsPostBack)

     

    {

    e.Item.Cells[6].Controls.Add(myCB);

    }

    }




  11. Andrey
    Admin
    Andrey avatar
    836 posts

    Posted 22 May 2013 Link to this post

    Hello,

    Most probably the problem with the disappearing controls comes from this line of code:

    if (!IsPostBack)
    {
        e.Item.Cells[5].Controls.Add(myCB);
    }

    If the page is postbacked you do not add the controls to the control tree and there is no way to see them.

    Why are you not using GridTemplateColumns where you could specify what controls to be displayed and not persist them manually?

    Regards,
    Andrey
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  12. Harry
    Harry avatar
    6 posts
    Member since:
    Mar 2012

    Posted 22 May 2013 Link to this post

    Thanks for you response.  I did as you suggested and it worked.  See solution below; hope it helps someone.

     

     

    <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="ds_GridQuestionaire" OnItemDataBound="RadGrid1_ItemDataBound" CellSpacing="0" OnItemCommand="RadGrid1_ItemCommand"
        OnPreRender="RadGrid1_PreRender"  GridLines="None" ShowGroupPanel="True" Height="100%" Width="100%" AllowPaging="false" AllowCustomPaging="True" VirtualItemCount="16">
        <MasterTableView DataSourceID="ds_GridQuestionaire" CommandItemDisplay="Bottom" AutoGenerateColumns="false"
                          DataKeyNames="EY_Question_PK" ClientDataKeyNames="EY_Question_PK" EditMode="InPlace" AllowCustomPaging="False" Width="100%">
            <CommandItemSettings ExportToPdfText="Export to PDF" />
            <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">
            </RowIndicatorColumn>
            <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column" Visible="True" Created="True">
            </ExpandCollapseColumn>
            <Columns>
                <telerik:GridBoundColumn DataField="EY_Question_PK" FilterControlAltText="Filter EY_Question_PK column" HeaderStyle-CssClass="auto-style1" HeaderText="EY_Question_PK" SortExpression="EY_Question_PK" UniqueName="EY_Question_PK" Visible="False" HeaderStyle-Width="0%" ItemStyle-Width="0%">
                    <ColumnValidationSettings>
                        <ModelErrorMessage Text="" />
                    </ColumnValidationSettings>
                    <HeaderStyle CssClass="auto-style1" />
                    <ItemStyle Width="0%" />
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="CM_ID" FilterControlAltText="Filter CM_ID column" HeaderStyle-CssClass="auto-style1" HeaderText="CM_ID" SortExpression="CM_ID" UniqueName="CM_ID" Visible="False" HeaderStyle-Width="0%" ItemStyle-Width="0%">
                    <ColumnValidationSettings>
                        <ModelErrorMessage Text="" />
                    </ColumnValidationSettings>
                    <HeaderStyle CssClass="auto-style1" />
                    <ItemStyle Width="0%" />
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="EY_Metals_ID" Display="false" Visible="true" FilterControlAltText="Filter EY_Metals_ID column" HeaderText="" SortExpression="EY_Metals_ID" UniqueName="EY_Metals_ID" HeaderStyle-Width="0%" ItemStyle-Width="0%">
                    <ColumnValidationSettings>
                        <ModelErrorMessage Text="" />
                    </ColumnValidationSettings>
                    <HeaderStyle Width="0%" />
                    <ItemStyle Width="0%" />
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="CM_Questions_Description" FilterControlAltText="Filter CM_Questions_Description column" HeaderText="CM_Questions_Description" SortExpression="CM_Questions_Description" UniqueName="CM_Questions_Description" Visible="False" Resizable="False">
                    <ColumnValidationSettings>
                        <ModelErrorMessage Text="" />
                    </ColumnValidationSettings>
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="Metals" FilterControlAltText="Filter Metals column" HeaderText="" SortExpression="Metals" UniqueName="Metals" HeaderStyle-Width="35%"  ItemStyle-Width="35%">
                    <ColumnValidationSettings>
                        <ModelErrorMessage Text="" />
                    </ColumnValidationSettings>
                    <HeaderStyle Width="40%" Font-Bold="True" Font-Size="Small" HorizontalAlign="Left" />
                    <ItemStyle Width="40%"/>
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="ControlType" FilterControlAltText="ControlType" Display="false" HeaderText="" SortExpression="ControlType" UniqueName="ControlType" ItemStyle-Width="35%">
                    <ColumnValidationSettings>
                        <ModelErrorMessage Text="" />
                    </ColumnValidationSettings>
                    <HeaderStyle Width="40%" Font-Bold="True" Font-Size="Small" HorizontalAlign="Center" />
                    <ItemStyle Width="40%" />
                </telerik:GridBoundColumn>
                <telerik:GridTemplateColumn DataField="Answer" FilterControlAltText="Filter Answer column" ItemStyle-HorizontalAlign="right" HeaderStyle-HorizontalAlign="Center"  HeaderStyle-Width="20%" HeaderText="Answers" SortExpression="Answer"
                                            UniqueName="Answer" HeaderStyle-Font-Bold ="true">
                    <EditItemTemplate>
                        <asp:TextBox ID="AnswerTextBox" runat="server" Width ="100%" Text='<%# Bind("Answer") %>'></asp:TextBox>
                    </EditItemTemplate>
                    <ItemTemplate>
                        <telerik:RadComboBox ID="cmbQuestion1_4" runat="server" AutoPostBack="false" Visible="false" Width="100%">
                            <Items>
                                <telerik:RadComboBoxItem runat="server" Text="" Value="Select" />
                                <telerik:RadComboBoxItem runat="server" Text="Yes" Value="Yes" />
                                <telerik:RadComboBoxItem runat="server" Text="No" Value="No" />
                            </Items>
                        </telerik:RadComboBox>
                        <asp:DropDownList ID="DecDownList1" runat="server" Width="100%" Visible="false" AutoPostBack="True" OnSelectedIndexChanged="DecDownList1_SelectedIndexChanged">
                            <asp:ListItem>Company Level</asp:ListItem>
                            <asp:ListItem>Division Level</asp:ListItem>
                            <asp:ListItem>Product Category Level</asp:ListItem>
                            <asp:ListItem>Product Level</asp:ListItem>
                        </asp:DropDownList>
                        <asp:TextBox ID="AnswerText" runat="server"   Visible="false" Width="100%" Text='<%# Bind("Answer") %>' ValidateRequestMode="Disabled"></asp:TextBox>
                        <asp:RadioButtonList ID="rbDeclaration" runat="server" Visible="false" Width="100%" RepeatDirection="Horizontal">
                            <asp:ListItem>Yes</asp:ListItem>
                            <asp:ListItem Selected="True">No</asp:ListItem>
                        </asp:RadioButtonList>
                        <telerik:RadAsyncUpload ID="RadAsyncUploadGeneral" Visible="false" Width="100%" runat="server"></telerik:RadAsyncUpload>
                    </ItemTemplate>
                     <HeaderStyle Font-Bold="True" Font-Size="Small" HorizontalAlign="Center" />
                    <ItemStyle/>
                </telerik:GridTemplateColumn>
                <telerik:GridBoundColumn DataField="ReqValidation" Display="false" HeaderText="" UniqueName="ReqValidation" ItemStyle-Width="2%">
                    <ColumnValidationSettings>
                        <ModelErrorMessage Text="" />
                    </ColumnValidationSettings>
                    <ItemStyle Width="5%" />
                </telerik:GridBoundColumn>
                <telerik:GridTemplateColumn DataField="Answer" UniqueName="Answer" ItemStyle-Width="13%">
                    <ItemTemplate>
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ForeColor="Red" ErrorMessage="* Required" Visible="False" ControlToValidate="AnswerText"></asp:RequiredFieldValidator>
                        <asp:LinkButton ID="LinkProd" CausesValidation="false" Text="Add products" Visible="false" runat="server" PostBackUrl="~/UI Tier/Products.aspx"></asp:LinkButton>
                    </ItemTemplate>
                    <ItemStyle />
                </telerik:GridTemplateColumn>
                <telerik:GridBoundColumn DataField="CommentsInd" Display="false" HeaderText="" UniqueName="CommentsInd" ItemStyle-Width="0%">
                    <ColumnValidationSettings>
                        <ModelErrorMessage Text="" />
                    </ColumnValidationSettings>
                    <ItemStyle Width="0%" />
                </telerik:GridBoundColumn>
                <telerik:GridTemplateColumn DataField="Comment" FilterControlAltText="Filter Comment column" Visible="true" HeaderText="Comments" SortExpression="Comment" UniqueName="Comment" HeaderStyle-Width="30%" ItemStyle-Width="30%">
                    <EditItemTemplate>
                        <telerik:RadTextBox ID="RadTextBox1" runat="server" Width="90%"></telerik:RadTextBox>
                    </EditItemTemplate>
                    <ItemTemplate>
                       <asp:TextBox ID="CommentTextBox" runat="server" Visible="false"  Width="100%" Text='<%# Bind("Comment") %>' ></asp:TextBox>
                    </ItemTemplate>
                    <HeaderStyle Width="100%" Font-Bold="True" Font-Size="Small" HorizontalAlign="Center" />
                    <ItemStyle Width="100%" />
                </telerik:GridTemplateColumn>
            </Columns>
            <EditFormSettings>
                <EditColumn FilterControlAltText="Filter EditCommandColumn column">
                </EditColumn>
            </EditFormSettings>
            <PagerStyle AlwaysVisible="True" PageSizeControlType="RadComboBox" Mode="NextPrev" PageSizes="1;15;20" />
            <CommandItemTemplate>
                <table>
                    <tr>
                        <td style="width: 85%">
                            <asp:Label ID="Label1" runat="server" Text="" Font-Bold="True" Style="text-align: center" Width="100%"></asp:Label>
                        </td>
                        <td style="width: 5%">
                            <telerik:RadButton ID="Prev" CommandName="Prev" runat="server" Text="Prev" Font-Bold="True" Width="100px"  CausesValidation="true" ></telerik:RadButton>
                        </td>
                        <td style="width: 5%">
                            <telerik:RadButton ID="Save" CommandName="Save" AutoPostBack="true" runat="server" Text="Save" Font-Bold="True" Width="100px" ></telerik:RadButton>
                        </td>
                        <td style="width: 5%">
                            <telerik:RadButton ID="Next" CommandName="Next" runat="server" Text="Next" Font-Bold="True" Width="100px"  CausesValidation="true" ></telerik:RadButton>
                        </td>
                    </tr>
                </table>
            </CommandItemTemplate>
            <GroupByExpressions>
                <telerik:GridGroupByExpression>
                    <SelectFields>
                           <telerik:GridGroupByField HeaderText="Questions" FieldAlias="CM_Questions_Description" FieldName="CM_Questions_Description"></telerik:GridGroupByField>
                           
                       
                    </SelectFields>
                    <GroupByFields>
                         <telerik:GridGroupByField HeaderText="" FieldAlias="GroupSortOrder" FieldName="GroupSortOrder"></telerik:GridGroupByField>
              
                        <telerik:GridGroupByField FieldName="CM_Questions_Description"  HeaderText="Questions"></telerik:GridGroupByField>
                    </GroupByFields>
                </telerik:GridGroupByExpression>
            </GroupByExpressions>
        </MasterTableView>
        <PagerStyle Mode="Advanced" PageSizeControlType="RadComboBox" PageSizes="1;15" PageButtonCount="5" AlwaysVisible="True" />
        <FilterMenu EnableImageSprites="False">
        </FilterMenu>
    </telerik:RadGrid>
    protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridGroupHeaderItem)
        {
            GridGroupHeaderItem item = (GridGroupHeaderItem)e.Item;
            DataRowView groupDataRow = (DataRowView)e.Item.DataItem;
            item.DataCell.Text = groupDataRow["CM_Questions_Description"].ToString();
        }
        if (e.Item is GridDataItem)
        {
            GridDataItem dataitem = (GridDataItem)e.Item;
            string answer = DataBinder.Eval(dataitem.DataItem, "Answer").ToString();
            if (e.Item.Cells[8].Text == "Dropdown")
            {
                ((RadComboBox)e.Item.Cells[9].FindControl("cmbQuestion1_4")).Visible = true;
                ((DropDownList)e.Item.Cells[9].FindControl("DecDownList1")).SelectedValue = answer;
            }
            if (e.Item.Cells[8].Text == "Textbox")
            {
                ((TextBox)e.Item.Cells[9].FindControl("AnswerText")).Visible = true;
                if (e.Item.Cells[10].Text == "Y")
                {
                    ((RequiredFieldValidator)e.Item.Cells[11].FindControl("RequiredFieldValidator1")).Visible = true;
                    ((TextBox)e.Item.Cells[9].FindControl("AnswerText")).ValidateRequestMode = ValidateRequestMode.Enabled;
                }
            }
            if (e.Item.Cells[8].Text == "Checkbox")
            {
                ((RadioButtonList)e.Item.Cells[9].FindControl("rbDeclaration")).Visible = true;
                ((RadioButtonList)e.Item.Cells[9].FindControl("rbDeclaration")).SelectedValue = answer;
            }
            if (e.Item.Cells[8].Text == "DecDropDownList")
            {
                ((DropDownList)e.Item.Cells[9].FindControl("DecDownList1")).Visible = true;
                ((DropDownList)e.Item.Cells[9].FindControl("DecDownList1")).SelectedValue = answer;
                //((RadButton)e.Item.Cells[11].FindControl("btnAddProducts")).Visible = true;
                ((LinkButton)e.Item.Cells[11].FindControl("LinkProd")).Visible = true;
            }
            if (e.Item.Cells[8].Text == "Upload")
            {
                ((RadAsyncUpload)e.Item.Cells[9].FindControl("RadAsyncUploadGeneral")).Visible = true;
            }
            if (e.Item.Cells[12].Text == "Y")
            {
                ((TextBox)e.Item.Cells[11].FindControl("CommentTextBox")).Visible = true;
            }
        }
    }

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017