How to Isolate This Demo as a Standalone Application (Removing the Live Demos Site Dependencies)

A few tips before you begin:

Step-by-step instructions for copying the code of a demo to a separate site:

  1. Remove the irrelevant Register directives at the top of the page which are used for registering controls specific to our demos site:
    <%@ Register TagPrefix="telerik" Namespace="Telerik.QuickStart" %>
  2. If present, remove the following demo site specific tags and their content from the markup of the page:
    <qsf:QrCode ... />
    <qsf:EventLogConsole ... />
    <qsf:MessageBox ... />
    1. Tackle the Demo Configurator.
      If you do not need it, just remove its tag (<qsf:ConfiguratorPanel ... />), all of its contents and all the server code related to the controls inside (Visual Studio will underline that once the control declarations are removed from the markup).
      If you want to keep the functionality on your page, click here.

      To extract the contents of the ConfiguratorPanel control to your page, follow these steps:
      1. Remove the following opening tags (and their closing tags), but keep the contents on the page:

        <qsf:ConfiguratorPanel ... >
          <Views>
             <qsf:View ... >
                <qsf:ConfiguratorColumn ... >
      2. If present, replace the following tags

        Tip: you can replace "qsf:CheckBoxList" with "asp:CheckBoxList" and "qsf:RadioButtonList" with "asp:RadioButtonList".

        Replace: With:
        <qsf:CheckBoxList>
        <asp:CheckBoxList>
        <qsf:RadioButtonList>
        <asp:RadioButtonList>

        These are native ASP controls. Our demo site applies some CSS rules to them and extends them with a few properties that you can ignore. You can find the global site stylesheets in the ~/Common/Styles/ folder.

      3. If present, replace the following tags

        Tip: you can replace "qsf:" with "telerik:Rad".

        Replace: With:
        <qsf:Button>
        <telerik:RadButton>
        <qsf:ColorPicker>
        <telerik:RadColorPicker>
        <qsf:ComboBox>
        <telerik:RadComboBox>
        <qsf:DatePicker>
        <telerik:RadDatePicker>
        <qsf:DateTimePicker>
        <telerik:RadDateTimePicker>
        <qsf:DropDownList>
        <telerik:RadDropDownList>
        <qsf:MaskedTextBox>
        <telerik:RadMaskedTextBox>
        <qsf:NumericTextBox>
        <telerik:RadNumericTextBox>
        <qsf:Slider>
        <telerik:RadSlider>
        <qsf:TextBox>
        <telerik:RadTextBox>
        <qsf:TimePicker>
        <telerik:RadTimePicker>

        These are Telerik UI for ASP.NET AJAX controls. Our demo site extends them with some default values, and applies a common custom skin to them. Replacing the tags as instructed above will let you run the controls without the customized appearance and properties from the demo. Their full code is located in the ~/App_Code/QSFCommon/SupplementaryControls/Configurator folder and you can freely examine/reuse it. The custom skin is located under ~/Common/Styles/qsf-skin.css

  3. If used in the demo, copy the scripts (scripts.js file) and, optionally, the stylesheets (styles.css) and images from the demo folder. Having the scripts is mandatory, otherwise script errors may be thrown and break the page. The stylesheets and images can help you mimic the appearance but are not compulsory. If there are other files used by the demo (e.g., ToosFile.xml or XML data source), copy them too.
  4. If the demo uses WebServices, LINQ to XXXX models, Entity Framework models, custom classes, etc., you can find those either under the respective example's code viewer or at the demos installation in the App_Code folder (the path may vary if you have chosen another target installation directory):
    C:\Program Files (x86)\Telerik\Telerik UI for ASP.NET AJAX QX 20YY\Live Demos\App_Code 

    If you are building a separate web site, you need to copy the needed WebServices, models, custom classes, etc. to the App_Code folder of your own web site.

  5. The databases used in the examples are located at the demos installation in the App_Data folder (the path may vary if you have chosen another target installation directory):
    C:\Program Files (x86)\Telerik\Telerik UI for ASP.NET AJAX QX 20YY\Live Demos\App_Data

    If you are building a separate web site, you need to copy the needed databases to the App_Data folder of your own web site and attach them to your SQL server if you plan to use them. You can find our connectionStrings in the web.config at the root of the Live Demos site so you can tweak them according to your environment.
    In case XML (or other) files are used as a data source, they are located in the concrete demo;s folder so you should copy them to your own site.