ComponentOne Accordion for ASP.NET Web Forms
Task-Based Help / Binding Accordion to a Data Source
In This Topic
    Binding Accordion to a Data Source
    In This Topic

    You can easily bind the C1Accordion control to a data source. The Header and Content data fields are determined by the C1Accordion control automatically and they are used to determine what appears in the header and content areas of the accordion. You can bind Header/Content text to specific fields using the HeaderField and ContentField properties if you'd rather. 

    In the example, you'll use the C1NWind.mdb that is installed automatically with the product in C:\Users\<username>\Documents\ComponentOne Samples\Common\C1NWind.mdb. Copy the C1NWind.mdb to the App_Data folder of your project. In the Solution Explorer, right-click C1NWind.mdb and select Include in Project, if necessary.

    1. Create an ASP.NET Project.
    2. Add a C1Accordion control to the page.
    3. Click the C1Accordion control smart tag, click the drop-down arrow next to Choose Data Source, and select <New data source>.
    4. In the Data Source Configuration Wizard, select Access Database and click OK.
    5. Browse, select the C1NWind.mdb in the project's App_Data folder, click OK, and then click Next.
    6. In the Configure the Select Statement window under Columns, select CategoryName and Description so that the SELECT statement looks like this:

      SELECT [CategoryName], [Description] FROM [Categories]

      The CategoryName will appear in the header of the accordion while the Description will appear in the content area of the accordion. If you would have selected Description first and then CategoryName, the Description would appear in the header and the CategoryName would appear in the content area of the accordion.

      Alternatively, in the Configure the Select Statement window, you can select * to make the SELECT statement SELECT * FROM [Categories] and then specify the desired fields in the ContentField and HeaderField properties.

    7. Click Next and then click Finish.
    8. Press F5 to run the application and see the accordion is bound to the database. Click the headers to open the content panes.

    Alternatively, if you want to bind the headers and content panes to specific fields, you can also use the HeaderField and ContentField properties

    See Also