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

RadGrid radio button

1 Answer 235 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Allan
Top achievements
Rank 2
Allan asked on 24 Oct 2010, 12:04 AM
I have a very simple Grid with a template field containing a radio button:

<telerik:RadGrid ID="rg_VehicleImages" runat="server" 
                  AllowAutomaticDeletes="True" AutoGenerateDeleteColumn="True" CssClass="radgrid" 
                  DataSourceID="sds_ImagesVehicle" GridLines="None" Width="220px">
                  <mastertableview autogeneratecolumns="False" datakeynames="IDImages" 
                  datasourceid="sds_ImagesVehicle">
                      <rowindicatorcolumn>
                          <HeaderStyle Width="20px" />
                      </rowindicatorcolumn>
                      <expandcollapsecolumn>
                          <HeaderStyle Width="20px" />
                      </expandcollapsecolumn>
                      <Columns>
                          <telerik:GridBoundColumn DataField="IDimages" DefaultInsertValue="" 
                              HeaderText="" ItemStyle-ForeColor="White" ItemStyle-Width="2px" 
                              SortExpression="True" Visible="True">
                              <HeaderStyle Width="2px" />
                              <ItemStyle ForeColor="White" Width="2px" />
                          </telerik:GridBoundColumn>
                          <telerik:GridImageColumn AlternateText="Thumbnail" 
                              DataImageUrlFields="FilePath, ThumbnailName" DataImageUrlFormatString="{0}/{1}" 
                              DataType="System.String" FooterText="ImageColumn footer" HeaderText="" 
                              ImageAlign="Middle" UniqueName="vehicleimage">
                              <HeaderStyle Width="75px" />
                          </telerik:GridImageColumn>
                          <telerik:GridBoundColumn DataField="ThumbnailName" DefaultInsertValue="" 
                              HeaderText="ThumbnailName" SortExpression="ThumbnailName" 
                              UniqueName="ThumbnailName" Visible="False">
                          </telerik:GridBoundColumn>
                          <telerik:GridTemplateColumn DefaultInsertValue="" UniqueName="rbt_VehicleImage">
                              <ItemTemplate>
                                  <asp:RadioButton ID="rbt_VehicleImage" GroupName="MyGroup"
                                  onclick="MyClick(this,event)" runat="server" />
                              </ItemTemplate>
                          </telerik:GridTemplateColumn>
                      </Columns>
                  </mastertableview>
                  <clientsettings>
                      <clientevents onrowdblclick="RowClick" />
                  </clientsettings>
              </telerik:RadGrid>

The grid displays images of a vehicle selected from a database on the key field IDVehicle where tbl_Images.IDVehicle = tbl_Vehicles.IDVehicle

There may be many images for the vehicle so I need to be able to allow the user to select one image as the 'default' or main image to use on reports. To do this I thought it would be simple to add a radio button to the grid so that when the user selectes the radio button the database would be updated so that the DefaultImage field (SQLDataType = BIT) would be set to True for the selected radio button and all of the other buttons with the same IDVehicle would be set to False. Something like:

Protected Sub rg_VehicleImages_ItemDataBound(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridItemEventArgs) Handles rg_VehicleImages.ItemDataBound
    If TypeOf e.Item Is GridDataItem Then
        Dim item As GridDataItem = DirectCast(e.Item, GridDataItem)
        Dim RadioBtn As RadioButton = DirectCast(item.FindControl("rbt_VehicleImage"), RadioButton)
        If RadioBtn.Checked = False Then
            Dim sql As String
            Dim strConnString As [String] = System.Configuration.ConfigurationManager.ConnectionStrings("CF_SQL_Connection").ConnectionString()
            sql = "UPDATE CF_Images SET DefaultImage = @Value WHERE IDImages = @IDImages"
            Dim connection As New SqlConnection(strConnString)
            Dim command As New SqlCommand(sql, connection)
            Dim IDImages As Int32 = DirectCast(item.GetDataKeyValue("IDImages"), Int32)
            command.Parameters.Add("@IDImages", SqlDbType.Int).Value = IDImages
            command.Parameters.Add("@Value", SqlDbType.Int).Value = "0"
            command.Connection.Open()
            command.ExecuteNonQuery()
            command.Connection.Close()
        Else
            Dim sql As String
            Dim strConnString As [String] = System.Configuration.ConfigurationManager.ConnectionStrings("CF_SQL_Connection").ConnectionString()
            sql = "UPDATE CF_Images SET DefaultImage = @Value WHERE IDVehicles = @IDVehicles AND IDImages = @IDImages"
            Dim connection As New SqlConnection(strConnString)
            Dim command As New SqlCommand(sql, connection)
            Dim IDImages As Int32 = DirectCast(item.GetDataKeyValue("IDImages"), Int32)
            Dim IDVehicles As String = Request.QueryString("IDVehicles")
            command.Parameters.Add("@IDVehicles", SqlDbType.Int).Value = IDVehicles
            command.Parameters.Add("@IDImages", SqlDbType.Int).Value = IDImages
            command.Parameters.Add("@Value", SqlDbType.Int).Value = "1"
            command.Connection.Open()
            command.ExecuteNonQuery()
            command.Connection.Close()
        End If
    End If
End Sub

Of course this does not work. I am not sure if it is because I am attempting this using the Grid ItemDataBound argument and not one associated with the radio button.

Any help much appreciated.


1 Answer, 1 is accepted

Sort by
0
Allan
Top achievements
Rank 2
answered on 25 Oct 2010, 02:27 AM
SOLUTION

Here is the working code for other with this same issue:

ASPX

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="lab.aspx.vb" Inherits="lab" %>
  
<%@ Register Assembly="Telerik.Web.UI, Version=2009.3.1208.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4"
    Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  
<head runat="server">
    <title></title>
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
      
                     <script type="text/javascript">
                         function MyClick(sender, eventArgs) {
                             var inputs = document.getElementById("<%= rg_VehicleImages.MasterTableView.ClientID %>").getElementsByTagName("input");
                             for (var i = 0, l = inputs.length; i < l; i++) {
                                 var input = inputs[i];
                                 if (input.type != "radio" || input == sender)
                                     continue;
                                 input.checked = false;
                             }
                         }  
    </script>  
                      
         </telerik:RadCodeBlock>  
</head>
<body>
    <form id="form1" runat="server">
    <div>
      
                    <telerik:RadGrid ID="rg_VehicleImages" runat="server" 
                        AllowAutomaticDeletes="True" AutoGenerateDeleteColumn="True" CssClass="radgrid" 
                        DataSourceID="sds_ImagesVehicle" GridLines="None" Width="220px">
                        <mastertableview autogeneratecolumns="False" datakeynames="IDImages" 
                        datasourceid="sds_ImagesVehicle">
                            <rowindicatorcolumn>
                                <HeaderStyle Width="20px" />
                            </rowindicatorcolumn>
                            <expandcollapsecolumn>
                                <HeaderStyle Width="20px" />
                            </expandcollapsecolumn>
                            <Columns>
                                         <telerik:GridTemplateColumn  DefaultInsertValue="" UniqueName="rbt_VehicleImage">
                                    <ItemTemplate>
                                        <asp:RadioButton  ID="rbt_VehicleImage" GroupName="MyGroup"
                                        onclick="MyClick(this,event)" runat="server" AutoPostBack="True"
                                        checked='<%# IF(Eval("DefaultImage") is DBNull.Value, False, Eval("DefaultImage")) %>'
                                        oncheckedchanged="rbt_VehicleImage_CheckedChanged" />
                                    </ItemTemplate>
                                </telerik:GridTemplateColumn>
                                <telerik:GridBoundColumn DataField="IDimages" DefaultInsertValue="" 
                                    HeaderText="" ItemStyle-ForeColor="White" ItemStyle-Width="2px" 
                                    SortExpression="True" Visible="True" UniqueName="IDimages">
                                    <HeaderStyle Width="2px" />
                                    <ItemStyle ForeColor="White" Width="2px" />
                                </telerik:GridBoundColumn>
                                <telerik:GridImageColumn AlternateText="Thumbnail" 
                                    DataImageUrlFields="FilePath, ThumbnailName" DataImageUrlFormatString="{0}/{1}" 
                                    DataType="System.String" FooterText="ImageColumn footer" HeaderText="" 
                                    ImageAlign="Middle" UniqueName="vehicleimage">
                                    <HeaderStyle Width="75px" />
                                </telerik:GridImageColumn>
                                <telerik:GridBoundColumn DataField="ThumbnailName" DefaultInsertValue="" 
                                    HeaderText="ThumbnailName" SortExpression="ThumbnailName" 
                                    UniqueName="ThumbnailName" Visible="False">
                                </telerik:GridBoundColumn>
  
  
  
                            </Columns>
                        </mastertableview>
  
                    </telerik:RadGrid>
      
                                <br />
      
                                <asp:Button ID="Button1" runat="server" Text="Button" />
                                <br />
                    <br />
      
    </div>
    <asp:SqlDataSource ID="sds_ImagesVehicle" runat="server" ConnectionString="<%$ ConnectionStrings:CF_SQL_Connection %>"
        SelectCommand="SELECT [IDImages], [DefaultImage], [IDModifiedUser], [ModifiedDate], [IDVehicles], [IDEngines], [Title], [FilePath], [FileName], [ThumbnailName], [UserID], [EnterDate] FROM [CF_Images] WHERE ([IDVehicles] = 175)"
        DeleteCommand="DELETE FROM [CF_Images] WHERE [IDImages] = @IDImages"
        InsertCommand=""
        UpdateCommand="">
    <DeleteParameters>
        <asp:Parameter Name="IDImages" Type="Int32" />
    </DeleteParameters>
    <UpdateParameters>
    </UpdateParameters>
    <InsertParameters>
    </InsertParameters>
</asp:SqlDataSource>
  
    <telerik:RadScriptManager ID="RadScriptManager1" Runat="server">
    </telerik:RadScriptManager>
    </form>
</body>
</html>

The bit of java in the above ASPX ensures that only one radio button can be selected.

VB
Imports System.Web.Security
Imports System.Web.Security.Roles
Imports System.Web.Security.Membership
Imports System.Data
Imports System.Data.SqlClient
Imports Telerik.Web.UI
Partial Class lab
    Inherits System.Web.UI.Page
  
  
    Protected Sub rbt_VehicleImage_CheckedChanged(ByVal sender As Object, ByVal e As System.EventArgs)
  
        Dim item As GridDataItem = DirectCast(TryCast(sender, RadioButton).NamingContainer, GridDataItem)
        Dim rdBtn As RadioButton = TryCast(sender, RadioButton)
  
        Dim IDImages As String = item.OwnerTableView.DataKeyValues(item.ItemIndex)("IDImages")
  
        If rdBtn.Checked = True Then
  
            Dim sql As String
            Dim strConnString As [String] = System.Configuration.ConfigurationManager.ConnectionStrings("CF_SQL_Connection").ConnectionString()
            sql = "UPDATE CF_Images SET DefaultImage = @Value WHERE IDVehicles = 175"
            Dim connection As New SqlConnection(strConnString)
            Dim command As New SqlCommand(sql, connection)
  
            command.Parameters.Add("@Value", SqlDbType.Int).Value = "0"
            command.Connection.Open()
            command.ExecuteNonQuery()
            command.Connection.Close()
  
            Dim sql1 As String
            Dim strConnString1 As [String] = System.Configuration.ConfigurationManager.ConnectionStrings("CF_SQL_Connection").ConnectionString()
            sql1 = "UPDATE CF_Images SET DefaultImage = @Value WHERE IDVehicles = 175 AND IDImages = @IDImages"
            Dim connection1 As New SqlConnection(strConnString1)
            Dim command1 As New SqlCommand(sql1, connection1)
  
            command1.Parameters.Add("@Value", SqlDbType.Int).Value = "1"
            command1.Parameters.Add("@IDImages", SqlDbType.Int).Value = IDImages
            command1.Connection.Open()
            command1.ExecuteNonQuery()
            command1.Connection.Close()
  
        Else
  
        End If
  
    End Sub
End Class
Tags
Grid
Asked by
Allan
Top achievements
Rank 2
Answers by
Allan
Top achievements
Rank 2
Share this question
or