In a new AJAX Enabled Web Application:

1. Locate the Access database file "email.mdb" in the \<RadControls for ASP.NET AJAX installation folder>\Live Demos\App_Data.

2. In the Solution Explorer, copy the "email.mdb" file to the project's App_Data folder.

1. Add a RadComboBox from the ToolBox to the web page. Set the RadComboBox properties:

2. AutoPostBack = True

3. Skin = Vista

4. AllowCustomText = True

5. Add a Standard Button control from the ToolBox to the web page. Set the Button ID property to "btnNew". Set the Text property to "New".

6. Add a Standard Button control from the ToolBox to the web page. Set the Button ID property to "btnSave". Set the Text property to "Save".

7. Open the RadEditor Smart Tag and set the the Skin to Vista from the drop down list.

1. In the Property Window, click the RadEditor Tools property ellipses. This step will open the EditorToolGroup Collection Editor dialog.

2. In the EditorToolGroup Collection Editor dialog, click the Add button. This will add an EditorToolGroup item to the collection.

3. Click the EditorToolGroup item Tools property ellipses. This step will open the EditorTool Collection Editor dialog.

4. Click the EditorTool Collection Add button. In the properties for the EditorTool, locate the Name property, click the drop down arrow and select "Bold" from the list.

5. Click the EditorTool Collection Add button. In the properties for the EditorTool, locate the Name property, click the drop down arrow and select "Italic" from the list.

6. Click the EditorTool Collection Add button. In the properties for the EditorTool, locate the Name property, click the drop down arrow and select "Underline" from the list.

7. Click the OK button to close the EditorTool Collection Editor dialog.

8. Click the OK button to close the EditorToolGroup Collection Editor dialog.

9. The ASP.NET markup for the steps so far should look something like the example below:

   CopyASPX

   <telerik:RadComboBox
      ID="RadComboBox1"
      runat="server"
      AutoPostBack="True"
      OnSelectedIndexChanged="RadComboBox1_SelectedIndexChanged"
      Skin="Vista"
      AllowCustomText="True">
   </telerik:RadComboBox>
   <asp:Button ID="btnNew" runat="server" OnClick="btnNew_Click" Text="New" />
   <asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" /><br />
   <telerik:RadEditor ID="RadEditor1" runat="server" Skin="Vista" Width="500px" Height="400px">               
      <Tools>
          <telerik:EditorToolGroup>
              <telerik:EditorTool Name="Bold" />
              <telerik:EditorTool Name="Italic" />
              <telerik:EditorTool Name="Underline" />
          </telerik:EditorToolGroup>
      </Tools>
   </telerik:RadEditor>

1. In the designer, double-click the surface of the web page to navigate to the Page_Load event handler. Replace the event handler with the following code:

   • C#
   • VB.NET

   CopyC#

   protected void Page_Load(object sender, EventArgs e)
   {
       if (!IsPostBack)
       {
           ReadAllEmail();
       }
   }

   CopyVB.NET

   Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
       If Not IsPostBack Then
           ReadAllEmail()
       End If
   End Sub

2. Add a series of helper methods to create a connection to the Access database, update, insert and read records:

   • C#
   • VB.NET

   CopyC#

   // Helper Methods
   // Returns a connection to the Access Database
   private OleDbConnection CreateConnection()
   {
       OleDbConnection connection = new OleDbConnection();
       connection.ConnectionString =
               "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" +
               Request.MapPath("\\App_Data\\email.mdb") + ";User ID=;Password=;";
       connection.Open();
       return connection;
   }
   // Reads the "email" table and binds to the RadComboBox
   private void ReadAllEmail()
   {
       OleDbCommand command = new OleDbCommand("SELECT ID, Subject FROM email", CreateConnection());
       RadComboBox1.DataSource = command.ExecuteReader();
       RadComboBox1.DataTextField = "Subject";
       RadComboBox1.DataValueField = "ID";
       RadComboBox1.DataBind();
   }
   // Reads a single "email" table record and returns the contents as a string
   private string ReadEmail(string id)
   {
       OleDbCommand command = new OleDbCommand("SELECT Body from Email where ID = @id", CreateConnection());
       command.Parameters.AddWithValue("id", id);
       OleDbDataReader reader = command.ExecuteReader();
       if (reader.Read())
       {
           return reader.GetString(0);
       }
       return "";
   }
   // Inserts a single "email" table record
   private void InsertEmail(string subject, string body)
   {
       OleDbCommand command = new OleDbCommand("INSERT INTO Email (Subject, Body) VALUES (@subject, @body)", CreateConnection());
       command.Parameters.AddWithValue("subject", RadComboBox1.Text);
       command.Parameters.AddWithValue("body", RadEditor1.Content);
       command.ExecuteNonQuery();
       connection.Close();
   }
   // Updates a single "email" table record for a given id.
   private void UpdateEmail(int id, string subject, string body)
   {
       OleDbCommand command = new OleDbCommand("UPDATE Email SET Subject = @subject, Body = @body WHERE ID = @id", CreateConnection());
       command.Parameters.AddWithValue("subject", subject);
       command.Parameters.AddWithValue("body", body);
       command.Parameters.AddWithValue("id", id);
       command.ExecuteNonQuery();
       connection.Close();
   }

   CopyVB.NET

   ' Helper Methods
   ' Returns a connection to the Access Database
   Private Function CreateConnection() As OleDbConnection
       Dim connection As New OleDbConnection()
       connection.ConnectionString = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + Request.MapPath("\App_Data\email.mdb") + ";User ID=;Password=;"
       connection.Open()
       Return connection
   End Function
   ' Reads the "email" table and binds to the RadComboBox
   Private Sub ReadAllEmail()
       Dim command As New OleDbCommand("SELECT ID, Subject FROM email", CreateConnection())
       RadComboBox1.DataSource = command.ExecuteReader()
       RadComboBox1.DataTextField = "Subject"
       RadComboBox1.DataValueField = "ID"
       RadComboBox1.DataBind()
   End Sub
   ' Reads a single "email" table record and returns the contents as a string
   Private Function ReadEmail(ByVal id As String) As String
       Dim command As New OleDbCommand("SELECT Body from Email where ID = @id", CreateConnection())
       command.Parameters.AddWithValue("id", id)
       Dim reader As OleDbDataReader = command.ExecuteReader()
       If reader.Read() Then
           Return reader.GetString(0)
       End If
       Return ""
   End Function
   ' Inserts a single "email" table record
   Private Sub InsertEmail(ByVal subject As String, ByVal body As String)
       Dim command As New OleDbCommand("INSERT INTO Email (Subject, Body) VALUES (@subject, @body)", CreateConnection())
       command.Parameters.AddWithValue("subject", RadComboBox1.Text)
       command.Parameters.AddWithValue("body", RadEditor1.Content)
       command.ExecuteNonQuery()
       connection.Close()
   End Sub
   ' Updates a single "email" table record for a given id.
   Private Sub UpdateEmail(ByVal id As Integer, ByVal subject As String, ByVal body As String)
       Dim command As New OleDbCommand("UPDATE Email SET Subject = @subject, Body = @body WHERE ID = @id", CreateConnection())
       command.Parameters.AddWithValue("subject", subject)
       command.Parameters.AddWithValue("body", body)
       command.Parameters.AddWithValue("id", id)
       command.ExecuteNonQuery()
       connection.Close()
   End Sub

3. In the designer, double-click the RadComboBox control to create a SelectedIndexChanged event handler. Replace the event handler with the code below. In this snippet, the SelectedValue contains the ID for the selected record.

   • C#
   • VB.NET

   CopyC#

   protected void RadComboBox1_SelectedIndexChanged(object o, Telerik.Web.UI.RadComboBoxSelectedIndexChangedEventArgs e)
   {
       RadEditor1.Content = ReadEmail((o as RadComboBox).SelectedValue);
   }

   CopyVB.NET

   Protected Sub RadComboBox1_SelectedIndexChanged(ByVal o As Object, ByVal e As Telerik.Web.UI.RadComboBoxSelectedIndexChangedEventArgs) _
   Handles RadComboBox1.SelectedIndexChanged
       RadEditor1.Content = ReadEmail((TryCast(o, RadComboBox)).SelectedValue)
   End Sub

4. In the designer, double-click the "btnNew" Button control to create a Click event handler. Replace the event handler with the code below.

   • C#
   • VB.NET

   CopyC#

   protected void btnNew_Click(object sender, EventArgs e)
   {
       RadComboBox1.SelectedIndex = -1;
       RadEditor1.Content = "";
   }

   CopyVB.NET

   Protected Sub btnNew_Click(ByVal sender As Object, ByVal e As EventArgs) _
   Handles btnNew.Click
       RadComboBox1.SelectedIndex = -1
       RadEditor1.Content = ""
   End Sub

5. In the designer, double-click the "btnSave" Button control to create a Click event handler. Replace the event handler with the code below.

   • C#
   • VB.NET

   CopyC#

   protected void btnSave_Click(object sender, EventArgs e)
   {
       if (RadComboBox1.SelectedIndex == -1)
           InsertEmail(RadComboBox1.Text, RadEditor1.Content);
       else
           UpdateEmail(
               Convert.ToInt32(RadComboBox1.SelectedValue),
               RadComboBox1.Text,
               RadEditor1.Content);
       ReadAllEmail();
   }

   CopyVB.NET

   Protected Sub btnSave_Click(ByVal sender As Object, ByVal e As EventArgs) _
   Handles btnSave.Click
       If RadComboBox1.SelectedIndex = -1 Then
           InsertEmail(RadComboBox1.Text, RadEditor1.Content)
       Else
           UpdateEmail(Convert.ToInt32(RadComboBox1.SelectedValue), RadComboBox1.Text, RadEditor1.Content)
       End If
       ReadAllEmail()
   End Sub

6. Press F5 to run the application. As you change selections in the RadComboBox list, the content of the RadEditor should change in unison. Make changes to content and click the save button. Navigate to and from the edited record to verify that the content has been saved to the database.

Other Resources