This is a migrated thread and some comments may be shown as answers.

RadioButtonList in Itemtemplate

11 Answers 449 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Robert asked on 07 Aug 2009, 01:03 AM

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>

11 Answers, 1 is accepted

answered on 10 Aug 2009, 01:05 PM

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.

answered on 26 Aug 2009, 05:16 PM

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

answered on 31 Aug 2009, 04:26 PM

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.

answered on 28 Jan 2013, 02:03 PM

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

        }
    }

answered on 29 Dec 2015, 07:41 PM

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>

answered on 04 Jan 2016, 11:58 AM

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

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 Feedback Portal and vote to affect the priority of the items

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Extended Reality

Free Tools

RadioButtonList in Itemtemplate

11 Answers, 1 is accepted