Radgrid with radio buttons to select the default image.

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

    Posted 24 Oct 2010 Link to this post

    Requirements

    RadControls version

    ASP.NET AJAX Q 3 2009

    .NET version

    3.5

    Visual Studio version

    2008

    programming language

    VB

    browser support

    all browsers supported by RadControls


    PROJECT DESCRIPTION

    I needed a grid that 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 needed 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 wanted to add a radio button to the grid so that when the user selects 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.

    I used the following to accomplish this:

    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:My_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
  2. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 27 Oct 2010 Link to this post

    Hello Allan,

    Thank you for sharing your experience with the community. I hope other users will find the demo useful for their case as well.  I have updated your Telerik points for the involvement.

    All the best,
    Pavlina
    the Telerik team
    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 Public Issue Tracking system and vote to affect the priority of the items
Back to Top