نمایش گروه بندی داده ها در گرید ویو در Asp.Net

در این مقاله اطلاعات را همراه با گروه بندی به صورت افقی در گرید ویو انجام میدهیم

نمایش گروه بندی داده ها در گرید ویو در Asp.Net

ابتدا یک جدول با فیلد های زیر در پایگاه داده ایجاد میکنیم:

سپس برا ی نمایش نیاز به درج مقداری اطلاعات در جدول ایجاد شده داریم :

در گرید ابتدا گروه بندی بر اساس کشور و سپس براساس شهر انجام خواهد شد ابتدا یک برنامه از نوع وب فرم ایجاد کنید سپس روی نام پروژه کلیک راست کرده و Add New Item  یک صفحه جدید به پروژ خود اضافه کنید حال باید یک گرید ویو به صفحه اضافه کنیم از جعبه ابزار یک گرید به صفحه خود اضافه کنید و آنرا به شکل زیر ویرایش کنید:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ShowingGroupingOfData.Default" %>  
  
<!DOCTYPE html>  
  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head runat="server">  
    <title>Showing Grouping Of Data In ASP.NET Grid View</title>  
</head>  
<body>  
    <form id="form1" runat="server">  
        <div>  
            <table style="border: solid 15px blue; width: 100%; vertical-align: central;">  
                <tr>  
                    <td style="padding-left: 20px; padding-top: 20px; padding-bottom: 20px; background-color: skyblue; font-family: 'Times New Roman'; font-size: 20pt; color: red;">Showing Grouping Of Data In a ASP.NET Grid View  
                    </td>  
                </tr>  
                <tr>  
                    <td style="text-align: left;">  
                        <asp:GridView ID="GridView1" runat="server" CellPadding="4" ForeColor="#333333" GridLines="Both" Width="100%">  
                            <AlternatingRowStyle BackColor="White" ForeColor="#284775" />  
                            <EditRowStyle BackColor="#999999" />  
                            <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />  
                            <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />  
                            <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />  
                            <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />  
                            <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />  
                            <SortedAscendingCellStyle BackColor="#E9E7E2" />  
                            <SortedAscendingHeaderStyle BackColor="#506C8C" />  
                            <SortedDescendingCellStyle BackColor="#FFFDF8" />  
                            <SortedDescendingHeaderStyle BackColor="#6F8DAE" />  
                        </asp:GridView>  
                    </td>  
                </tr>  
            </table>  
        </div>  
    </form>  
</body>  
</html>

در صفحه aspx.cs در رویداد page Load یک رویداد به نام BindGrid برای متصل کردن اطلاعات از پایگاه داده به گرید فراخوانی میکنیم:

protected void Page_Load(object sender, EventArgs e)  
        {  
            if (!Page.IsPostBack)  
            {  
                BindGrid();  
  
            }  
        }   

برای اینکه در همه جا  دسترسی یه data table داشته باشیم در بخش گلوبال تعریف میکنیم:

 SqlDataAdapter da;  
        DataSet ds = new DataSet();  
        DataTable dt = new DataTable(); 

حال بدنه تابع که در بالا فراخوانی کردیم رو پیاده سازی میکنیم :

 private void BindGrid()  
        {  
            SqlConnection con = new SqlConnection();  
            ds = new DataSet();  
            con.ConnectionString = @"Data Source=INDIA\MSSQLServer2k8; Initial Catalog=EmployeeManagement; Uid=sa; pwd=india;";  
            SqlCommand cmd = new SqlCommand("SELECT Country, State, City,Name, Designation  FROM Employee ORDER BY Country,State, City", con);  
  
            da = new SqlDataAdapter(cmd);  
            da.Fill(ds);  
            con.Open();  
            cmd.ExecuteNonQuery();  
            con.Close();  
  
            if (ds.Tables[0].Rows.Count > 0)  
            {  
                GridView1.DataSource = ds.Tables[0];  
                GridView1.DataBind();  
  
                // First parameter is Row Collection  
                // Second is Start Column  
                // Third is total number of Columns to make group of Data.  
                ShowingGroupingDataInGridView(GridView1.Rows, 0, 3);  
            }  
        }   

برای نمایش داده ها به صورت گروه بندی شده داخل تابع BindGrid تابع دیگری به نام ShowingGroupingDataInGridView برای انجام این عمل فراخوانی میکنیم که بدنه آنرا به شکل زیر پیاده سازی میکنیم:

        void ShowingGroupingDataInGridView(GridViewRowCollection gridViewRows, int startIndex, int totalColumns)  
        {  
            if (totalColumns == 0) return;  
            int i, count = 1;  
            ArrayList lst = new ArrayList();  
            lst.Add(gridViewRows[0]);  
            var ctrl = gridViewRows[0].Cells[startIndex];  
            for (i = 1; i < gridViewRows.Count; i++)  
            {  
                TableCell nextTbCell = gridViewRows[i].Cells[startIndex];  
                if (ctrl.Text == nextTbCell.Text)  
                {  
                    count++;  
                    nextTbCell.Visible = false;  
                    lst.Add(gridViewRows[i]);   
                }  
                else  
                {  
                    if (count > 1)  
                    {  
                        ctrl.RowSpan = count;   
                        ShowingGroupingDataInGridView(new GridViewRowCollection(lst), startIndex + 1, totalColumns - 1);  
                    }  
                    count = 1;  
                    lst.Clear();                      
                    ctrl = gridViewRows[i].Cells[startIndex];  
                    lst.Add(gridViewRows[i]);  
                }  
            }  
            if (count > 1)  
            {  
                ctrl.RowSpan = count;                  
                ShowingGroupingDataInGridView(new GridViewRowCollection(lst), startIndex + 1, totalColumns - 1);  
            }  
            count = 1;  
            lst.Clear();  
        }   

حالا میتونید برنامه رو اجرا کنید:

 

فایل های ضمیمه