| 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" %>
<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