HOW TO USE ASP.NET AJAX ACCORDION CONTROL WITH ENTITY Framework

HOW TO USE ASP.NET AJAX ACCORDION CONTROL WITH ENTITY Framework

1)  Create WebSite

2) Add aspx page

3) Add toolkitscript manager

4) Add  TextBox Control  

5) Add Accordion Control Extender.
asp:Accordion Properties

It has all optional properties for  look and feel apply some CSS properties

1) COntentCSSClass

2)HeaderSelctedCSSClass

3)HeaderCssClass

    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">

    </asp:ToolkitScriptManager>

    <div>

        <asp:Accordion ID="Accordion1" runat="server" Height="219px" Width="604px" 

        

         ContentCssClass="cc" HeaderSelectedCssClass="hsc" HeaderCssClass="hc"

         >

       </asp:Accordion>

    </div>

4) Apply styles in the Head section

    <style type="text/css">

    .hc

    {

        border-color:Black;

        border-bottom-color:White;

        background-color:teal;

        color:White;

    }

    .hsc

    {

        background-color:Blue;

        color:white;

    }

    </style>

4)  Create  2 tables (1.Products  2.Orders)

CREATE TABLE [dbo].[Products](

[PK_ProductID] [bigint] IDENTITY(1,1) NOT NULL,

[ProductName] [varchar](50) NOT NULL,

[Brand] [varchar](50) NOT NULL,

[Price] [smallmoney] NOT NULL,

 CONSTRAINT [PK_Products] PRIMARY KEY CLUSTERED 

(

[PK_ProductID] ASC

)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]

) ON [PRIMARY]

CREATE TABLE [dbo].[Orders](

[pk_OrderID] [bigint] IDENTITY(1,1) NOT NULL,

[OrderDate] [datetime] NOT NULL,

[ProductID] [bigint] NOT NULL,

[Qty] [int] NOT NULL,

 CONSTRAINT [PK_Orders] PRIMARY KEY CLUSTERED 

(

[pk_OrderID] ASC

)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]

) ON [PRIMARY]

Insert some sample data into Products table then into Orders table

PK_ProductID ProductName Brand Price

1 Monitor LCD LG 100.00

2 Mouse Microsoft 30.00

3 Keyboard Wireless Siemens 66.00

4 External HDD Sea Gate 150.00

5 Web Cam 5mp Sony 80.00

Orders Table Sample Data

pk_OrderID OrderDate ProductID Qty

1 2013-08-26 06:05:14.750 1 30

2 2012-08-26 06:08:26.970 1 40

3 2013-08-26 06:05:26.217 2 60

4 2012-08-26 06:08:26.970 2 88

6 2012-08-26 06:08:26.970 5 98

7 2013-08-26 06:05:51.963 5 100

8 2012-08-26 06:08:26.970 3 11

9 2013-08-26 06:06:04.093 2 22

10 2012-08-26 06:08:26.970 3 44

11 2013-08-26 06:06:14.700 4 677

12 2012-08-26 06:08:26.970 4 778

13 2013-08-26 06:06:26.457 4 1000

5)  Add Entity Data Source to ur project  as shown below.(slect Product and Orders tables).

    Pls click on this  link "Adding Entity Framework Support"

6)    Add Accordion Panes  Dynamically

    void Add_AccordionPanes()

    {

        foreach (ProfilesModel1.Product p in context.Products)

        {

            var orders = from o in context.Orders

                         where o.ProductID == p.PK_ProductID

                         select o;

                

                //context.Orders.Select(o => o.ProductID == p.PK_ProductID);

            AjaxControlToolkit.AccordionPane pane = new AjaxControlToolkit.AccordionPane();

           // pane.HeaderContainer.BackColor = System.Drawing.Color.Red;

            pane.HeaderContainer.ID = "i" + p.PK_ProductID;

            Label lbl = new Label();

            //lbl.ID = "i" + p.PK_ProductID;

            lbl.Text = p.ProductName;

            lbl.Font.Size = FontUnit.Large;

            pane.HeaderContainer.Controls.Add(lbl);

            pane.ContentContainer.ID="ii"+ p.PK_ProductID;

            GridView gv = new GridView();

            gv.DataSource = orders.ToList();

            gv.DataBind();

            pane.ContentContainer.Controls.Add(gv);

            Accordion1.Panes.Add(pane);

        }

7) Build the Project