I want to have a fixedview gridview. I tried this link and this
I was able to do this all the time, but there was a problem with the fact that the width of the grid title and the width of the columns are not set the same. So it doesn't look good, but scrolling and freezing work fine. If I do not use the freeze logic, then the width of the header will look right.
When I noticed the code and compared to mine, I found that they used to set the columns in the design, I myself, when I do not specify the columns in the design, and I install the SQL data source from the code behind, and the column is set as part of the SQL data source . So in design I have
<form id="form1" runat="server"> <div> </div> <asp:GridView ID="GridView1" runat="server" Font-Size=12px CellPadding="4" ForeColor="#333333" GridLines="Vertical"> <RowStyle BackColor="#F7F6F3" ForeColor="#333333" /> <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" /> <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" /> <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" /> <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" /> <EditRowStyle BackColor="#999999" /> <AlternatingRowStyle BackColor="White" ForeColor="#284775" /> </asp:GridView> </form>
here is a screenshot that shows the problem (you can observe the change in width and header columns)
But the example in these links shows tags and column names. So is this a problem?
How can I solve my problem? How to set the width of the header as well as the width of the column.
change
Below is the displayed HTML code of the page (but this HTML code shows that it is different from what the asp page shows in the browser. 1st line is shown as shifted in HTML, but correct in asp. But the header problem still exists in both )
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="./Scrollable Gridview with Fixed Header_files/jquery-1.4.1.min.js" type="text/javascript"></script> <script src="./Scrollable Gridview with Fixed Header_files/ScrollableGridPlugin.js" type="text/javascript"></script> <title> Scrollable Gridview with Fixed Header </title> <script type="text/javascript" language="javascript"> $(document).ready(function() { $('#GridView1').Scrollable(); } ) </script> </head> <body> <form name="form1" method="post" action="./Scrollable Gridview with Fixed Header_files/Scrollable Gridview with Fixed Header.htm" id="form1"> <div> <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/"> </div> <div> </div> <div> <div></div><div><table cellspacing="0" cellpadding="4" rules="cols" border="1" style="color: rgb(51, 51, 51); font-size: 12px; width: 900px; border-collapse: collapse;"><tbody><tr style="color:White;background-color:#5D7B9D;font-weight:bold;"> <th scope="col" style="width: 105px;">name</th><th scope="col" style="width: 241px;">Status</th><th scope="col" style="width: 59px;">Error</th><th scope="col" style="width: 96px;">No.</th><th scope="col" style="width: 37px;">date</th><th scope="col" style="width: 100px;">date1</th><th scope="col" style="width: 59px;">Received</th><th scope="col" style="width: 51px;">time1</th><th scope="col" style="width: 100px;">time2</th><th scope="col" style="width: 22px;">AY</th><th scope="col" style="width: 26px;">we</th><th scope="col" style="width: 84px;">Setft</th> </tr></tbody></table></div><div style="overflow: auto; height: 200px; width: 917px;"><table cellspacing="0" cellpadding="4" rules="cols" border="1" id="GridView1" style="color:#333333;font-size:12px;width:900px;border-collapse:collapse;"> <tbody><tr style="color:#333333;background-color:#F7F6F3;"> <td style="width: 105px;">Sews</td><td style="width: 241px;">fggghtg</td><td style="width: 59px;">thtthgtrtht</td><td style="width: 96px;"> </td><td style="width: 37px;"> </td><td style="width: 100px;"> </td><td style="width: 59px;">17:52:53</td><td style="width: 51px;"> </td><td style="width: 100px;"> </td><td style="width: 22px;">14-15</td><td style="width: 26px;">1</td><td style="width: 84px;">sdgg</td> </tr><tr style="color:#284775;background-color:White;"> <td>Ses</td><td>dffggg</td><td>Invalid </td><td> </td><td> </td><td> </td><td>18:00:31</td><td> </td><td> </td><td>14-15</td><td>1</td> <td>DtyuFGtyuty</td> </tr><tr style="color:#333333;background-color:#F7F6F3;"> <td>Ses</td><td>qwerty</td><td> </td><td> </td><td> </td><td> </td><td>18:03:42</td><td> </td><td> </td><td>14-15</td><td>1</td> <td>yuutyutu</td> </tr><tr style="color:#284775;background-color:White;"> <td>rttty N</td><td>dffggg</td><td>Invalid </td><td> </td><td> </td><td> </td><td>20:31:14</td><td> </td><td> </td><td>14-15</td><td>1</td> <td>tyuutu</td> </tr><tr style="color:#333333;background-color:#F7F6F3;"> <td>tyu tyu tyu</td><td>qwerty</td><td> </td><td> </td><td> </td><td> </td><td>17:37:02</td><td> </td><td> </td><td>14-15</td><td>2</td> <td>tyutu</td> </tr><tr style="color:#284775;background-color:White;"> <td>tyu tyu tyu</td><td>rerty tht.</td><td>Invalid</td> <td>ytutyutu</td><td>13-08-2014</td><td>13-08-2014</td><td>11:43:23</td><td>10:37:26</td><td>10:37:26</td><td>14-15</td><td>2</td> <td>tyuutyty</td> </tr><tr style="color:#333333;background-color:#F7F6F3;"> <td>Testing</td><td>qwerty</td><td> </td><td> </td><td> </td><td> </td><td>11:45:34</td><td> </td><td> </td><td>14-15</td><td>1</td> <td>tyutyu</td> </tr><tr style="color:#284775;background-color:White;"> <td>Testing</td><td>qwerty</td><td> </td><td> </td><td> </td><td> </td><td>11:48:22</td><td> </td><td> </td><td>14-15</td><td>1</td> <td>tyuutut</td> </tr> </tbody></table></div></div> </form> </body></html>
source share