RadioButtonList in Itemtemplate

[Robert]

I need to add a radio ButtonList in a Custom Item Template for a test. I pull [QID],[TestQuestion] from SQL DataSource1  I have a Radiobuttionlist inside the ItemTemplate as well which uses SQLDataSource2 which Pulls [QID],[TestChoice] I need to populate the itemtemplate with the test questions and the test choices underneath in the radiobuttonlist but I can't seem to get the control parameter correct for the buttonlist unless I go into edit mode. How do I tell SQLDatasource2 to use the [QID] of the current record to populate the buttonlist?

 <form id="form1" runat="server">
    <div>
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        </telerik:RadAjaxManager>
        <br />
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:gulfcoastConnectionString %>"
            SelectCommand="SELECT [QID], [Question] FROM [mttestquestions]"></asp:SqlDataSource>
        <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:gulfcoastConnectionString %>"
            SelectCommand="SELECT [Choice], [Selectvalue], [QID] FROM [mttestChoices] WHERE ([QID] = @QID)">
            <SelectParameters>
                <asp:ControlParameter ControlID="RadGrid1" Name="QID" PropertyName="DataSource" />
            </SelectParameters>
        </asp:SqlDataSource>

    </div>
        <br />
        <br />
        <br />
        <br />
        <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1"
            GridLines="None" Skin="Sunset">
            <MasterTableView DataSourceID="SqlDataSource1">
                <EditItemTemplate>
                    &nbsp;
                </EditItemTemplate>
                <RowIndicatorColumn>
                    <HeaderStyle Width="20px" />
                </RowIndicatorColumn>
                <ExpandCollapseColumn>
                    <HeaderStyle Width="20px" />
                </ExpandCollapseColumn>
                <Columns>
                    <telerik:GridBoundColumn DataField="QID" DataType="System.Int32" HeaderText="QID"
                        SortExpression="QID" UniqueName="QID">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="Question" HeaderText="Question" SortExpression="Question"
                        UniqueName="Question">
                    </telerik:GridBoundColumn>
                </Columns>
                <ItemTemplate>
                    <asp:Label ID="LABELQID" runat="server" Text='<%# Eval("QID") %>' AssociatedControlID="RadioButtonList1"></asp:Label>
                    <asp:Label ID="Label2" runat="server" Text=". "></asp:Label>
                    <asp:Label ID="Label3" runat="server" Text='<%# Eval("Question") %>'></asp:Label><br />
                    <asp:RadioButtonList ID="RadioButtonList1" runat="server" DataSourceID="SqlDataSource2"
                        DataTextField="Choice" DataValueField="Selectvalue">
                    </asp:RadioButtonList>&nbsp;&nbsp;
                </ItemTemplate>
            </MasterTableView>
            <FilterMenu EnableTheming="True" Skin="Sunset">
                <CollapseAnimation Duration="200" Type="OutQuint" />
            </FilterMenu>
        </telerik:RadGrid>
    </form>
</body>

[Pavlina]

Hello Robert,

I suggest you review the following link, which elaborates on this matter and see if it helps to achieve the desired functionality.
http://www.dotnetcurry.com/ShowArticle.aspx?ID=261

All the best,
Pavlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Robert]

This will be helpful however What I really need is to Bind my SQLDataSource2 to SqlDataSource1 by the QID of the Query. I am building a "test" for users. SQlDatasource1 pulls the QID and the test Question and also in the template column I need to present the user with a radiobuttionlist of "Answer Choices" which is tied to the questions through the QID. My Problem is I seem to have a problem passing the parameter to SQlDataSource2 from the itemtemplate. I have Tried Session Value,Control values etc.... How do I get the value of the test question QID in the grid to pass to the datasource of the radiobuttonlist as the grid is being rendered.

[Pavlina]

Hello Robert,

In your case the easier approach would be to use DropDownColumn or RadComboBox in ItemTemplate in order to achieve the desired functionality.
This is demonstrated in the following examples:
Automatic Operations
Combo in Grid

I hope it gets you started properly.

Greetings,
Pavlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Robert]

The test needs to be a multiple choice type senerio however I have placed the Radiobuttionlist in a Template Column and have found a few very odd things

• The Radiobuttonlist never popuplates unless I define a parent table relationship which enables child tables (which I do not want)
• When the Buttonlist populates is shows the wrong data (ie. Question 1 has a QID of 1 and I lookup 4 choices that also have QID of 1, However the buttionlist for first record never populates with record 1 data however it does give a list for the LAST record.)
• the last record in the query is appended to all the radiobuttionlist in each record

here is the curent code for the page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    </head>
<body>
    <form id="form1" runat="server">
    <div>

    </div>
    <telerik:RadScriptManager ID="RadScriptManager1" Runat="server">
    </telerik:RadScriptManager>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server"
        ConnectionString="<%$ ConnectionStrings:GulfCoastConnectionString %>"


        SelectCommand="SELECT QID, Question FROM MTtest"></asp:SqlDataSource>
        <asp:SqlDataSource ID="QuestionsSQL" runat="server"
            ConnectionString="<%$ ConnectionStrings:GulfCoastConnectionString %>"







        SelectCommand="SELECT Choice, Selectvalue, QID FROM mttestChoices WHERE (QID = @QID)">
            <SelectParameters>
                <asp:Parameter DefaultValue="" Name="QID" />
            </SelectParameters>
        </asp:SqlDataSource>

    <input id="Hidden1" type="hidden" />

    <telerik:RadAjaxManager runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid3">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid3" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <br />
    <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True">
        <asp:ListItem>Web20</asp:ListItem>
        <asp:ListItem>Black</asp:ListItem>
        <asp:ListItem>Hay</asp:ListItem>
        <asp:ListItem>Office2007</asp:ListItem>
        <asp:ListItem>Outlook</asp:ListItem>
        <asp:ListItem>Sunset</asp:ListItem>
        <asp:ListItem>Vista</asp:ListItem>
        <asp:ListItem>WebBlue</asp:ListItem>
        <asp:ListItem>Forest</asp:ListItem>
    </asp:DropDownList>
    <p>
        &nbsp;</p>
    <asp:SqlDataSource ID="SqlDataSource2" runat="server"
        ConnectionString="<%$ ConnectionStrings:GulfCoastConnectionString %>"
        SelectCommand="SELECT QID, Choice, Selectvalue FROM mttestChoices">
        <SelectParameters>
            <asp:Parameter Name="QID" />
        </SelectParameters>
    </asp:SqlDataSource>
    <telerik:RadGrid ID="RadGrid3" runat="server" DataSourceID="SqlDataSource1"
        GridLines="None">
<MasterTableView CellSpacing="-1" DataSourceID="SqlDataSource1" DataKeyNames="QID"
            AutoGenerateColumns="False" HierarchyDefaultExpanded="False"
            HierarchyLoadMode="ServerBind" GroupsDefaultExpanded="False">
<RowIndicatorColumn>
<HeaderStyle Width="20px"></HeaderStyle>
</RowIndicatorColumn>





    <DetailTables>
        <telerik:GridTableView runat="server" CellSpacing="-1" DataKeyNames="QID"
            DataSourceID="Questionssql">
            <RowIndicatorColumn>
                <HeaderStyle Width="20px" />
            </RowIndicatorColumn>
            <ExpandCollapseColumn>
                <HeaderStyle Width="20px" />
            </ExpandCollapseColumn>
        </telerik:GridTableView>
    </DetailTables>
    <ParentTableRelation>
        <telerik:GridRelationFields DetailKeyField="QID" MasterKeyField="QID" />
    </ParentTableRelation>





    <ExpandCollapseColumn Visible="True">
    </ExpandCollapseColumn>
    <Columns>
        <telerik:GridTemplateColumn UniqueName="Questionnumber">
            <ItemTemplate>
                Question:
                <asp:Label ID="indexlabel" runat="server" Text='<%# Eval("QID") %>'></asp:Label>
            </ItemTemplate>
        </telerik:GridTemplateColumn>
        <telerik:GridBoundColumn DataField="QID" HeaderText="QID" UniqueName="column1"
            Visible="False">
        </telerik:GridBoundColumn>
        <telerik:GridBoundColumn DataField="Question" HeaderText="Question"
            UniqueName="column2">
        </telerik:GridBoundColumn>
        <telerik:GridTemplateColumn UniqueName="AnswerColumn" HeaderText="Selection">

            <ItemTemplate>
                <asp:RadioButtonList ID="RadioButtonList1" runat="server"
                    AppendDataBoundItems="True" AutoPostBack="True" DataMember="DefaultView"
                    DataSourceID="QuestionsSQL" DataTextField="Choice" DataValueField="Selectvalue"
                    Font-Bold="False" Font-Underline="False" ForeColor="#0000CC"
                    RepeatLayout="Flow">
                </asp:RadioButtonList>
                <br />
            </ItemTemplate>

        </telerik:GridTemplateColumn>
    </Columns>
    <ItemStyle Font-Bold="True" Font-Italic="False"
        Font-Overline="False" Font-Strikeout="False" Font-Underline="False"
        Wrap="True" />
    <AlternatingItemStyle Font-Bold="True" Font-Italic="False"
        Font-Overline="False" Font-Strikeout="False" Font-Underline="False"
        Wrap="True" />
</MasterTableView>
        <ClientSettings>
            <Selecting AllowRowSelect="True" />
        </ClientSettings>
    </telerik:RadGrid>
    </form>
    </body>
</html>

here is a small screen capture of the grid without parent child table relationoship the radiobuttionlist should show in the Selection column
Radgrid no Child Table

here is a small screen capture of the grid WITH parent child table relationoship notice how the data from the last record is appended to all the radiolist
Radgrid WITH parent table relationship

this is driving me nuts I hope you can help

[Pavlina]

Hi Robert,

In order to progress in the resolution of this problem I will ask you to open a formal support ticket and send us a simple running project (incl. CSS, images, skins, DB backup if needed and so on) demonstrating the problem (and step-by-step instructions on doing so). In that way we can reproduce and pinpoint the problems you're facing on our side, understand the logic of your application and provide a solution.

Best wishes,
Pavlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Yuriy]

Hi Robert,

Did you sorted out your problem? I need to do the similar thing and kinda stuck with it.

Thanks,
Yuriy

[Iana Tsolova]

Hello Yuriy,

It seems we were not able to replicate the issue in question and debug it locally to find the source of it. Therefore I would ask you to send us a sample illustrating your setup and the problem. You can paste the code here is the sample is simple enough, open a formal support ticket, or attach the files in some public file transfer site.

All the best,
Iana Tsolova
the Telerik team

[Balakrishna Reddy]

Hi,
   i have radgrid with template column which have radio button list.
i want to bind that radiobuttonlist dynamically.my code is like bellow,i am getting null when i am trying to find the control of radio button list.
So please help in getting of this...

<telerik:RadGrid ID="RadGrid_Machine" runat="server" AllowPaging="True" AutoGenerateColumns="False"
            CellSpacing="0" GridLines="None" OnDeleteCommand="RadGrid_Machine_DeleteCommand"
            PageSize="5" OnInsertCommand="RadGrid_Machine_InsertCommand" OnItemCommand="RadGrid_Machine_ItemCommand"
            OnUpdateCommand="RadGrid_Machine_UpdateCommand"
            OnItemDataBound="RadGrid_Machine_ItemDataBound"
            onitemcreated="RadGrid_Machine_ItemCreated">
            <PagerStyle Mode="NextPrevAndNumeric" />
            <MasterTableView CommandItemDisplay="Top" EditMode="EditForms">
                <Columns>
                    <telerik:GridEditCommandColumn FilterControlAltText="Filter EditCommandColumn column"
                        ButtonType="ImageButton">
                    </telerik:GridEditCommandColumn>
                    <telerik:GridBoundColumn DataField="MachineID" ReadOnly="true" HeaderText="MachineID"
                        UniqueName="MachineID">
                    </telerik:GridBoundColumn>
                    <telerik:GridDropDownColumn HeaderText="ProductType" DataField="ProductType" UniqueName="ProductType"
                        ListDataMember="ProductTypeMaster" ListTextField="ProductType">
                    </telerik:GridDropDownColumn>
                    <telerik:GridBoundColumn DataField="MachineName" FilterControlAltText="Filter column1 column"
                        HeaderText="MachineName" UniqueName="MachineName">
                    </telerik:GridBoundColumn>
<telerik:GridDropDownColumn HeaderText="UnitType" DataField="UnitType" UniqueName="UnitType"
                        ListDataMember="UnitTypeMaster" ListTextField="UnitType">
                    </telerik:GridDropDownColumn>
                    <telerik:GridTemplateColumn HeaderText="PrintEdge">
                        <ItemTemplate>
                            <asp:RadioButtonList ID="rblList" runat="server" AutoPostBack="true" DataTextField="PrintEdge" RepeatColumns="3" DataValueField="PrintEdge" DataMember="MachineMaster" RepeatDirection="Horizontal">
                                <asp:ListItem Text="Short" Value="0" Selected="True">a</asp:ListItem>
                                <asp:ListItem Text="Long" Value="1">b</asp:ListItem>
                                <asp:ListItem Text="Both" Value="2">c</asp:ListItem>
                            </asp:RadioButtonList>
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridCheckBoxColumn FilterControlAltText="Filter IsActive column" UniqueName="IsActive"
                        DataField="IsActive" HeaderText="IsActive">
                    </telerik:GridCheckBoxColumn>
                    <telerik:GridButtonColumn FilterControlAltText="Filter column19 column" UniqueName="column19"
                        ButtonType="ImageButton" CommandName="Delete">
                    </telerik:GridButtonColumn>
                </Columns>
                <EditFormSettings>
                    <EditColumn ButtonType="ImageButton">
                    </EditColumn>
                </EditFormSettings>
            </MasterTableView>
            <FilterMenu EnableImageSprites="False">
            </FilterMenu>
            <HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default">
            </HeaderContextMenu>
            <ClientSettings>
                <Scrolling AllowScroll="true" />
            </ClientSettings>
        </telerik:RadGrid>

*******************************************************************************
protected void RadGrid_Machine_ItemDataBound(object sender, GridItemEventArgs e)
    {
        if (e.Item.IsInEditMode)
        {
            GridEditableItem editItem = (GridEditableItem)e.Item;
            GridEditManager editMgr = (GridEditManager)editItem.EditManager;

            GridDropDownListColumnEditor editor = (GridDropDownListColumnEditor)editMgr.GetColumnEditor("ProductType");
            GridDropDownListColumnEditor editor1 = (GridDropDownListColumnEditor)editMgr.GetColumnEditor("UnitType");
            RadComboBox rcbProductType = editor.ComboBoxControl;
            RadComboBox rcbUnitType = editor1.ComboBoxControl;

                DataTable dtProduct = objProductType.GetAllProductTypeMaster();
                objProductType.FillFilteredRadComboList(rcbProductType, dtProduct);

                rcbUnitType.Items.Clear();

                RadioButtonList list = (RadioButtonList)editItem.FindControl("rblList");   //Here i am getting null
                RadioButtonList rblAnswer = editItem.FindControl("rblList") as RadioButtonList;      //Here i am getting null
     
        }
    }

[Shinu]

Hi,

Please check this forum thread that i have answered for the same question.

Thanks,
Shinu.

[surya]

Hello Telerik Team..

I am using Radgrid with Batch editing and my 2 columns are editable.one is boundcolumn and the other is template column with radiobutton list.I am able edit and save radiobutton template column but not the bound column.when i edit bound column and leave the cell it is not showing the edited value and not saving when i click on savechanges button.This is started after adding radio buttonlist ...Please help me out

<script type="text/javascript">
       function setEditorValue(sender, args) {
           args.set_cancel(true);
           var value = args.get_value();

           var buttonList = $telerik.findElement(args.get_cell(), "RadioButtonList1");
           var items = $(buttonList).find("input");
           for (var i = 0; i < items.length; i++) {
               if (items[i].value == value) {
                   items[i].checked = true;
               }
               else {
                   items[i].checked = false;
               }
           }
       }

       function test() {

           var grid = $find("<%=gridMenuMixConfig.ClientID %>");

           var masterTable = grid.get_masterTableView();

           var row = masterTable.get_dataItems()[4]; //accessing second row

           var radio = rows.findElement('RadioButtonList1');

           var elements = radio.getElementsByTagName("input");

           var count = 0;

           for (var i = 0; i < elements.length; i++) {

               elements[i].checked = true;

           }
       }

       function getEditorvalue(sender, args) {
           args.set_cancel(true);
           var buttonList = $telerik.findElement(args.get_cell(), "RadioButtonList1");
           var items = $(buttonList).find("input");
           for (var i = 0; i < items.length; i++) {
               if (items[i].checked) {

                   args.set_value(items[i].value);
                   break;
               }
           }
       }






   </script>

       function SaveChangesInGrid(sender, args) {
           var grid = $find('<%=gridMenuMixConfig.ClientID%>');

       grid.get_batchEditingManager().saveChanges(grid.get_masterTableView());
       alert('Thank you!Your changes have been saved.');
   }

<telerik:RadGrid ID="gridMenuMixConfig" GridLines="None" runat="server" AllowAutomaticDeletes="True" skin="Office2010Silver" Allowsorting="True"

                            AllowAutomaticInserts="True" PageSize="10" Width="1000px" OnItemDeleted="gridMenuMixConfig_ItemDeleted" OnItemInserted="gridMenuMixConfig_ItemInserted"

                            OnItemUpdated="gridMenuMixConfig_ItemUpdated" OnPreRender="gridMenuMixConfig_PreRender" AllowAutomaticUpdates="True" AllowPaging="True" OnItemDataBound="gridMenuMixConfig_ItemDataBound"

                            AutoGenerateColumns="False" OnBatchEditCommand="gridMenuMixConfig_BatchEditCommand" DataSourceID="SqlDataSource1">

 

                            <mastertableview commanditemdisplay="Bottom" datakeynames="PKey"

                                horizontalalign="NotSet" editmode="Batch" autogeneratecolumns="False" datasourceid="SqlDataSource1">

 

 

                <CommandItemSettings ShowAddNewRecordButton="false" ShowCancelChangesButton="False" ShowRefreshButton="False" ShowSavechangesButton="false"  />

                <Columns>

                    <telerik:GridBoundColumn DataField="CrunchTimePLU"  ReadOnly="True" HeaderStyle-Width="210px" HeaderText="CrunchTimePLU" SortExpression="CrunchTimePLU"

                        UniqueName="CrunchTimePLU">

                        

                    </telerik:GridBoundColumn>

                    <telerik:GridBoundColumn DataField="Descr" ReadOnly="True" HeaderStyle-Width="210px" HeaderText="Description" SortExpression="Descr"

                        UniqueName="Descr">

                        

                    </telerik:GridBoundColumn>

                    <telerik:GridBoundColumn DataField="GLAccount" ReadOnly="True" HeaderStyle-Width="100px" HeaderText="GL Account" SortExpression="GLAccount"

                        UniqueName="GLAccount">

                        

                    </telerik:GridBoundColumn>

                    

                     

                    <telerik:GridBoundColumn DataField="StorePLU" HeaderStyle-Width="200px" HeaderText="Store PLU"

                        SortExpression="Active" UniqueName="StorePLU" >

                        <ItemStyle CssClass="backcolor" />

                    </telerik:GridBoundColumn>

              

                      

<telerik:GridTemplateColumn UniqueName="Display" HeaderText="Display?" Datafield="Display">

                <ItemTemplate>

                    <%# Eval("Display")%>

                </ItemTemplate>

                <EditItemTemplate>

                    <asp:RadioButtonList runat="server" ID="RadioButtonList1" RepeatDirection="Horizontal"    >

                        <asp:ListItem Text="Yes" Value="Y" ></asp:ListItem>

                        <asp:ListItem Text="No" Value="N"></asp:ListItem>                       

                    </asp:RadioButtonList>

                </EditItemTemplate>

    </telerik:GridTemplateColumn>

  

 

                     

                    

                </Columns>

            </mastertableview>

                            <clientsettings allowkeyboardnavigation="true">

 

                                <ClientEvents OnBatchEditSetEditorValue="setEditorValue" OnBatchEditGetEditorValue="getEditorvalue"/>

                                <%--<Resizing AllowColumnResize="true" ResizeGridOnColumnResize="False" AllowResizeToFit="true" />--%>

                                 <Scrolling AllowScroll="true" UseStaticHeaders="true"></Scrolling>

            <Resizing AllowColumnResize="true" EnableRealTimeResize="true" />

                               <%-- <Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="true" FrozenColumnsCount="2"></Scrolling>--%>

                            </clientsettings>

                        </telerik:RadGrid>

                        </br>

                        <div style="float: right;">

                            <telerik:RadButton AutoPostBack="false" Text="SaveChanges" skin="Sunset" ID="SaveChangesButton" runat="server" OnClientClicked="SaveChangesInGrid"></telerik:RadButton>

                        </div>

[Angel Petrov]

Hello,

Most probably you are receiving a JavaScript error. Please verify this by checking the browser console. You should be able to resolve the problem by conditionally executing the custom client-side logic only for the specific template column.

JavaScript:

function setEditorValue(sender, args) {
    if (args.get_columnUniqueName() === "Display") {
        args.set_cancel(true);
        var value = args.get_value();
        var buttonList = $telerik.findElement(args.get_cell(), "RadioButtonList1");
        var items = $(buttonList).find("input");
        for (var i = 0; i < items.length; i++) {
            if (items[i].value == value) {
                items[i].checked = true;
            }
            else {
                items[i].checked = false;
            }
        }
    }
}

function getEditorvalue(sender, args) {
    if (args.get_columnUniqueName() === "Display") {
        args.set_cancel(true);
        var buttonList = $telerik.findElement(args.get_cell(), "RadioButtonList1");
        var items = $(buttonList).find("input");
        for (var i = 0; i < items.length; i++) {
            if (items[i].checked) {

                args.set_value(items[i].value);
                break;
            }
        }
    }
}

Regards,
Angel Petrov
Telerik