Monday 28 May 2012

Collapsible Data in GridView

Collapsible Data in GridView in order report page on Raasa.


 <asp:GridView ID="gvItems" runat="server" BackColor="White" BorderColor="#DEDFDE"
                        BorderStyle="Solid" BorderWidth="1px" CellPadding="4" ForeColor="Black"
                        GridLines="Vertical" PageSize="1"  AutoGenerateColumns="False" style="width:650px">
                       <HeaderStyle BackColor="#3b6c01" Font-Bold="True" Font-Size="14px" ForeColor="#ffffff" Height="35px" />
                       <RowStyle BackColor="White" ForeColor="#333333" />        
                       <AlternatingRowStyle BackColor="#F2F2F2" ForeColor="#333333" />
                       <PagerSettings Position="Top" />
                       <PagerStyle BackColor="#E4E4E4" ForeColor="#265CC0" Borderwidth="0px"/>  
                    <EmptyDataRowStyle ForeColor="#666666" Font-Bold="true" Font-Size="13px" HorizontalAlign="Center" />
                        <Columns>
                            <asp:TemplateField>
                                <HeaderTemplate>
                                    <table border="0" cellpadding="0" cellspacing="0" width="650px">
                                        <%--<tr><td colspan="5" align="left">Order Details</td></tr>--%>
                                        <tr>
                                            <td style="width:50px;text-align:center;"></td>
                                            <td style="width:150px;text-align:center;">Order No</td>
                                            <td style="width:200px;text-align:center;">Date</td>
                                            <td style="width:100px;text-align:center;">Items</td>
                                            <td style="width:150px;text-align:center;">Status</td>
                                        </tr>
                                    </table>
                                </HeaderTemplate>
                                <ItemTemplate>
                                    <table border="0" cellpadding="0" cellspacing="0" width="650px">
                                        <tr>
                                            <td style="width:50px;text-align:center;">
                                            <img id='toggle<%#Eval("id") %>' src="../web/images/plus.jpg" alt="Click here to see Order details" onclick='javascript:ToggleDisplay(<%# Eval("id") %>);' style="cursor:pointer;height:15px;width:15px" />    
                                            </td>        
                                            <td style="width:150px;text-align:center;">
                                            <p><asp:Label ID="lblorderid" runat="server" Text='<%# Eval("order_id")%>'></asp:Label></p>
                                            </td>
                                            <td style="width:200px;text-align:center;">
                                            <p><%# Eval("in_ts")%> </p>
                                            </td>
                                            <td style="width:100px;text-align:center;">
                                            <%# Eval("order_items")%>
                                            </td>
                                            <td style="width:150px;text-align:center;">
                                            <%# Eval("order_status")%>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>&nbsp;</td>
                                            <td colspan="4">
                                                <div id='coldiv<%# Eval("id") %>' style="display:none;width:600px;">
                                                    <asp:GridView ID="orderdetailsgrid" runat="server"  AutoGenerateColumns="False"
                                                        onrowdatabound="orderdetailsgrid_RowDataBound" ShowFooter="True"
                                                        Width="100%" >
                                                        <Columns>
                                                            <asp:BoundField DataField="prod_type" HeaderText="Type" HeaderStyle-Width="20%" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center"/>
                                                            <asp:BoundField DataField="item_desc" HeaderText="Item Description" HeaderStyle-Width="32%" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center"/>
                                                            <asp:BoundField DataField="price" HeaderText="Price" HeaderStyle-Width="10%" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center"/>
                                                           
                                                            <asp:TemplateField HeaderText="Quantity" HeaderStyle-Width="20%" HeaderStyle-HorizontalAlign="Center">
                                                            <FooterStyle Font-Bold="true" Font-Size="13px" />
                                                                <FooterTemplate>Grand Total:</FooterTemplate>
                                                                <ItemTemplate>
                                                                    <asp:Label ID="lblqty" runat="server" Text='<%# Eval("qty") %>'></asp:Label>
                                                                </ItemTemplate>
                                                                <ItemStyle HorizontalAlign="Center" />
                                                                <FooterStyle HorizontalAlign="Right" />
                                                            </asp:TemplateField>

                                                            <asp:TemplateField HeaderText="Sub Total" HeaderStyle-Width="18%" HeaderStyle-HorizontalAlign="Center">
                                                                <ItemTemplate>
                                                                    <asp:Label ID="lblsubtot" runat="server" Text='<%# Eval("SubTotal") %>'></asp:Label>
                                                                </ItemTemplate>
                                                                <FooterTemplate>
                                                                    <asp:Label ID="lblgrandtotal" runat="server" Font-Bold="True" Font-Size="13px"></asp:Label>
                                                                </FooterTemplate>
                                                                <ItemStyle HorizontalAlign="Center" />
                                                                <FooterStyle HorizontalAlign="Center" />
                                                            </asp:TemplateField>                                      
                                                            </Columns>
                                                        <HeaderStyle BackColor="#999999" ForeColor="#ffffff" />
                                                    </asp:GridView>
                                                </div>
                                            </td>
                                        </tr>
                                    </table>
                                </ItemTemplate>
                            </asp:TemplateField>                                 
                        </Columns>
                        <EmptyDataTemplate>                           
                            <table border="0" cellpadding="0" cellspacing="0" width="650px">
                                <tr style="background-color:#3b6c01; color:#fff; font-family:Tahoma;font-size:14px;height:35px;">
                                    <td style="width:50px;text-align:center;"></td>
                                    <td style="width:150px;text-align:center;">Order No</td>
                                    <td style="width:200px;text-align:center;">Date</td>
                                    <td style="width:100px;text-align:center;">Items</td>
                                    <td style="width:150px;text-align:center;">Status</td>
                                </tr>
                                <tr><td colspan="5" align="center">&nbsp;</td></tr>
                                <tr><td colspan="5" align="center">No Records found.</td></tr>
                            </table>
                        </EmptyDataTemplate>
                </asp:GridView>


Step 2 :




using System;
using System.Collections.Generic;
using System.Linq;
using System.Data;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Raasa_BusinessLogicLayer.CITSPL_logics;

namespace Raasa_PresentationLayer.admin
{
    public partial class order_rpt : System.Web.UI.Page
    {
        bl_raasa_admin obj = new bl_raasa_admin();
        decimal grandtotal;
        protected void Page_Load(object sender, EventArgs e)
        {
            if ((Convert.ToString(Session["user_id"]) == ""))
            {
                //Session.Clear();
                Response.Redirect("~/web/Login.aspx");
            }
            if (!IsPostBack)
            {
                obj.BindParentGrid_orderRpt(gvItems, txtorderno.Text.Trim(), ddlorderstatus.SelectedValue);
                obj.BindChildGrid(gvItems);
            }
        }

        protected void orderdetailsgrid_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                grandtotal += Convert.ToDecimal(DataBinder.Eval(e.Row.DataItem, "SubTotal"));

            }
            if (e.Row.RowType == DataControlRowType.Footer)
            {
                Label lbl = (Label)e.Row.FindControl("lblgrandtotal");
                lbl.Text = grandtotal.ToString();
                grandtotal = 0;
            }
        }

        protected void btnsearch_Click(object sender, EventArgs e)
        {
            obj.BindParentGrid_orderRpt(gvItems, txtorderno.Text.Trim(), ddlorderstatus.SelectedValue);
            obj.BindChildGrid(gvItems);
        }
    }
}

No comments:

Post a Comment