This is a migrated thread and some comments may be shown as answers.
Dynamically add server controls in Grid template column in runtime using RadGrid client Events
10 Answers 253 Views
This is a migrated thread and some comments may be shown as answers.
NLV
Top achievements
Rank 1
NLV asked on 05 Aug 2010, 03:11 PM
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

10 Answers, 1 is accepted

Sort by
0
NLV
Top achievements
Rank 1
answered on 05 Aug 2010, 03:22 PM
Okie, that was stupid trying to create server controls using javascript at the client side. How can i achieve this?
0
Maria Ilieva
Telerik team
answered on 11 Aug 2010, 09:04 AM
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
0
NLV
Top achievements
Rank 1
answered on 01 Sep 2010, 06:26 AM
Thanks for your reply. I made use of asp repeater to create controls during runtime.
0
gmendez
Top achievements
Rank 1
answered on 24 Nov 2010, 01:49 PM
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
0
NLV
Top achievements
Rank 1
answered on 24 Nov 2010, 07:18 PM
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.
0
gmendez
Top achievements
Rank 1
answered on 25 Nov 2010, 02:50 AM
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
0
NLV
Top achievements
Rank 1
answered on 25 Nov 2010, 05:42 PM
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.
0
Harry
Top achievements
Rank 1
answered on 17 May 2013, 11:30 PM
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);

}

}




0
Andrey
Telerik team
answered on 22 May 2013, 01:53 PM
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.
0
Harry
Top achievements
Rank 1
answered on 22 May 2013, 02:30 PM
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;
        }
    }
}

Tags
Grid
Asked by
NLV
Top achievements
Rank 1
Answers by
NLV
Top achievements
Rank 1
Maria Ilieva
Telerik team
gmendez
Top achievements
Rank 1
Harry
Top achievements
Rank 1
Andrey
Telerik team
Share this question
or