Click here to Skip to main content
15,033,215 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hello,


I Want To Merge ColumnHeader Cells of DataGridView Control.

I would Like Draw a Rectangle in such a way that From Sixth Column Header to 9th Column

kindly Reply Regarding this Topic

Regards

Lakshman C B
Posted

Here[^] is one way to do it.

There are other ways so if you want to try them search for c# datagridview merge headers.
   
C#
put this script after the <form> tag inside the <body> tag. It really Works.In case it fails ,please let me know.
after implementing it please remember to Tick My Answer, and vote me. 

:-D

JavaScript
<script type="text/javascript" language="javascript">
       var myTable = document.getElementById('<%= GridView1.ClientID %>');
       if(myTable)
       {
           var rows = myTable.getElementsByTagName('tr');
           var numRows = rows.length;
           var numCols= rows[rows.length-1].getElementsByTagName('td').length;
         //for (var i = 0; i <(numRows); i++)    //to merge columns of all rows
           for (var i = 0; i <1; i++)            //to merge columns of 1st row only
           {
               var numColSpan=1;
               for (var j = 5; j <8; j++)
               {
                    if (numColSpan<=1)
                    {
                        var currentRow = myTable.getElementsByTagName('tr')[i];
                        var currentCell;
                        if(i==0)
                        {
                             // first row of table rendered by the browser for
                             // gridview contains header cells therefore we access <th>
                             currentCell= currentRow.getElementsByTagName('th')[j];  // the 1st column
                        }
                        else
                        {
                             currentCell= currentRow.getElementsByTagName('td')[j];  // the 1st column
                        }
                        var currentCellData = currentCell.childNodes[0].data;
                    }
                    if (j<numCols-1)
                    {
                       var cellToCheck;
                       // first row of table rendered by the browser for
                       // gridview contains header cells therefore we access <th>
                       if(i==0)
                       {
                             // first row of table rendered by the browser for
                             // gridview contains header cells therefore we access <th>
                           cellToCheck=currentRow.getElementsByTagName('th')[j+1] // the 1st column
                       }
                       else
                       {
                           cellToCheck=currentRow.getElementsByTagName('td')[j+1]
                       }
                       if (cellToCheck)
                        {
                               var nextCell = cellToCheck;
                               numColSpan += 1;
                               currentCell.colSpan = numColSpan;
                               currentCell.align="center";
                               nextCell.style.display = 'none';   //disappear the next cell
                               currentCell.style.background="green";
                               currentCell.innerHTML="Merged";
                        }
                     }
                }
            }
        }
 </script>
   
v2
Comments
Henry Minute 24-Oct-10 5:24am
   
The OP asked for help with a DataGridView. That is a Windows Forms Control, not a Web or ASP control.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900