Tutorial: Display a specific form that is selected in a dropdown box

This article explains how to build a custom widget based on the built-in Form widget. The custom widget displays the titles of all the forms from the Forms module in a dropdown box. When the user selects a form in the dropdown box, the widget displays the respective form. When the user fills out the form, the system saves a form response in the Forms module.

The following procedure mentions only the more important steps from the implementation of the custom form widget.

The custom widget inherits from FormsControl. This is because the widget is working with the ID of the form after it is selected and can be used on the frontend to display the selected form.

Perform the following:

1. Inherit from FormControl, in the following way:
   public class FormsControlCustom : FormsControl
2. Pass a value to the LayoutTemplatePath parameter, in the following way:
   public override string LayoutTemplatePath

           {

               get

               {

                   return this.layoutTemplatePath;

               }

               set

               {

                   base.LayoutTemplatePath = value;

               }

           }
3. On InitializeControls method, get all the forms, their IDs, and titles.
   Populate the RadComboBox with all forms and pass the ID as a query string, in the following way:
   var selectedValue = HttpContext.Current.Request.QueryString["formId"];
4. Create the JavaScript and place it in the template, in the following way:
   <script language="javascript" type="text/javascript">

       function OnClientSelectedIndexChanged(sender, eventArgs) {

           var item = eventArgs.get_item();

           //sender.set_text("You selected " + item.get_text());

           var currentHref = window.location.href.split("?")[0];

           if (currentHref) {

               var redirectString = currentHref + "?formId=" + item.get_value()

               window.location.replace(redirectString);

               return false;

           }

       }

   </script> 

   To get the correct results, method OnClientSelectedIndexChanged makes a redirection to the selected form.