dropdown list won't polpuate values from database - asp.net

Question

I'm stuck with a problem to populate a DropDownList control with values from the database using item field template in read only mode. I appreciate a detailed explanation, since I'm new to ASP.NET. Below is the code and the error I'm getting:
'PictureReadOnlyCategories' has a SelectedValue which is invalid because it does not exist in the list of items.
Parameter name: value Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.
Exception Details: System.ArgumentOutOfRangeException: 'PictureReadOnlyCategories' has a SelectedValue which is invalid because it does not exist in the list of items.
Parameter name: value
The code for this is :
<asp:SqlDataSource ID="categoriesDataSource" runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand ="SELECT [CategoryID], [Name] FROM [Categories] WHERE ([UserId] = #UserId)">
<SelectParameters>
<asp:ControlParameter ControlID="UserIdValue"
Name="UserId"
PropertyName="Text" />
</SelectParameters>
</asp:SqlDataSource>
<asp:Label ID="UserIdValue" runat="server" Visible="False"></asp:Label>
<asp:GridView ID="gvPictures"
runat="server"
AllowPaging="True"
AllowSorting="True"
AutoGenerateColumns="False"
CellPadding="4"
DataKeyNames="PictureID"
DataSourceID="picturesDataSource"
ForeColor="#333333"
GridLines="None" Width="800px">
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:CommandField ShowDeleteButton="True"
ShowEditButton="True"
ValidationGroup="PictureEdit" />
<asp:TemplateField HeaderText="Category"
SortExpression="CategoryID">
<EditItemTemplate>
<asp:DropDownList ID="pictureEditCategories"
runat="server"
AppendDataBoundItems="True"
DataSourceID="categoriesDataSource"
DataTextField="Name"
DataValueField="CategoryID"
SelectedValue='<%# Bind("CategoryID") %>'>
<asp:ListItem Value="" Text="--Select Category -- "/>
</asp:DropDownList>
</EditItemTemplate>
<ItemTemplate>
<asp:DropDownList ID="PictureReadOnlyCategories"
runat="server"
AppendDataBoundItems="True"
DataSourceID="categoriesDataSource"
DataTextField="Name"
DataValueField="CategoryID"
Enabled="False"
SelectedValue='<%# Bind("CategoryID") %>'>
<asp:ListItem Selected="True" Value="">-- No Category --</asp:ListItem>
</asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Title" SortExpression="Title">
<EditItemTemplate>
<asp:TextBox ID="TextBox1"
runat="server"
EnableViewState="False"
Text='<%# Bind("Title") %>'>
</asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator4"
runat="server"
ControlToValidate="TextBox1"
Display="Dynamic"
ErrorMessage="must enter a title"
ValidationGroup="PictureEdit">
</asp:RequiredFieldValidator>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label1"
runat="server"
Text='<%# Bind("Title") %>'>
</asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Description" SortExpression="Description">
<EditItemTemplate>
<asp:TextBox ID="TextBox2"
runat="server"
Columns="25"
Rows="4"
Text='<%# Bind("Description") %>'
TextMode="MultiLine">
</asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator5"
runat="server"
ControlToValidate="TextBox2"
Display="Dynamic"
ErrorMessage="you must enter a description"
ValidationGroup="PictureEdit">
</asp:RequiredFieldValidator><
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label2"
runat="server"
Text='<%# Bind("Description") %>'>
</asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Date Added" SortExpression="UploadedOn">
<EditItemTemplate>
<asp:Label ID="Label4"
runat="server"
Text='<%# Bind("UploadedOn") %>'>
</asp:Label>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label3"
runat="server"
Text='<%# Bind("UploadedOn") %>'>
</asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:ImageField DataImageUrlField="PictureID"
DataImageUrlFormatString="~/UploadedImages/{0}.jpg"
HeaderText="Image"
ReadOnly="True">
<ControlStyle Width="100px" />
</asp:ImageField>
</Columns>
<EditRowStyle BackColor="#2461BF" />
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#EFF3FB" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#F5F7FB" />
<SortedAscendingHeaderStyle BackColor="#6D95E1" />
<SortedDescendingCellStyle BackColor="#E9EBEF" />
<SortedDescendingHeaderStyle BackColor="#4870BE" />
</asp:GridView>

Answer 1

You need to make sure that you are binding the PictureReadOnlyCategories DDL to populate the items before you are binding the selected item. The problem looks like it is with the order things are being done and that is all. If you try to select an item in a DDL that does not exist then you get that error.