RadGrid radio button

2 posts, 0 answers
  1. Allan
    Allan avatar
    121 posts
    Member since:
    Jun 2008

    Posted 23 Oct 2010 Link to this post

    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.


  2. Allan
    Allan avatar
    121 posts
    Member since:
    Jun 2008

    Posted 24 Oct 2010 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top