RadGrid DropDown Binding

[Nicole Griesmeyer]

Hello,

I've been trying to teach myself, with no prior web development experience, to design a program for my internship. In order to get familiar with telerik's tools, I've been making practice applications and everything was going fine, until I ran into a snag.

For quite some time now, I've been trying to figure out how to use the dropdownlists in Radgrid to my advantage. I would like a dropdownlist to reference another table, but from, of course, the same database. For instance, say I make a table using the provided telerik.mdf database. I display from the appointments table many fields, including the userid, and would then like to display, based on that userid, the corresponding username from the "users" table. I hope that I'm articulating my needs well enough- I'm new at this.

I have tried a number of things. I have tried, on the properties menu, trying to get the dropdownlist to reference another database, but then datafield never recognizes fields from that second datasource, but if I reference the first datasource, the listtextfield and listvaluefield can't see things from the second table. Maybe theres something I'm missing here about how it works, but I felt like no combination would work here.

I have also tried manually populating the dropdownlist from the codebehind, but the list always ends up empty. I try filling up a dataset with a dataadapter and then giving the dropdownlist the information that way, but it never fills, whether I try to set the properties that way or grab the elements from the dataset individually and put them in- I'm just always ending up with empty lists.

Obviously 2 things are true- I have changed the code around many times and this is just a snapshot, so I hope all of my explanations have articulated well enough the other things I have tried. Furthermore I bet the code is poorly written at this point- I'm still just experimenting with how these things work. Nonetheless, here is the aspx code:

<%

@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AgainWithTheInternStuff._Default" %>

 

<%

@ Register assembly="Telerik.Web.UI" 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">

 

<

 

html xmlns="http://www.w3.org/1999/xhtml" >

 

<

 

head runat="server">

 

 

<title></title>

 

 

<style type="text/css">

 

 

.style1

 

{

 

margin-top: 0px;

 

}

 

</style>

 

</

 

head>

 

<

 

body>

 

 

<form id="form1" runat="server">

 

 

<div>

 

 

 

</div>

 

 

<asp:ScriptManager ID="ScriptManager1" runat="server">

 

 

</asp:ScriptManager>

 

 

 

<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateEditColumn="True"

 

 

CssClass="style1" DataSourceID="SqlDataSource1" GridLines="None"

 

 

onitemdatabound="RadGrid1_ItemDataBound">

 

<

 

MasterTableView autogeneratecolumns="False" datakeynames="ID"

 

 

datasourceid="SqlDataSource1">

 

<

 

RowIndicatorColumn>

 

<

 

HeaderStyle Width="20px"></HeaderStyle>

 

</

 

RowIndicatorColumn>

 

<

 

ExpandCollapseColumn>

 

<

 

HeaderStyle Width="20px"></HeaderStyle>

 

</

 

ExpandCollapseColumn>

 

 

<Columns>

 

 

<telerik:GridBoundColumn DataField="ID" DataType="System.Int32" HeaderText="ID"

 

 

ReadOnly="True" SortExpression="ID" UniqueName="ID"

 

 

EditFormColumnIndex="3">

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn DataField="Subject" HeaderText="Subject"

 

 

SortExpression="Subject" UniqueName="Subject">

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn DataField="Start" DataType="System.DateTime"

 

 

HeaderText="Start" SortExpression="Start" UniqueName="Start">

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn DataField="End" DataType="System.DateTime"

 

 

HeaderText="End" SortExpression="End" UniqueName="End">

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn DataField="UserID" HeaderText="UserID"

 

 

SortExpression="UserID" UniqueName="UserID" DataType="System.Int32">

 

 

</telerik:GridBoundColumn>

 

 

 

<telerik:GridDropDownColumn DropDownControlType="DropDownList"

 

 

HeaderText="User Name" UniqueName="DropDown">

 

 

</telerik:GridDropDownColumn>

 

 

 

</Columns>

 

 

</

 

MasterTableView>

 

 

</telerik:RadGrid>

 

 

 

<asp:SqlDataSource ID="SqlDataSource1" runat="server"

 

 

ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"

 

 

 

SelectCommand="SELECT [ID], [Subject], [Start], [End], [UserID] FROM [Appointments]">

 

 

</asp:SqlDataSource>

 

 

</form>

 

</

 

body>

 

</

 

html>

 

And here is the .cs code:

using

 

System;

 

using

 

System.Collections.Generic;

 

using

 

System.Linq;

 

using

 

System.Web;

 

using

 

System.Web.UI;

 

using

 

System.Web.UI.WebControls;

 

using

 

System.Data.SqlClient;

 

using

 

System.Data;

 

using

 

System.Configuration;

 

using

 

Telerik.Web.UI;

 

namespace

 

AgainWithTheInternStuff

 

{

 

public partial class _Default : System.Web.UI.Page

 

{

 

SqlDataAdapter sdadapter ;

 

 

DataSet dset ;

 

 

SqlCommand scom ;

 

 

SqlConnection scon ;

 

 

 

protected void Page_Load(object sender, EventArgs e)

 

{

scon =

new SqlConnection(ConfigurationManager

 

.ConnectionStrings[

"TelerikConnectionString"].ConnectionString );

 

scom =

new SqlCommand();

 

dset =

new DataSet();

 

sdadapter =

new SqlDataAdapter();

 

 

}

 

protected void RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)

 

{

scon.Open();

scom.Connection = scon;

scom.CommandText =

"SELECT ID, UserName FROM Users";

 

sdadapter.SelectCommand = scom;

sdadapter.Fill(dset);

scon.Close();

 

 

 

if (e.Item is GridEditFormItem && e.Item.IsInEditMode)

 

{

 

GridEditFormItem efi = (GridEditFormItem)e.Item;

 

 

DropDownList ddl = (DropDownList)efi["DropDown"].Controls[0];

 

ddl.DataSource = dset;

 

ddl.DataMember =

"Users";

 

ddl.DataValueField =

"ID";

 

ddl.DataTextField =

"UserName";

 

 

ddl.DataBind();

}

 

 

 

}

}

}

Anyway, I see that you all get back to people very quickly and very thoroughly, and wondered if you could shed some light on why some of these things aren't working, and where my lapse in understanding is. Thank you so much for your time.


Nicole

[Todd Anglin]

Hello Nicole-

First of all, welcome to ASP.NET and web programming! It's great to be able to help you on your journey and we're glad you were able to find the Telerik tools early. They'll save you a lot of time!

For this specific scenario- populating a drop down list with values from another table during edit mode- there is actually a very good demo. This demo in the online demos shows you how you can easily bind a GridDropDownColumn to a separate SqlDataSource to populate your list with any data you'd like:

http://demos.telerik.com/aspnet-ajax/grid/examples/generalfeatures/columntypes/defaultcs.aspx

The general approach requires that you do two things: 1) Add a new SqlDataSource to your page, and 2) Bind your GridDropDownColumn to it via the DataSourceID property. The code might look like this:

<!--GridDropDownColumn example-->
<telerik:GridDropDownColumn DataSourceID="SqlDataSource3" ListTextField="City" ListValueField="City"
          UniqueName="City" HeaderText="RadComboBox Column" DataField="City"
          DropDownControlType="RadComboBox">
</telerik:GridDropDownColumn>

<!--New SqlDataSource for DropDownColumn -->
<asp:SqlDataSource runat="server" ID="SqlDataSource3" ConnectionString="<%$
          ConnectionStrings:NorthwindConnectionString %>"
          SelectCommand="SELECT DISTINCT [City] FROM [Employees]">
</asp:SqlDataSource>

You can use any SQL statement you want in your SqlDataSource to populate your list.

Hope that helps! Good luck on your ASP.NET learning adventure.

-Todd

[Nicole Griesmeyer]

Wonderful! Thank you for your helpful and fast reply.

This was my hunch at first, that I would simply bind it to another datasource- I figured populating it myself in the code-behind was unneccessary.

However, now that I'm employing this technique, how can I get it to select the appropriate username? They all say Alex. Here is my code. 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication7._Default" %>

<%@ Register assembly="Telerik.Web.UI" 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">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>

        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1"
            GridLines="None">
<MasterTableView autogeneratecolumns="False" datakeynames="ID"
                datasourceid="SqlDataSource1">
<RowIndicatorColumn>
<HeaderStyle Width="20px"></HeaderStyle>
</RowIndicatorColumn>

<ExpandCollapseColumn>
<HeaderStyle Width="20px"></HeaderStyle>
</ExpandCollapseColumn>
    <Columns>
        <telerik:GridBoundColumn DataField="ID" DataType="System.Int32" HeaderText="ID"
            ReadOnly="True" SortExpression="ID" UniqueName="ID">
        </telerik:GridBoundColumn>
        <telerik:GridBoundColumn DataField="Subject" HeaderText="Subject"
            SortExpression="Subject" UniqueName="Subject">
        </telerik:GridBoundColumn>
        <telerik:GridBoundColumn DataField="Start" DataType="System.DateTime"
            HeaderText="Start" SortExpression="Start" UniqueName="Start">
        </telerik:GridBoundColumn>
        <telerik:GridBoundColumn DataField="End" DataType="System.DateTime"
            HeaderText="End" SortExpression="End" UniqueName="End">
        </telerik:GridBoundColumn>
        <telerik:GridBoundColumn DataField="UserID" DataType="System.Int32"
            HeaderText="UserID" SortExpression="UserID" UniqueName="UserID">
        </telerik:GridBoundColumn>
        <telerik:GridDropDownColumn DataField="ID" DataSourceID="SqlDataSource2"
            HeaderText="User Name" ListTextField="UserName" ListValueField="ID"
            UniqueName="UserNameColumn">
        </telerik:GridDropDownColumn>
    </Columns>
</MasterTableView>
        </telerik:RadGrid>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server"
            ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
            SelectCommand="SELECT [ID], [Subject], [Start], [End], [UserID] FROM [Appointments]">
        </asp:SqlDataSource>

    </div>
    <asp:SqlDataSource ID="SqlDataSource2" runat="server"
        ConnectionString="<%$ ConnectionStrings:TelerikConnectionString2 %>"
        SelectCommand="SELECT [ID], [UserName] FROM [Users]"></asp:SqlDataSource>
    </form>
</body>
</html>

There is nothing notable in the codebehind.

I'm guessing the problem here is Datafield="ID". First of all, it probably thinks I mean ID from the first data source, because when I change it to "UserName" it is not recognized and throws me the error:

DataBinding: 'System.Data.DataRowView' does not contain a property with the name 'UserName'.

Anyway, this seems to be the difference between me and the demo, that it does not select the appropriate entry, and I'm guessing it has something to do with the Datafield property. Do you know what might be going on here?

Thank you so much for your help,

Nicole

[Todd Anglin]

You are right that there is a relationship between your DataField and your ListValueField.

Based on the code you posted, though, shouldn't the DataField for your DropDownColumn be "UserID" instead of "ID." In the current configuration, it looks like the DataField is set to the ID of the Appointment, not the ID of the User. Try changing DataField to "UserID" and see if that helps.

-Todd

[Nicole Griesmeyer]

Todd,

Unfortunately they are both called ID, which is a little disconcerting (I don't know if I'm able to change column titles) and upon trying to change datafield to "userid," it doesn't recognize it either and throws the same error. The only time it doesn't throw errors is when I mention things from the first datasource, even though I'm trying to tell it to utilize the second. What am I missing?

Thank you so much,
Nicole

[Todd Anglin]

That's odd. You seem to have a GridBoundColumn bound to the field UserID before your GridDropDown column:

<telerik:GridBoundColumn DataField="UserID" DataType="System.Int32"

HeaderText="UserID" SortExpression="UserID" UniqueName="UserID">

</telerik:GridBoundColumn>

In theory, you should be able to also set the DataField property of your DropDownColumn to UserID, too. Like this:

<telerik:GridDropDownColumn DataField="UserID" DataSourceID="SqlDataSource2"

HeaderText="User Name" ListTextField="UserName" ListValueField="ID"

UniqueName="UserNameColumn">

</telerik:GridDropDownColumn>

As long as "UserID" in SqlDataSource1 is the same type (and value) as "ID" in SqlDataSource2, your DropDownColumn should behave correctly. More details here:

http://www.telerik.com/help/aspnet-ajax/grdcustomizeconfiguregriddropdowncolumn.html

Hope that helps more!

-Todd

[Nicole Griesmeyer]

BAM! You just solved my problem.

Yes, UserID is how its referred to in the first datasource, but I needed listvalue field to say ID, because thats how its referred to in the second data source.

THANK YOU SO MUCH!!!!!!!!!

Nicole

[J S]

What if your dropdown displays the text from the other table but needs the ID or value to update the record?

[K]

What if I have tables that have been created in the code-behind?  How can I make these the data source for the drop-downs?

[Kostadin]

Hi,

For different scenarios you could use a TemplateColumn with RadComboBox in it. The following live example demonstrates how to use RadComboBox in RadGrid.

Regards,
Kostadin
Telerik