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

[NLV]

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

[NLV]

Okie, that was stupid trying to create server controls using javascript at the client side. How can i achieve this?

[Maria Ilieva]

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

[NLV]

Thanks for your reply. I made use of asp repeater to create controls during runtime.

[gmendez]

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

[NLV]

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.

[gmendez]

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

[NLV]

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.

[Harry]

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);

}

}

[Andrey]

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

[Harry]

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;
        }
    }
}