RadControls for ASP.NET AJAX

This tutorial assumes that you have a Visual Studio solution with a DNN website. RadScheduler is used as an example, but similar approach can be applied to other Telerik controls for ASP.NET AJAX.

Follow the listed steps to create a DNN Module that utilizes RadScheduler.

1. Right-click the ‘DesktopModules’ folder and select New Folder. Name the new folder ‘RadScheduler’.

2. Right-click the new folder and select ‘Add New Item’. Select the Web User Control template and rename it to RadScheduler.ascx. Select the language of your preference.

3. Open the newly created User Control and go to Design Mode. Drag a RadScheduler instance from the Toolbox in the User Control content.

4. Go to Source Mode and add the following properties to RadScheduler:

CopyXML

<telerik:RadScheduler DataKeyField="ID" DataSubjectField="Subject" DataStartField="Start"
    DataEndField="End" ID="RadScheduler1" runat="server"></telerik:RadScheduler>

You can also set these properties through the property grid in Design Mode.

5. The next step is to turn the newly created User Control into a DNN Module. To do this, open the CodeBehind file of the User Control (RadScheduler.ascx.cs or RadScheduler.ascx.vb) and make RadScheduler inherit from DotNetNuke.Entities.Modules.PortalModuleBase.

• C#
• VB

CopyC#

public partial class DesktopModules_RadScheduler_RadScheduler : 
    DotNetNuke.Entities.Modules.PortalModuleBase
{
   protected void Page_Load(object sender, EventArgs e)
   {
   }
}

CopyVB.NET

Partial Class DesktopModules_RadSchedulerVB_RadSchedulerVB
    Inherits DotNetNuke.Entities.Modules.PortalModuleBase
End Class

6. To add the Module to a DNN page, you should register it first. Log in as the Host account and go to the Host > Module Definitions page. Select Create ModuleDefinition either from the Action menu or through the link near the bottom.

7. Type ‘RadScheduler’ in the Module Name, Folder Name and Friendly Name textboxes on the Create Module Definition page. Click the ‘Create’ button to continue.

8. On the next page, type ‘RadScheduler’ in the New Definition textbox and click the Add Definition button next to it. Click the Add Control button that appears.

9. On the Edit Module Control page click the Source dropdown and select the RadScheduler.ascx created earlier. Fill ‘RadScheduler’ in the Title textbox. Click the Update button to finish.

Tip
Optional: You can click the Supports Partial Rendering? checkbox if you want the module to be updated through AJAX.

10. The RadScheduler Module should now be available in the Module dropdown when editing a page. You can go to a page of your choice and add the module to make sure everything works properly. Note that the Module is not yet fully functional and any appointments that you add won’t be saved.

11. To save the appointments, we first need to create an Appointments table in the DNN Database. To do this, go to the Host > SQL page of your DNN website. Paste the following script in the textbox, check the Run as Script checkbox and click Execute:

CopyXML

CREATE TABLE [{objectQualifier}Appointments]   
(   
  [ID]                    INT IDENTITY(1,1)   NOT NULL,
  [ModuleId]              INT                 NOT NULL,   
  [Subject]               nvarchar(255)       NOT NULL,   
  [Start]                 datetime            NOT NULL,   
  [End]                   datetime            NOT NULL,   
  [RecurrenceRule]        nvarchar(1024)      NULL,   
  [RecurrenceParentID]    INT                 NULL,   

  CONSTRAINT [PK_Appointments] PRIMARY KEY CLUSTERED    
      ([ID]),   

  CONSTRAINT [FK_Appointments_ParentAppointments] FOREIGN KEY   
      ([RecurrenceParentID])   
  REFERENCES   
      [{objectQualifier}Appointments] ([ID])   
)

12. Go back to Visual Studio and open the RadScheduler.ascx in Design Mode. Drag a SqlDataSource control from the toolbox. Right-click the new SqlDataSource control and select Configure Data Source (the option is also accessible from the Smart Tag of the control).

13. From the connection dropdown select SiteSqlServer. This is the connection string that the DNN Installation is using. Click Next.

14. On the next screen, select the Appointments table we created earlier. In a default DNN installation it will be called ‘dnn_Appointments’, but the prefix may differ in your case. Check the asterisk (*) checkbox.

15. Click the Advanced… button and check the first checkbox labeled Generate INSERT, UPDATE and DELETE statements. Click Ok.

16. Click the WHERE… button. In the popup window, select ‘ModuleId’ in the Column dropdown, select ‘=’ in the Operator dropdown and select ‘None’ in the Source dropdown. Click Add and then click Ok.

17. Click Next and then click Finish on the next screen to complete the DataSource configuration.

18. While still in Design Mode, right-click RadScheduler and select Choose Data Source. Configure the dropdowns as shown on the screenshot. Click Ok.

19. Go to Source mode and modify the DeleteCommand property of the SqlDataSource to look like thisDeleteCommand="DELETE FROM [dnn_Appointments] WHERE ([ID] = @ID AND [ModuleId] = @ModuleId)"

Also edit the DeleteParameters to look like this:

CopyXML

<DeleteParameters>
    <asp:Parameter Name="ID" Type="Int32" />
    <asp:Parameter Name="ModuleId" Type="Int32" />
</DeleteParameters>

20. Go back to Design mode, right-click the SqlDataSource control and select Properties. Click the Events button then double-click the Selecting event to generate an event handler. Repeat this for the Insert, Updating and Deleting events.

21. In the CodeBehind file (RadScheduler.ascx.cs or RadScheduler.ascx.vb) insert the following code in each Event Handler:

• C#
• VB

CopyC#

e.Command.Parameters["@ModuleId"].Value = ModuleId;

CopyVB.NET

e.Command.Parameters("@ModuleId").Value = ModuleId

The CodeBehind file should now look like this:

• C#
• VB

CopyC#

using System.Web.UI.WebControls;

public partial class DesktopModules_RadScheduler_RadScheduler :
    DotNetNuke.Entities.Modules.PortalModuleBase
{
   protected void SqlDataSource1_Selecting(object sender, SqlDataSourceSelectingEventArgs e)
   {
       e.Command.Parameters["@ModuleId"].Value = ModuleId;
   }
   protected void SqlDataSource1_Inserting(object sender, SqlDataSourceCommandEventArgs e)
   {
       e.Command.Parameters["@ModuleId"].Value = ModuleId;
   }
   protected void SqlDataSource1_Deleting(object sender, SqlDataSourceCommandEventArgs e)
   {
       e.Command.Parameters["@ModuleId"].Value = ModuleId;
   }
   protected void SqlDataSource1_Updating(object sender, SqlDataSourceCommandEventArgs e)
   {
       e.Command.Parameters["@ModuleId"].Value = ModuleId;
   }
}

CopyVB.NET

Partial Class DesktopModules_RadSchedulerVB_RadSchedulerVB
    Inherits DotNetNuke.Entities.Modules.PortalModuleBase
    Protected Sub SqlDataSource1_Selecting(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.SqlDataSourceSelectingEventArgs) Handles SqlDataSource1.Selecting
        e.Command.Parameters("@ModuleId").Value = ModuleId
    End Sub
    Protected Sub SqlDataSource1_Updating(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.SqlDataSourceCommandEventArgs) Handles SqlDataSource1.Updating
        e.Command.Parameters("@ModuleId").Value = ModuleId
    End Sub
    Protected Sub SqlDataSource1_Inserting(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.SqlDataSourceCommandEventArgs) Handles SqlDataSource1.Inserting
        e.Command.Parameters("@ModuleId").Value = ModuleId
    End Sub
    Protected Sub SqlDataSource1_Deleting(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.SqlDataSourceCommandEventArgs) Handles SqlDataSource1.Deleting
        e.Command.Parameters("@ModuleId").Value = ModuleId
    End Sub
End Class

22. Save the files and reload the test page with the RadScheduler Module. Everything should be working fine now.