showing/hiding a row in the master-detail grid depending on selection of drop down list TELERIK - vb.net

Required system: i'm trying to create a master detail grid in telerik where if the user changes his/her selection on a drop down list in the master grid, the row underneath his/her current row in the details grid appears, and if his/her selection changes again it would disappear.
background information: this system was designed to allow the end user (petrol station auditor) to inspect petrol station, and if he/she happens to find a violation he/she would immediately identify what action should be taken.i've decided to create a checklist with a drop down menu where if the user finds a violation he/she would change the drop down list appears and the procedure that has to be performed due to the violation is shown.
problem: i'm trying to create an event using selectedindexchanged in the master grid depending on the drop down list selection. if the dropdown list selection is "in violation" the row would appear in the details grid, otherwise it would disappear. the value i'm using to map the master-details rows to each other is called "SRS".
when trying to obtain the row index with variable "rowIndex", i find an error regarding a type change from one type to another performing my typecasting. i've tried rigorously to solve the issue with no results.
i would be very grateful if someone could provide the code to resolve my issue
NOTE: i will highlight the problematic line of code
vb code (problematic code):
Protected Sub SqlDataSource_Selecting(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.SqlDataSourceSelectingEventArgs) Handles SqlDataSource.Selecting
End Sub
Protected Sub DropDownList1_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs)
**PROBLEMATIC LINE** ------------------------> Dim rowIndex As Integer = CType(CType(sender, RadDropDownList).Parent.Parent, GridViewRow).RowIndex
Dim SRSText As String = RadGrid1.MasterTableView.Items(rowIndex).Cells(3).Text
If sender.SelectedValue = "in violation" Then
SqlDataSource1.SelectParameters.Add(":SRSText", SRSText)
RadGrid1.MasterTableView.DetailTables(0).DataSource = SqlDataSource1
RadGrid1.MasterTableView.DetailTables(0).DataBind()
Else
End If
End Sub
End Class
accompanying ASPX code, for further information:
<%# Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false"
CodeFile="Default.aspx.vb" Inherits="_Default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js">
</asp:ScriptReference>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js">
</asp:ScriptReference>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js">
</asp:ScriptReference>
</Scripts>
</telerik:RadScriptManager>
<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server">
</telerik:RadStyleSheetManager>
<telerik:RadTextBox ID="RadTextBox1" runat="server" AutoPostBack="True" LabelWidth="64px"
Resize="None" Text="please enter the PFS number" Width="160px">
</telerik:RadTextBox>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
</telerik:RadAjaxManager>
<asp:SqlDataSource ID="SqlDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
ProviderName="<%$ ConnectionStrings:ConnectionString.ProviderName %>" SelectCommand="SELECT * FROM "CHECKLIST"">
</asp:SqlDataSource>
<p>
</p>
<telerik:RadGrid ID="RadGrid1" runat="server" CellSpacing="0" DataSourceID="SqlDataSource"
GridLines="None" AllowMultiRowSelection="True" AutoGenerateColumns="False">
<ExportSettings>
<Pdf>
<PageHeader>
<LeftCell Text=""></LeftCell>
<MiddleCell Text=""></MiddleCell>
<RightCell Text=""></RightCell>
</PageHeader>
<PageFooter>
<LeftCell Text=""></LeftCell>
<MiddleCell Text=""></MiddleCell>
<RightCell Text=""></RightCell>
</PageFooter>
</Pdf>
</ExportSettings>
<ClientSettings EnablePostBackOnRowClick="True" EnableRowHoverStyle="True">
<Selecting AllowRowSelect="True" />
</ClientSettings>
<MasterTableView DataKeyNames="INSPECTIONNO" DataSourceID="SqlDataSource">
<CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>
<RowIndicatorColumn Visible="True" FilterControlAltText="Filter RowIndicator column">
<HeaderStyle Width="20px"></HeaderStyle>
</RowIndicatorColumn>
<ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column">
<HeaderStyle Width="20px"></HeaderStyle>
</ExpandCollapseColumn>
<DetailTables>
<telerik:GridTableView AutoGenerateColumns="false" DataSourceID="SqlDataSource1"
Width="100%">
<CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>
<ParentTableRelation>
<telerik:GridRelationFields DetailKeyField="SRS" MasterKeyField="SRS"></telerik:GridRelationFields>
</ParentTableRelation>
<RowIndicatorColumn Visible="True" FilterControlAltText="Filter RowIndicator column"></RowIndicatorColumn>
<ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column"></ExpandCollapseColumn>
<EditFormSettings>
<EditColumn FilterControlAltText="Filter EditCommandColumn column"></EditColumn>
</EditFormSettings>
<BatchEditingSettings EditType="Cell"></BatchEditingSettings>
<PagerStyle PageSizeControlType="RadComboBox"></PagerStyle>
</telerik:GridTableView> </DetailTables>
<Columns>
<telerik:GridBoundColumn DataField="PFSNO" DataType="System.Decimal" FilterControlAltText="Filter PFSNO column"
HeaderText="PFSNO" SortExpression="PFSNO" UniqueName="PFSNO">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="INSPECTIONNO" DataType="System.Decimal" FilterControlAltText="Filter INSPECTIONNO column"
HeaderText="INSPECTIONNO" ReadOnly="True" SortExpression="INSPECTIONNO" UniqueName="INSPECTIONNO">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="INPECTIONDATENTIME" FilterControlAltText="Filter INPECTIONDATENTIME column"
HeaderText="INPECTIONDATENTIME" SortExpression="INPECTIONDATENTIME" UniqueName="INPECTIONDATENTIME">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="SRS" DataType="System.Decimal" FilterControlAltText="Filter SRS column"
HeaderText="SRS" SortExpression="SRS" UniqueName="SRS">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="VIOLATIONTYPE" FilterControlAltText="Filter VIOLATIONTYPE column"
HeaderText="VIOLATIONTYPE" SortExpression="VIOLATIONTYPE" UniqueName="VIOLATIONTYPE">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="VIOLATIONDESCRIPTION" FilterControlAltText="Filter VIOLATIONDESCRIPTION column"
HeaderText="VIOLATIONDESCRIPTION" SortExpression="VIOLATIONDESCRIPTION" UniqueName="VIOLATIONDESCRIPTION">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="REMARKS" FilterControlAltText="Filter REMARKS column"
HeaderText="REMARKS" SortExpression="REMARKS" UniqueName="REMARKS">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="ITEM" FilterControlAltText="Filter ITEM column"
HeaderText="ITEM" SortExpression="ITEM" UniqueName="ITEM">
</telerik:GridBoundColumn>
<telerik:GridAttachmentColumn FileName="attachment"
FilterControlAltText="Filter column column" HeaderText="audit status-"
UniqueName="column">
</telerik:GridAttachmentColumn>
<telerik:GridTemplateColumn>
<ItemTemplate>
<telerik:RadDropDownList ID="violDrop" runat="server" DataSourceID="dd2_SqlDataSource1" DataTextField="LISTITEM" DataValueField="LISTITEM" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" AutoPostBack="true"/>
</ItemTemplate>
</telerik:GridTemplateColumn>
</Columns>
<EditFormSettings>
<EditColumn FilterControlAltText="Filter EditCommandColumn column">
</EditColumn>
</EditFormSettings>
<BatchEditingSettings EditType="Cell"></BatchEditingSettings>
<PagerStyle PageSizeControlType="RadComboBox"></PagerStyle>
</MasterTableView>
<PagerStyle PageSizeControlType="RadComboBox"></PagerStyle>
<FilterMenu EnableImageSprites="False">
</FilterMenu>
</telerik:RadGrid>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
ProviderName="<%$ ConnectionStrings:ConnectionString.ProviderName %>" SelectCommand="SELECT * FROM "MEMO" WHERE ("SRS" = :SRS)">
<SelectParameters>
<asp:ControlParameter ControlID="RadGrid1" Name="SRS" PropertyName="SelectedValue"
Type="String" />
</SelectParameters>
</asp:SqlDataSource>
<asp:SqlDataSource ID="dd2_SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
ProviderName="<%$ ConnectionStrings:ConnectionString.ProviderName %>" SelectCommand="SELECT "LISTITEM" FROM "DROPDOWNLIST"">
</asp:SqlDataSource>
</asp:Content>

Please try with the below code snippet.
Let me know if any concern.
Protected Sub DropDownList1_SelectedIndexChanged(sender As Object, e As EventArgs)
Dim item As GridDataItem = TryCast(TryCast(sender, DropDownList).NamingContainer, GridDataItem)
Dim index As Integer = item.ItemIndex
'Access current row index here
End Sub

First of all thanks for the reply
Unfortunately, the code snippet that you have provided didn't work for my case, it gave me an error message stating "object reference was not set to an instance of an object"
Note:I copied and pasted the code changing the name iof the index variable

Related

GridCommandEventArgs items have no data values

I have a RadGrid with which I need to add, update, and delete data. I've gotten the functionality to work, but I also need to do some checking on the data before it gets added/updated, including setting a field based on other data. I also want to log what was done.
My Insert functionality is working. The RadGrid is as follows:
<telerik:RadGrid ID="CarrierRadGrid" runat="server" AllowFilteringByColumn="True" AllowPaging="False" Width="100%" Height="800px" PageSize="20" da
AllowSorting="True" DataSourceID="CarrierData" ShowStatusBar="True"
OnInsertCommand="CarrierRadGrid_InsertCommand" OnItemInserted="CarrierRadGrid_ItemInserted" AllowAutomaticInserts="true"
OnUpdateCommand="CarrierRadGrid_UpdateCommand" OnItemUpdated="CarrierRadGrid_ItemUpdated" AllowAutomaticUpdates="true"
OnDeleteCommand="CarrierRadGrid_DeleteCommand" OnItemDeleted="CarrierRadGrid_ItemDeleted" AllowAutomaticDeletes="true"
Skin="Telerik" AutoGenerateColumns="False" AutoGenerateEditColumn="false" AutoGenerateDeleteColumn="false">
<ClientSettings EnableRowHoverStyle="true" EnablePostBackOnRowClick="false">
<Scrolling AllowScroll="true" UseStaticHeaders="true" SaveScrollPosition="true" FrozenColumnsCount="5" />
<Selecting AllowRowSelect="true" />
<Resizing AllowColumnResize="true" AllowResizeToFit="true" />
<ClientEvents OnRowDeleting="void 0" />
</ClientSettings>
<GroupingSettings CaseSensitive="false" />
<ExportSettings HideStructureColumns="true">
</ExportSettings>
<HeaderContextMenu EnableAutoScroll="False">
</HeaderContextMenu>
<MasterTableView DataKeyNames="CarrierScacID" DataSourceID="CarrierData" AllowAutomaticInserts="true" AllowAutomaticDeletes="True" AllowAutomaticUpdates="true"
CommandItemDisplay="Top" HierarchyLoadMode="ServerOnDemand" EditMode="InPlace">
<CommandItemSettings
ShowExportToWordButton="false"
ShowExportToCsvButton="false"
ShowExportToPdfButton="false"
ShowAddNewRecordButton="true">
</CommandItemSettings>
<Columns>
<telerik:GridEditCommandColumn ButtonType="ImageButton" CancelText="Cancel" EditText="Edit" InsertText="Add"
UpdateText="Update" HeaderStyle-Width="30px" UniqueName="CarrierEditButton" />
<telerik:GridClientDeleteColumn ButtonType="ImageButton" Text="Delete" HeaderStyle-Width="30px" UniqueName="CarrierDeleteButton"
ConfirmTextFields="CarrierScac" ConfirmTextFormatString="Are you sure you want to delete carrier {0}?" CommandName="Delete" />
<telerik:GridBoundColumn DataField="CarrierScacID" HeaderText="CarrierScacID" UniqueName="CarrierScacID" ReadOnly="True" Display="false" />
<telerik:GridTemplateColumn>
<EditItemTemplate>
<telerik:RadLabel runat="server" ID="CarrierScac" Text='<% #Bind("CarrierScac") %>' ViewStateMode="Disabled" Enabled="false" />
</EditItemTemplate>
<InsertItemTemplate>
<telerik:RadTextBox ID="CarrierScac" runat="server" Text='<% #Bind("CarrierScac") %>' />
</InsertItemTemplate>
<ItemTemplate>
<telerik:RadLabel runat="server" ID="CarrierScac" Text='<% #Bind("CarrierScac") %>' />
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridBoundColumn DataField="CarrierScac" HeaderText="SCAC" UniqueName="CarrierScac" FilterControlWidth="40px" HeaderStyle-Width="75px" />
<telerik:GridBoundColumn DataField="CarrierName" HeaderText="Carrier Name" UniqueName="CarrierName" ItemStyle-Wrap="false"
HeaderStyle-Width="200px" FilterControlWidth="160px" FilterControlAltText="Filter by Carrier Name" SortExpression="CarrierName" />
<telerik:GridBoundColumn DataField="Address" HeaderText="Address" UniqueName="Address" ItemStyle-Wrap="false"
HeaderStyle-Width="200px" FilterControlWidth="160px" FilterControlAltText="Filter by Address" SortExpression="Address" />
<telerik:GridBoundColumn DataField="City" HeaderText="City" UniqueName="City" HeaderStyle-Width="100px" />
<telerik:GridBoundColumn DataField="State" HeaderText="State" UniqueName="State" FilterControlWidth="30px" HeaderStyle-Width="65px" />
<telerik:GridBoundColumn DataField="ZIP" HeaderText="ZIP" UniqueName="ZIP" FilterControlWidth="55px" HeaderStyle-Width="90px" />
<telerik:GridBoundColumn DataField="Country" HeaderText="Country" UniqueName="Country" FilterControlWidth="55px" HeaderStyle-Width="90px" />
<telerik:GridBoundColumn DataField="Contact" HeaderText="Contact" UniqueName="Contact" ItemStyle-Wrap="false" HeaderStyle-Width="110px" />
<telerik:GridBoundColumn DataField="Phone" HeaderText="Phone" UniqueName="Phone" ItemStyle-Wrap="false" HeaderStyle-Width="115px" />
<telerik:GridBoundColumn DataField="Fax" HeaderText="Fax" UniqueName="Fax" ItemStyle-Wrap="false" HeaderStyle-Width="115px" />
<telerik:GridBoundColumn DataField="User" HeaderText="User" UniqueName="User" HeaderStyle-Width="120px" ReadOnly="true" />
<telerik:GridBoundColumn DataField="Update" HeaderText="Update" UniqueName="Update" ItemStyle-Wrap="false" HeaderStyle-Width="230px" ReadOnly="true" />
<telerik:GridBoundColumn DataField="Comments" HeaderText="Comments" UniqueName="Comments" ItemStyle-Wrap="false" HeaderStyle-Width="230px" ReadOnly="true" />
</Columns>
</MasterTableView>
</telerik:RadGrid>
In code-behind, I have the following:
Protected Sub CarrierRadGrid_InsertCommand(sender As Object, e As GridCommandEventArgs)
e = SetCommentsField(e)
End Sub
Protected Sub CarrierRadGrid_ItemInserted(sender As Object, e As GridInsertedEventArgs)
Dim msg As String = String.Format("New carrier (Carrier Code: {0}) added to the database.", e.Item.Cells(6).Text)
Log(msg)
MessageBox(msg)
End Sub
Private Shared Function SetCommentsField(e As GridCommandEventArgs) As GridCommandEventArgs
If String.IsNullOrEmpty(e.Item.Cells(18).Text) Then
Dim update As String = e.Item.Cells(17).Text
If Not String.IsNullOrEmpty(update) Then
e.Item.Cells(18).Text = String.Format("Modified by {0}", update)
End If
End If
Return e
End Function
But when debugging, I find all of the e.Item.Cells Text properties are " ". Yet the record added to the database has the data I put into the fields, as it should.
What could be missing? Or extra?
EDIT: Including the whole RadGrid, instead of only the part I thought was relevant.
Below are two options to access the cell data.
This accesses the newly inserted data using a hashtable/dictionary. It only retrieves data from EditItems so read-only rows are not included
This converts your editItem to a data item and accesses the current cell which you will find is consistently because the data has not been put there yet. THe data entered only exists in the edit items.
Protected Sub CarrierRadGrid_InsertCommand(sender As Object, e As GridCommandEventArgs)
'1
Dim insertValues As New Hashtable()
CType(e.Item, GridEditableItem).ExtractValues(insertValues)
Dim dd = insertValues("CarrierScac")
'2
Dim item As GridDataItem = CType(e.Item, GridDataItem)
Dim itemD = item("CarrierScac").Text
e = SetCommentsField(e)
End Sub
The above should get you what you need I suspect, however to add some color
Telerik uses to denote an empty/null cell text field which makes sense here because the cell text you are trying to grab does not exist. It IS empty and you ARE accessing it. The fields you are accessing, however, are read only and there does not appear to be a default value. Are you setting that elsewhere? I've included a function below that checks for String.IsNullOrEmpty and that we use frequently to spare some logic. I'd put it in a safe place and consume it as needed because empty cells in a radgrid will never actually be string.empty.
Public Function RadGridCellIsNullOrEmpty(value As String) As Boolean
value = value.Trim()
Return (String.IsNullOrEmpty(value) OrElse String.IsNullOrWhiteSpace(value) OrElse value.Contains(" "))
End Function
Private Shared Function SetCommentsField(byRef e As GridCommandEventArgs) As GridCommandEventArgs
If RadGridCellIsNullOrEmpty(e.Item.Cells(18).Text) Then
Dim update As String = e.Item.Cells(17).Text
If Not RadGridCellIsNullOrEmpty(update) Then
e.Item.Cells(18).Text = String.Format("Modified by {0}", update)
End If
End If
Return e
End Function

delete record from table only not affect in database

If I try to delete record from table but how to use it, I don't know.
In a radgrid I hav use delete link if I have press delete it's I'll be work but I have try to next level of delete.
If I press delete that data I'll be delete on the grid but it's not affect on Sql database but we don't store data from other table can explain how to use it.
<Telerik:RadGrid ID="GVUpload" runat="server" AllowMultiRowSelection="false" GridLines="None"
CellPadding="1" CellSpacing="1" HeaderStyle-HorizontalAlign="Center" Skin="WebBlue"
AllowPaging="true" PageSize="1000" Height="360PX" Width="100%">
<ClientSettings EnableRowHoverStyle="true">
<Selecting AllowRowSelect="false" />
<Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="true" FrozenColumnsCount="2" />
<Resizing AllowColumnResize="true" />
</ClientSettings>
<MasterTableView AutoGenerateColumns="false" DataKeyNames="pendingdump_gid">
<Columns>
<Telerik:GridTemplateColumn HeaderText="Select" ItemStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Middle" ItemStyle-Width="10%" HeaderStyle-Width="10%" >
<HeaderTemplate>
<asp:CheckBox id="chkall" Text="Select" runat="server" Checked="false" onclick="javascript:select_deselectAll (this.checked, this.id, 'chkall','chkupload');" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chkupload" runat="server" CausesValidation="false" Checked="false" onclick="javascript:select_deselectAll (this.checked, this.id, 'chkall','chkupload');" />
</ItemTemplate>
</Telerik:GridTemplateColumn>
<Telerik:GridBoundColumn DataField="pendingdump_gid" HeaderText="Cust ID" Visible="false"
ItemStyle-HorizontalAlign="Center">
</Telerik:GridBoundColumn>
<Telerik:GridBoundColumn DataField="pendingdump_date" HeaderText="Date" ItemStyle-HorizontalAlign="Left" ItemStyle-Width="10%" HeaderStyle-Width="10%" ></Telerik:GridBoundColumn>
<Telerik:GridBoundColumn DataField="pendingdump_refno" HeaderText="Ref.No." ItemStyle-HorizontalAlign="Left" ItemStyle-Width="30%" HeaderStyle-Width="20%" ></Telerik:GridBoundColumn>
<Telerik:GridBoundColumn DataField="pendingdump_name" HeaderText="Party's Name" ItemStyle-HorizontalAlign="Left" ItemStyle-Width="20%" HeaderStyle-Width="10%" ></Telerik:GridBoundColumn>
<Telerik:GridBoundColumn DataField="pendingdump_amount" HeaderText="Pending Amount" ItemStyle-HorizontalAlign="Left" ItemStyle-Width="20%" HeaderStyle-Width="10%" ></Telerik:GridBoundColumn>
<Telerik:GridBoundColumn DataField="pendingdump_duedate" HeaderText="Due On" ItemStyle-HorizontalAlign="Left" ItemStyle-Width="20%" HeaderStyle-Width="10%" ></Telerik:GridBoundColumn>
<Telerik:GridBoundColumn DataField="pendingdump_overduedays" HeaderText="Overdue by Days" ItemStyle-HorizontalAlign="Left" ItemStyle-Width="20%" HeaderStyle-Width="20%" ></Telerik:GridBoundColumn>
<Telerik:GridTemplateColumn HeaderText="Action" ItemStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Middle" ItemStyle-Width="30%" HeaderStyle-Width="20%" >
<ItemTemplate>
<asp:LinkButton ID="lnkbtnDelete" runat="server" Text="Delete" CausesValidation="false" ToolTip="Click to Delete"
OnClientClick="javascript:return confirmDelete();" CommandName="lnkbtnDelete" CommandArgument=''
<%# DataBinder.Eval(Container.DataItem, "pendingdump_gid") %>'>
</asp:LinkButton>
</ItemTemplate>
</Telerik:GridTemplateColumn>
</Columns>
<PagerStyle HorizontalAlign="Right" />
</MasterTableView>
</Telerik:RadGrid>
Protected Sub GVUpload_ItemCommand(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridCommandEventArgs) Handles GVUpload.ItemCommand
lblerrmsg.Text = ""
If e.CommandName = "lnkbtnDelete" Then
Gobjdbconn.OpenConn()
MsSql = ""
MsSql = "Delete vsolv_tmp_tpendingdump where pendingdump_gid = '" & e.CommandArgument() & "' and pendingdump_isremoved = 'N'"
MnResult = Gobjdbconn.ExecuteNonQuerySQL(MsSql)
If MnResult = 1 Then
lblerrmsg.Text = "Record Deleted Successfully"
Else
lblerrmsg.Text = "Record not Deleted"
End If
POPSummary()
End If
End Sub

Why doesn't my page refresh when selecting different Drop Down List Data

Built a simple page linked to a SQL data source with two drop down lists. I'm very new at ASP.NET so excuse my simple newbie errors. At least I'm learning. Anyway object is to have 2 drop down lists, select a last name, and a company name using the common Northwind Database. I'm using the empID and custID as sql parameters. I didn't want the page to load the grid initially so I hid that and also created a clear button. When i run the page it will pull the correct data but when I select a different last name the page pulls the original data. Can someone help me understand where my mistake is?
asp.net code:
<%# Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header><h1>Welcome to my First SQL Data Source Page</h1></header>
<h3>Select a Value from both drop Down Lists to find the orders that employee made</h3>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="DropDownList1" runat="server" AppendDataBoundItems="True" AutoPostBack="True" DataSourceID="SqlDataSource1" DataTextField="LastName" DataValueField="EmployeeID" BackColor="#00CCFF" Height="25px" Width="200px">
<asp:ListItem>--Select Last Name--</asp:ListItem>
</asp:DropDownList>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" SelectCommand="SELECT [LastName], [EmployeeID] FROM [Employees]"></asp:SqlDataSource>
<br />
<br />
<asp:DropDownList ID="DropDownList2" runat="server" AppendDataBoundItems="True" AutoPostBack="True" DataSourceID="SqlDataSource2" DataTextField="CompanyName" DataValueField="CustomerID" BackColor="#00CCFF" Height="25px" Width="200px">
<asp:ListItem>--Select Company Name--</asp:ListItem>
</asp:DropDownList>
<asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" SelectCommand="SELECT [CompanyName], [CustomerID] FROM [Customers]"></asp:SqlDataSource>
<br />
<br />
<asp:SqlDataSource ID="SqlDataSource3" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" SelectCommand="SELECT * FROM ORDERS
WHERE
EmployeeID = #P1
AND
CustomerID = #P2
">
<SelectParameters>
<asp:ControlParameter ControlID="DropDownList1" Name="P1" PropertyName="SelectedValue" />
<asp:ControlParameter ControlID="DropDownList2" Name="P2" PropertyName="SelectedValue" />
</SelectParameters>
</asp:SqlDataSource>
<br />
<br />
<asp:GridView ID="GridView1" runat="server" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False" DataKeyNames="OrderID" DataSourceID="SqlDataSource3"
EmptyDataText="There were no orders by this employee">
<alternatingrowstyle backcolor="#0066FF"
forecolor="DarkBlue"
font-italic="true"/>
<Columns>
<asp:BoundField DataField="OrderID" HeaderText="OrderID" InsertVisible="False" ReadOnly="True" SortExpression="OrderID" />
<asp:BoundField DataField="CustomerID" HeaderText="CustomerID" SortExpression="CustomerID" />
<asp:BoundField DataField="EmployeeID" HeaderText="EmployeeID" SortExpression="EmployeeID" />
<asp:BoundField DataField="OrderDate" HeaderText="OrderDate" SortExpression="OrderDate" />
<asp:BoundField DataField="RequiredDate" HeaderText="RequiredDate" SortExpression="RequiredDate" />
<asp:BoundField DataField="ShippedDate" HeaderText="ShippedDate" SortExpression="ShippedDate" />
<asp:BoundField DataField="ShipVia" HeaderText="ShipVia" SortExpression="ShipVia" />
<asp:BoundField DataField="Freight" HeaderText="Freight" SortExpression="Freight" />
<asp:BoundField DataField="ShipName" HeaderText="ShipName" SortExpression="ShipName" />
<asp:BoundField DataField="ShipAddress" HeaderText="ShipAddress" SortExpression="ShipAddress" />
<asp:BoundField DataField="ShipCity" HeaderText="ShipCity" SortExpression="ShipCity" />
<asp:BoundField DataField="ShipRegion" HeaderText="ShipRegion" SortExpression="ShipRegion" />
<asp:BoundField DataField="ShipPostalCode" HeaderText="ShipPostalCode" SortExpression="ShipPostalCode" />
<asp:BoundField DataField="ShipCountry" HeaderText="ShipCountry" SortExpression="ShipCountry" />
</Columns>
<HeaderStyle BackColor="#0066FF" ForeColor="White" />
</asp:GridView>
<br />
<br />
<br />
<asp:Button ID="Button1" runat="server" Text="Search" BackColor="#00CCFF" BorderStyle="Inset" EnableTheming="True" Height="30px" Width="150px" />
<br />
<br />
<br />
<asp:Button ID="Button2" runat="server" Text="Clear" BackColor="#00CCFF" BorderStyle="Inset" Height="30px" Width="150px" />
</div>
</form>
</body>
</html>
Visual Basic Code:
Partial Class _Default
Inherits System.Web.UI.Page
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
GridView1.Visible = False
End Sub
Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
GridView1.Visible = True
End Sub
Protected Sub Button2_Click(sender As Object, e As EventArgs) Handles Button2.Click
GridView1.Visible = False
End Sub
End Class
Use the Page.IsPostBack method to check whether it is a fresh load or in response to user action. Hide only when loading the page first time.
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not IsPostBack() Then GridView1.Visible = False
End Sub

Multipule information and Pics in multipule gridviews in ASP.NET using VB

I am trying to build a website and am running into a little trouble. My coding knowledge and savvy are armature at best,if you know a better way to do this than please by all means let me know.
On my Featured Bar page I have two gridviews set up. gvPicsRandomBar(For pictures only) and GVRandomBars(For Information only). Each has their own SQLDataSource. I have it set up to where GVRandomBars selects a "random" bar through the SQL TOP command. What I'm trying to do is get the gvPicsRandomBar to display a picture of the same "random" bar that is selected by GVRandomBars. Both gridviews are querying from the same table but with different SELECT statements as each gridview is concerned with different items in the same table row.
I thought I had somewhat accomplished this by reading the primary key from the GVRandomBars and placing that value in a Label(lblRandomBar) that I use as a control for gvPicsRandomBar to match up the correct pic to display in it's own gridview as they both query the same database, but I was wrong. Whenever I startup my website I get this error "Index was out of range. Must be non-negative and less than the size of the collection.
Parameter name: index". I'm just not sure where to place this code i.e. (Event) lblRandomBar.Text = GVRandomBars.DataKeys(0).Value.ToString() so that I will not get the above error.
Seperate problems if by miracle I get it to work
One problem I have is that it appears that the value of the primary key is not passed on to lblRandomBar.text. I assume this is because I do not know where to correctly place the code lblRandomBar.Text = GVRandomBars.DataKeys(0).Value.ToString()The other problem I do have when I sometimes get it to work is that the picture displayed in gvPicsRandomBar is one step behind from when I click the search button. Example, I click search for city "Austin" in my dropdown list which could potentially give me a primary key value of 45. The picture for that primary key is not displayed until I click search for another city in the dropdown list and the page posts back to the server.
The value of the primary key is in lblRandomBar.text for the current bar displayed in the GVRandomBars but the picture of the bar associated with that recored does not appear in the gvPicsRandomBar until the search button is clicked and another "random" bar is displayed in the GVRandomBars. So I am looking at a picture in gvPicsRandomBar from the last bar that was brought up in GVRandomBars while another bars information is currently displayed in GVRadnomBars.
I am looking to have the same bar information and bar picture in both gridviews at the same time, and not one step behind like I have currently with the picture in gvPicsRandomBar. Any help would be greatly appreciated. Thanks.
ASP.NET HTML
<%# Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="Random Bar.aspx.vb" Inherits="RGVHappyHour.Featured_Bar" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<center><h2>Random Bar</h2></center>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<p>
<asp:GridView ID="gvPicsRandomBar" runat="server" AutoGenerateColumns="False" CellPadding="4" DataKeyNames="Number,Bar Name,Image" DataSourceID="SqlDataSourceRandomBarPics" ForeColor="#333333" GridLines="None" HorizontalAlign="Center" Width="548px">
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
<Columns>
<asp:ImageField DataImageUrlField="Image" HeaderText="Image" NullDisplayText="No Picture">
</asp:ImageField>
</Columns>
<EditRowStyle BackColor="#999999" />
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#E9E7E2" />
<SortedAscendingHeaderStyle BackColor="#506C8C" />
<SortedDescendingCellStyle BackColor="#FFFDF8" />
<SortedDescendingHeaderStyle BackColor="#6F8DAE" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSourceRandomBarPics" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionStringBars %>" SelectCommand="SELECT * FROM [Bars] WHERE ([Number] = #Number)">
<SelectParameters>
<asp:ControlParameter ControlID="lblRandomBar" Name="Number" PropertyName="Text" Type="Int32" />
</SelectParameters>
</asp:SqlDataSource>
</p>
<p>
<asp:GridView ID="GVRandomBars" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSourceRandomBar" Width="548px" CellPadding="4" ForeColor="#333333" GridLines="None" AllowPaging="True" DataKeyNames="Number" SelectedIndex="0">
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
<Columns>
<asp:BoundField DataField="Bar_Name" HeaderText="Bar Name" SortExpression="Bar_Name" />
<asp:BoundField DataField="Addresss" HeaderText="Addresss" SortExpression="Addresss" />
<asp:BoundField DataField="Phone_Number" HeaderText="Phone Number" SortExpression="Phone_Number" />
<asp:BoundField DataField="Days" HeaderText="Days" SortExpression="Days" />
<asp:BoundField DataField="Happy_Hour" HeaderText="Happy Hour" SortExpression="Happy_Hour" />
</Columns>
<EditRowStyle BackColor="#999999" />
<FooterStyle BackColor="#5D7B9D" ForeColor="White" Font-Bold="True" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<RowStyle ForeColor="#333333" BackColor="#F7F6F3" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#E9E7E2" />
<SortedAscendingHeaderStyle BackColor="#506C8C" />
<SortedDescendingCellStyle BackColor="#FFFDF8" />
<SortedDescendingHeaderStyle BackColor="#6F8DAE" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSourceRandomBar" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionStringBars %>" SelectCommand="SELECT TOP (1) [Number], [Bar Name] AS Bar_Name, Addresss, [Phone Number] AS Phone_Number, Days, [Happy Hour] AS Happy_Hour, [Image] AS Image FROM Bars WHERE (City = #City) ORDER BY NEWID()">
<SelectParameters>
<asp:ControlParameter ControlID="ddlCity" Name="City" PropertyName="SelectedValue" />
</SelectParameters>
</asp:SqlDataSource>
<p>
<table class="style1" style="width: 100%">
<tr>
<td style="width: 220px; text-align: right;" class="style2">
<asp:Label ID="lblCity" runat="server" Text="City:" Font-Size="Large"
ForeColor="#47C2FF"></asp:Label>
</td>
<td style="width: 135px">
<asp:DropDownList ID="ddlCity" runat="server" DataSourceID="SqlDataSourceCity"
DataTextField="City" DataValueField="Number">
</asp:DropDownList>
<asp:SqlDataSource ID="SqlDataSourceCity" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionStringBars %>" SelectCommand="SELECT * FROM [City] ORDER BY [City]"></asp:SqlDataSource>
</td>
<td style="width: 220px; position: relative; text-align: left; vertical-align: middle;">
<asp:Button ID="btnCitySearch" runat="server" Text="Search" />
</td>
</tr>
<tr>
<td style="width: 220px" class="style2" draggable="true">
<asp:Label ID="lblRandomBar" runat="server"></asp:Label>
</td>
<td style="width: 135px">
</td>
<td style="width: 220px">
</td>
</tr>
</table>
</p>
</asp:Content>
Code Behind Random Bar.aspx.vb
Public Class Featured_Bar
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
End Sub
Protected Sub btnCitySearch_Click(sender As Object, e As EventArgs) Handles btnCitySearch.Click
End Sub
Protected Sub GVRandomBars_SelectedIndexChanged(sender As Object, e As EventArgs) Handles GVRandomBars.SelectedIndexChanged
End Sub
Protected Sub btnCitySearch_DataBinding(sender As Object, e As EventArgs) Handles btnCitySearch.DataBinding
lblRandomBar.Text = GVRandomBars.DataKeys(0).Value.ToString()
End Sub
End Class

Error with automatic delete when RadGrid is bound to EntityDataSource

I have a RadGrid that's bound to EntityDataSource. A few of the columns are bound to navigation properties of the bound entity. When I try to delete a record, it gives the following error:
Error: Sys.WebForms.PageRequestManagerServerErrorException: A property named 'Vehicle.VehicleNo' was not found on the entity during an insert, update, or delete operation. Check to ensure that properties specified as binding expressions are available to the data source.
I know if I choose to use the plain foreign key IDs, instead of the navigation properties, everything works. I can easily get the delete to work if I handle it manually. But I"m just thinking there's got to be a way for the automatic delete to work too. Any ideas?
<telerik:RadGrid ID="RadGrid1" runat="server" AllowAutomaticDeletes="True"
AllowFilteringByColumn="True" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False"
DataSourceID="EntityDataSource1" GridLines="None" ShowGroupPanel="True" Skin="Hay"
OnItemUpdated="RadGrid1_ItemUpdated"
OnItemInserted="RadGrid1_ItemInserted" OnItemCommand="RadGrid1_ItemCommand"
Height="400px" Width="700px" CellSpacing="0">
<MasterTableView DataKeyNames="ADChecklistId" DataSourceID="EntityDataSource1" CommandItemDisplay="Top">
<CommandItemSettings AddNewRecordText="Add New Aerial Device Checklist" ShowRefreshButton="false"
ShowAddNewRecordButton="true"></CommandItemSettings>
<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">
<HeaderStyle Width="20px" />
</RowIndicatorColumn>
<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">
<HeaderStyle Width="20px" />
</ExpandCollapseColumn>
<Columns>
<telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditCommandColumn"
HeaderText="Edit">
</telerik:GridEditCommandColumn>
<telerik:GridButtonColumn ButtonType="ImageButton" CommandName="Delete" UniqueName="DeleteCommandColumn" HeaderText="Delete" ConfirmDialogType="RadWindow" ConfirmText="Are you sure you want to delete this record?">
</telerik:GridButtonColumn>
<telerik:GridBoundColumn DataField="Vehicle.VehicleNo" FilterControlAltText="Filter VehicleNo column"
HeaderText="VehicleNo" SortExpression="Vehicle.VehicleNo" UniqueName="Vehicle.VehicleNo">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Employee.FirstName" FilterControlAltText="Filter FirstName column"
HeaderText="FirstName" SortExpression="Employee.FirstName" UniqueName="Employee.FirstName">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Employee.LastName" FilterControlAltText="Filter LastName column"
HeaderText="LastName" SortExpression="Employee.LastName" UniqueName="Employee.LastName">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Utility.UtilityName" HeaderText="Utility" SortExpression="Utility.UtilityName" UniqueName="Utility.UtilityName" >
</telerik:GridBoundColumn>
<telerik:GridDateTimeColumn DataField="CreatedOn" DataType="System.DateTime" FilterControlAltText="Filter CreatedOn column"
HeaderText="CreatedOn" SortExpression="CreatedOn" UniqueName="CreatedOn" DataFormatString="{0:MM/dd/yy}">
</telerik:GridDateTimeColumn>
<telerik:GridBoundColumn DataField="CreatedBy" FilterControlAltText="Filter CreatedBy column"
HeaderText="CreatedBy" SortExpression="CreatedBy" UniqueName="CreatedBy">
</telerik:GridBoundColumn>
<telerik:GridDateTimeColumn DataField="ModifiedOn" DataType="System.DateTime" FilterControlAltText="Filter ModifiedOn column"
HeaderText="ModifiedOn" SortExpression="ModifiedOn" UniqueName="ModifiedOn" DataFormatString="{0:MM/dd/yy}">
</telerik:GridDateTimeColumn>
<telerik:GridBoundColumn DataField="ModifiedBy" FilterControlAltText="Filter ModifiedBy column"
HeaderText="ModifiedBy" SortExpression="ModifiedBy" UniqueName="ModifiedBy">
</telerik:GridBoundColumn>
</Columns>
<EditFormSettings>
<EditColumn FilterControlAltText="Filter EditCommandColumn column">
</EditColumn>
</EditFormSettings>
</MasterTableView>
<ClientSettings AllowDragToGroup="True" EnablePostBackOnRowClick="true">
<Scrolling AllowScroll="True" UseStaticHeaders="True" />
<Resizing AllowColumnResize="true" ClipCellContentOnResize="false" />
</ClientSettings>
<FilterMenu EnableImageSprites="False">
</FilterMenu>
<HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default">
</HeaderContextMenu>
</telerik:RadGrid>
<asp:EntityDataSource ID="EntityDataSource1" runat="server" AutoGenerateWhereClause="True"
ConnectionString="name=MSOpsEntities" DefaultContainerName="MSOpsEntities"
EnableFlattening="False" EnableDelete="True" EntitySetName="ADChecklists"
Include="Vehicle, Employee, Utility" OrderBy="it.CreatedOn DESC"
OnSelecting="EntityDataSource1_Selecting"
ondeleting="EntityDataSource1_Deleting">
<WhereParameters>
<asp:SessionParameter Name="UtilityId" SessionField="utilityId" Type="Int32" />
</WhereParameters>
</asp:EntityDataSource>
Try setting ReadOnly="true" on the GridBoundColumns containing the navigation properties, this worked for me. Maybe also you could use template columns with Eval rather than Bind