Pertanyaan Baris baris kedua ASP.NET GridView untuk menjangkau baris header utama


Saya memiliki ASP.NET GridView yang memiliki kolom yang terlihat seperti ini:

| Foo | Bar | Total1 | Total2 | Total3 |

Apakah mungkin untuk membuat header pada dua baris yang terlihat seperti ini?

|           |  Totals   |    
| Foo | Bar | 1 | 2 | 3 |

Data di setiap baris akan tetap tidak berubah karena ini hanya untuk mengatasi header dan mengurangi ruang horizontal yang dibutuhkan grid.

Seluruh GridView dapat diurutkan dalam hal yang penting. Saya tidak bermaksud menambahkan kolom "Total" yang ditambahkan untuk memiliki fungsi semacam apa pun.

Edit:

Berdasarkan salah satu artikel yang diberikan di bawah ini, saya membuat kelas yang mewarisi dari GridView dan menambahkan baris header kedua di.

namespace CustomControls
{
    public class TwoHeadedGridView : GridView
    {
        protected Table InnerTable
        {
            get
            {
                if (this.HasControls())
                {
                    return (Table)this.Controls[0];
                }

                return null;
            }
        }

        protected override void OnDataBound(EventArgs e)
        {
            base.OnDataBound(e);
            this.CreateSecondHeader();
        }

        private void CreateSecondHeader()
        {
            GridViewRow row = new GridViewRow(0, -1, DataControlRowType.Header, DataControlRowState.Normal);

            TableCell left = new TableHeaderCell();
            left.ColumnSpan = 3;
            row.Cells.Add(left);

            TableCell totals = new TableHeaderCell();
            totals.ColumnSpan = this.Columns.Count - 3;
            totals.Text = "Totals";
            row.Cells.Add(totals);

            this.InnerTable.Rows.AddAt(0, row);
        }
    }
}

Jika Anda baru mengenal ASP.NET seperti saya, saya juga harus menunjukkan bahwa Anda perlu:

1) Daftarkan kelas Anda dengan menambahkan baris seperti ini ke formulir web Anda:

<%@ Register TagPrefix="foo" NameSpace="CustomControls" Assembly="__code"%>

2) Ubah asp: GridView di markup sebelumnya ke foo: TwoHeadedGridView. Jangan lupa tag penutup.

Pengeditan lain:

Anda juga dapat melakukan ini tanpa membuat kelas khusus.

Cukup tambahkan sebuah event handler untuk event DataBound dari grid Anda seperti ini:

protected void gvOrganisms_DataBound(object sender, EventArgs e)
{
    GridView grid = sender as GridView;

    if (grid != null)
    {
        GridViewRow row = new GridViewRow(0, -1,
            DataControlRowType.Header, DataControlRowState.Normal);

        TableCell left = new TableHeaderCell();
        left.ColumnSpan = 3;
        row.Cells.Add(left);

        TableCell totals = new TableHeaderCell();
        totals.ColumnSpan = grid.Columns.Count - 3;
        totals.Text = "Totals";
        row.Cells.Add(totals);

        Table t = grid.Controls[0] as Table;
        if (t != null)
        {
            t.Rows.AddAt(0, row);
        }
    }
}

Keuntungan dari kontrol kustom adalah Anda dapat melihat baris header tambahan pada tampilan desain formulir web Anda. Metode event handler sedikit lebih sederhana.


32
2017-11-24 16:46


asal


Jawaban:


Artikel ini harus mengarahkan Anda ke arah yang benar. Anda dapat secara terprogram membuat baris dan menambahkannya ke koleksi di posisi 0.


11
2017-11-24 16:49



Saya mengambil pendekatan jawaban yang diterima, tetapi menambahkan tajuk ke GridView yang ada alih-alih GridView yang diwariskan khusus.

Setelah saya mengikat GridView saya, saya melakukan hal berikut:

/*Create header row above generated header row*/

//create row    
GridViewRow row = new GridViewRow(0, -1, DataControlRowType.Header, DataControlRowState.Normal);

//spanned cell that will span the columns I don't want to give the additional header 
TableCell left = new TableHeaderCell();
left.ColumnSpan = 6;
row.Cells.Add(left);

//spanned cell that will span the columns i want to give the additional header
TableCell totals = new TableHeaderCell();
totals.ColumnSpan = myGridView.Columns.Count - 3;
totals.Text = "Additional Header";
row.Cells.Add(totals);

//Add the new row to the gridview as the master header row
//A table is the only Control (index[0]) in a GridView
((Table)myGridView.Controls[0]).Rows.AddAt(0, row);

/*fin*/

10
2017-11-17 16:02



alt text

Catatan bagi mereka yang memilih untuk menggunakan Metode RowDataBound di VB.NET

Jika Anda berakhir dengan terlalu banyak baris header tambahan yang bermunculan, tambahkan If Statement yang hanya akan terjadi jika baris header gridview tidak ada apa-apanya (artinya ini adalah yang sedang terikat)

 If grid.HeaderRow Is Nothing Then

2
2018-01-21 23:04



Anda harus membuat kelas yang memperluas gridview kemudian mengganti metode CreateRow.

mencoba ini sebagai titik awal


1
2017-11-24 16:50



Tetapi ketika Anda menyimpan data, dan jika kesalahan terjadi pada server, misalignment baris akan terjadi


1
2017-11-19 01:24



Menambahkan t.EnableViewState = false; setelah Anda menambahkan baris:

Dim t As Table = TryCast(grid.Controls(0), Table)
If t IsNot Nothing Then
    t.Rows.AddAt(0, row)
End If

t.EnableViewState = false;

1
2018-04-26 11:48



Silakan lihat https://stackoverflow.com/a/9333714/1060656

saya membuat contoh solusi ini

Untuk berjalan di sistem lokal Anda akan perlu membuat 2 file (satu untuk kontrol dan satu aspx) Anda dapat melakukannya satu proyek atau 2 proyek.

  1. GridViewPlus ==> Kelas kontrol
  2. GridViewPlusCustomHeaderRows ==> koleksi untuk menampung kelas header khusus
  3. CustomHeaderEventArgs ==> Event Args ketika baris header kustom dibuat
  4. aspx file ==> Test program

    public class GridViewPlus : GridView
    {
    
        public event EventHandler<CustomHeaderEventArgs> CustomHeaderTableCellCreated;
    
        private GridViewPlusCustomHeaderRows _rows;
    
        public GridViewPlus() : base ()
        {
            _rows = new GridViewPlusCustomHeaderRows();
        }
    
        /// <summary>
        /// Allow Custom Headers
        /// </summary>
        public bool ShowCustomHeader { get; set; }
    
    
        [PersistenceMode(PersistenceMode.InnerDefaultProperty)]
        [MergableProperty(false)]
        public GridViewPlusCustomHeaderRows CustomHeaderRows
        {
            get {return  _rows; }
    
        }
    
        protected virtual void OnCustomHeaderTableCellCreated(CustomHeaderEventArgs e)
        {
            EventHandler<CustomHeaderEventArgs> handler = CustomHeaderTableCellCreated;
    
            // Event will be null if there are no subscribers
            if (handler != null)
            {
                // Use the () operator to raise the event.
                handler(this, e);
            }
    
        }
    
        protected override void OnRowCreated(GridViewRowEventArgs e)
        {
            if (ShowCustomHeader && e.Row.RowType == DataControlRowType.Header) return;
            base.OnRowCreated(e);
        }
    
    
        protected override void PrepareControlHierarchy()
        {
            //Do not show the Gridview header if show custom header is ON
            if (ShowCustomHeader) this.ShowHeader = false;
    
    
            base.PrepareControlHierarchy();
            //Safety Check
            if (this.Controls.Count == 0)
                return;
            bool controlStyleCreated = this.ControlStyleCreated;
            Table table = (Table)this.Controls[0];
    
            int j = 0;
            if (CustomHeaderRows ==null )return ;
    
            foreach (TableRow tr in CustomHeaderRows)
            {
                OnCustomHeaderTableCellCreated(new CustomHeaderEventArgs(tr,j));
                table.Rows.AddAt(j, tr);
                tr.ApplyStyle(this.HeaderStyle);
                j++;
            }
    
    
        }
    }
    
    public class GridViewPlusCustomHeaderRows : System.Collections.CollectionBase
    {
        public GridViewPlusCustomHeaderRows()
        {
        }
    
        public void Add(TableRow aGridViewCustomRow)
        {
            List.Add(aGridViewCustomRow);
        }
    
        public void Remove(int index)
        {
            // Check to see if there is a widget at the supplied index.
            if (index > Count - 1 || index < 0)
            // If no widget exists, a messagebox is shown and the operation 
            // is cancelled.
            {
                throw (new Exception("Index not valid"));
            }
            else
            {
                List.RemoveAt(index);
            }
        }
    
        public TableRow Item(int Index)
        {
            // The appropriate item is retrieved from the List object and
            // explicitly cast to the Widget type, then returned to the 
            // caller.
            return (TableRow)List[Index];
        }
    
    }
    
    
    public class CustomHeaderEventArgs : EventArgs
    {
        public CustomHeaderEventArgs(TableRow tr ,int RowNumber  )
        {
            tRow = tr;
            _rownumber = RowNumber;
        }
        private TableRow tRow;
        private int _rownumber = 0;
    
    
        public int RowNumber { get { return _rownumber; } }
    
        public TableRow HeaderRow
        {
            get { return tRow; }
            set { tRow = value; }
        }
    
    
    }
    
    
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Example1();
            GridViewExtension1.CustomHeaderTableCellCreated += new EventHandler<CustomHeaderEventArgs>(GridViewExtension1_CustomHeaderTableCellCreated);
        }
    
        void GridViewExtension1_CustomHeaderTableCellCreated(object sender, CustomHeaderEventArgs e)
        {
            TableRow tc = (TableRow)e.HeaderRow;
    
            tc.BackColor = System.Drawing.Color.AliceBlue;
        }
    
        private void Example1()
        {
            System.Data.DataTable dtSample = new DataTable();
            DataColumn dc1 = new DataColumn("Column1",typeof(string));
            DataColumn dc2 = new DataColumn("Column2",typeof(string));
            DataColumn dc3 = new DataColumn("Column3",typeof(string));
            DataColumn dc4 = new DataColumn("Column4",typeof(string));
           // DataColumn dc5 = new DataColumn("Column5",typeof(string));
            dtSample.Columns.Add(dc1);
            dtSample.Columns.Add(dc2);
            dtSample.Columns.Add(dc3);
            dtSample.Columns.Add(dc4);
           // dtSample.Columns.Add(dc5);
            dtSample.AcceptChanges();
    
            for (int i = 0; i < 25; i++)
            {
                DataRow dr = dtSample.NewRow();
    
                for (int j = 0; j < dtSample.Columns.Count; j++)
                {
                    dr[j] = j;
                }
                dtSample.Rows.Add(dr);
            }
            dtSample.AcceptChanges();
            //GridViewExtension1.ShowHeader = false;
            GridViewExtension1.ShowCustomHeader = true;
    
            /*
             *=======================================================================
             *  |Row 1 Cell 1   |   Row 1 Col 2 (Span=2)        | Row 1 Col 3   |
             *  |               |                               |               |
             *=======================================================================             
             *  |Row 2 Cell 1   |               |               |               |
             *  |               |   Row 2 Col 2 | Row 2 Col 3   |Row 2 Col 4    |
             *=======================================================================
             * 
             * 
             * 
             * 
             * */
    
            // SO we have to make 2 header row as shown above
    
            TableRow TR1 = new TableRow();
            TableCell tcR1C1 = new TableCell();
            tcR1C1.Text = "Row 1 Cell 1";
            tcR1C1.ColumnSpan = 1;
            TR1.Cells.Add(tcR1C1);       
    
            TableCell tcR1C2 = new TableCell();
            tcR1C2.Text = "Row 1 Cell 2";
            tcR1C2.ColumnSpan = 2;
            TR1.Cells.Add(tcR1C2);  
    
            TableCell tcR1C3 = new TableCell();
            tcR1C3.Text = "Row 1 Cell 3";
            tcR1C3.ColumnSpan = 1;
            TR1.Cells.Add(tcR1C3);
    
    
            GridViewExtension1.CustomHeaderRows.Add(TR1);
    
            TableRow TR2 = new TableRow();
            TableCell tcR2C1 = new TableCell();
            tcR2C1.Text = "Row 2 Cell 1";
            tcR2C1.ColumnSpan = 1;
            TR2.Cells.Add(tcR2C1);
    
            TableCell tcR2C2 = new TableCell();
            tcR2C2.Text = "Row 2 Cell 2";
            tcR2C2.ColumnSpan = 1;
            TR2.Cells.Add(tcR2C2);
    
            TableCell tcR2C3 = new TableCell();
            tcR2C3.Text = "Row 2 Cell 3";
            tcR2C3.ColumnSpan = 1;
            TR2.Cells.Add(tcR2C3);
    
            TableCell tcR2C4 = new TableCell();
            tcR2C4.Text = "Row 2 Cell 4";
            tcR2C4.ColumnSpan = 1;
            TR2.Cells.Add(tcR2C4);
    
            GridViewExtension1.CustomHeaderRows.Add(TR2);
    
    
            GridViewExtension1.DataSource = dtSample;
            GridViewExtension1.DataBind();
    
        }
    }
    

0
2018-02-21 18:06



Lihatlah artikel ini Kolom Dinamis Beberapa Baris Kolom


0
2017-09-04 07:58



Saya ingin melakukan tugas yang serupa tetapi membutuhkan tombol yang dapat diklik di dalam tajuk - tidak ada di atas yang berfungsi dalam kasus tersebut karena penangan kejadian tidak terhubung (karena urutan peristiwa). Pada akhirnya saya menggunakan tag headertemplate di bidang template yang sesuai dari tampilan grid. Html terlihat sedikit lebih kembung tetapi acara tetap utuh tanpa kode tambahan di balik upaya. Sebagai contoh

<asp:TemplateField >
             <HeaderTemplate>
               <div>
                <div style="text-align: center;padding-bottom: 5px;">
                                                          text
                   </div>
                    <div>
                     <asp:Button ID="Button1" runat="server" Text="Apply to all" ToolTip="Apply to all - Special Bolt On" CssClass="sub_button input_btn_5" OnClick="ApplyButton1_Click" />
                   </div>
                  </div>
                  </HeaderTemplate>
                  <ItemTemplate>....

0
2018-02-12 15:04