locked
Gridview fix header error alignment ot showing perfect RRS feed

Answers

  • User-893317190 posted

    Hi Gopi.MCA,

    If so , you need little js.

    Below is my code.

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <style>
        td{
                box-sizing:border-box;
            word-wrap:break-word;
        word-break:break-all;
        width:100px;   /*write your own width*/    
    
            }
    
        #table td{
         border:1px solid black
        }
        </style>
        <script src="../Scripts/jquery-3.3.1.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">
         
    
       <div id="container"></div>
           <table style="background-color: #0066CC" id="table">
            <tr>
                <td style="font-weight: bold;">
                    Item ID
                </td>
                <td style="font-weight: bold;  ">
                    Description
                </td>
                <td style="font-weight: bold;  ">
                    Status
                </td>
            </tr>
            
        </table>
    
    
            <asp:GridView ID="ItemGridView" runat="server" AutoGenerateColumns="false" 
                ShowHeader="false" >
                <Columns>
                   
                    <asp:BoundField DataField="ITEMID">
                       <ItemStyle HorizontalAlign="Left" ForeColor="#00C0C0" Wrap="true"  />
                    </asp:BoundField>
                    <asp:BoundField DataField="DSC" >
                        <ItemStyle HorizontalAlign="Left" ForeColor="#00C0C0" Wrap="true" />
                    </asp:BoundField>
                    <asp:BoundField DataField="ACTIVE" >
                        <ItemStyle HorizontalAlign="Left" ForeColor="#00C0C0" Wrap="true"  />
                    </asp:BoundField>
                </Columns>
                <SelectedRowStyle BackColor="#FBAF29" />
            </asp:GridView>
     
    
            <script type="text/javascript">
                $(function () {
                    
                    // set the gridview's  row width to the row width of the header 
                    $("#ItemGridView").innerWidth($("#table").outerWidth());
                    $("#table").innerWidth($("#table").outerWidth());
    
                    var div = $(' <div style="overflow-y: scroll; overflow-x: scroll; height: 200px; width: 210px;"><div>');
                   div.append($("#table")).append($("#ItemGridView"));
                    $("#container").html(div);
             
                })
           
        </script>
        </form>
        </body>
        </html>
    

    Best regards,

    Ackerly Xu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, September 22, 2018 2:14 AM

All replies

  • User-807418713 posted

    I set  <ItemStyle HorizontalAlign="Left" ForeColor="#00C0C0" Wrap="true" Width="100px" />

    still its not coming 100px

    Thursday, September 20, 2018 8:01 AM
  • User-807418713 posted

    I used this javascript

    any one let me know how to define same headercolumn width in this javacript

    <script type="text/javascript">
            $(document).ready(function () {
                var width = new Array();
                var table = $("table[id*=GridView1]"); //Pass your gridview id here.
                table.find("th").each(function (i) {
                    width[i] = $(this).width();
                });
                headerRow = table.find("tr:first");
                headerRow.find("th").each(function (i) {
                    $(this).width(width[i]);
                });
                firstRow = table.find("tr:first").closest();
                firstRow.find("").each(function (i) {
                    $(this).width(width[0]);
                });
                var header = table.clone();
                header.empty();
                header.append(headerRow);
                header.append(firstRow);
                header.css("width", width);
                $("#container").before(header);
                table.find("tr:first td").each(function (i) {
                    $(this).width(width[i]);
                });
                $("#container").height(400);
                $("#container").width(table.width());
                $("#container").append(table);
            });
        </script>

    Thursday, September 20, 2018 8:48 AM
  • User-893317190 posted

    Hi Gopi.MCA ,

    If you want to change every column's width to 100px , you don't need to use javascript.

    You only need to change the style of your table and girdview.

    Below is my code according to your link. It is better to understand that <table width="300px" style="background-color: #0066CC" > serves as header  of you gridview here.

    So if you want to change header , you should change the style of the table.

      <table width="300px" style="background-color: #0066CC" >
            <tr>
                <td style="font-weight: bold; width: 100px; border: 1px solid black">
                    Item ID
                </td>
                <td style="font-weight: bold; width: 100px; border: 1px solid black">
                    Description
                </td>
                <td style="font-weight: bold; width: 100px; border: 1px solid black">
                    Status
                </td>
            </tr>
        </table>
        <div style="overflow-y: scroll; overflow-x: hidden; height: 200px; width: 300px;">
            <asp:GridView ID="ItemGridView" runat="server" AutoGenerateColumns="false" Width="300"
                ShowHeader="false" >
                <Columns>
      	              <asp:BoundField DataField="ITEMID">
                       <ItemStyle HorizontalAlign="Left" ForeColor="#00C0C0" Wrap="true" Width="100px" />
                    </asp:BoundField>
                    <asp:BoundField DataField="DSC" >
                        <ItemStyle HorizontalAlign="Left" ForeColor="#00C0C0" Wrap="true" Width="100px" />
                    </asp:BoundField>
                    <asp:BoundField DataField="ACTIVE" >
                        <ItemStyle HorizontalAlign="Left" ForeColor="#00C0C0" Wrap="true" Width="100px" />
                    </asp:BoundField>
                </Columns>
                <SelectedRowStyle BackColor="#FBAF29" />
            </asp:GridView>

    The result.

    Best regards,

    Ackerly Xu

    Thursday, September 20, 2018 9:12 AM
  • User-807418713 posted

    Hello

    Thanks for your code

    I have given all same still its not coming perfect

    whats the issue

    Thursday, September 20, 2018 9:28 AM
  • User-807418713 posted

    Hello

    Its difficult to caluclate total of each time width coz i have more then 30 columns in gridview

    Any other best it take take directly if we pass width to asp:boundfield

    Thank You

    Thursday, September 20, 2018 10:30 AM
  • User475983607 posted

    The image shows the header row is not part of the GridView but some other bit of HTML.  Use standard CSS to assign a width to the gridview columns as well as the separate HTML so the two elements are using the same format. 

    The browser's developer tools can help you debug the UI.

    Thursday, September 20, 2018 1:21 PM
  • User-893317190 posted

    Hi Gopi.MCA ,

    It seems that you want to  align header and body using jquery.

    If so , you could try the code below. table is  the id of header table.

      <style>
        td{
                box-sizing:border-box;
               
            }
        #table td{
         border:1px solid black
        }
        </style>
        <script src="../Scripts/jquery-3.3.1.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">
          
           <table style="background-color: #0066CC" id="table">
            <tr>
                <td style="font-weight: bold;">
                    Item ID
                </td>
                <td style="font-weight: bold;  ">
                    Description
                </td>
                <td style="font-weight: bold;  ">
                    Status
                </td>
            </tr>
            
        </table>
            
        <div style="overflow-y: scroll; overflow-x: scroll; height: 200px; width: 210px;">
            <asp:GridView ID="ItemGridView" runat="server" AutoGenerateColumns="false" 
                ShowHeader="false" >
                <Columns>
                    <asp:BoundField DataField="ITEMID">
                       <ItemStyle HorizontalAlign="Left" ForeColor="#00C0C0" Wrap="true"  />
                    </asp:BoundField>
                    <asp:BoundField DataField="DSC" >
                        <ItemStyle HorizontalAlign="Left" ForeColor="#00C0C0" Wrap="true" />
                    </asp:BoundField>
                    <asp:BoundField DataField="ACTIVE" >
                        <ItemStyle HorizontalAlign="Left" ForeColor="#00C0C0" Wrap="true"  />
                    </asp:BoundField>
                </Columns>
                <SelectedRowStyle BackColor="#FBAF29" />
            </asp:GridView>
        </div>
    
            <script type="text/javascript">
                $(function () {
                    $("#ItemGridView tr:first td").each(
    
                        function (index, value) {
                            //get the max width between the header column and gridview column
                            var maxWidth = Math.max($("#table td").eq(index).outerWidth(), $(value).innerWidth());
    
    
                            // set the gridview's column width to the maxWidth
                          $(value).innerWidth(maxWidth);
                       
                          // set the header column width to the maxWidth
                            $("#table td").eq(index).outerWidth(maxWidth);
                        }
    
                    )
                    // set the gridview's  row width to the row width of the header 
                    $("#ItemGridView").innerWidth($("#table").outerWidth())
             
                })

    About the jquery method innerWidth, width and outerWidth , you could refer to https://api.jquery.com/category/manipulation/

    About  css style box-sizing ,you could refer to https://www.w3schools.com/CSSref/css3_pr_box-sizing.asp

    The result.

    Best regards,

    Ackerly Xu

    Friday, September 21, 2018 5:35 AM
  • User-807418713 posted

    Hello

    I tried the same but if my data in column is big it aligment not working how to crop that item template data and header data with same size sot hat if any big data also comes then it should come within that range

    Friday, September 21, 2018 6:57 AM
  • User-893317190 posted

    Hi Gopi.MCA,

    If you want to the header to move with the body, you could add the header and body in the same div.

    Below is my code.

     <style>
        td{
                box-sizing:border-box;
               
            }
        #table td{
         border:1px solid black
        }
        </style>
        <script src="../Scripts/jquery-3.3.1.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">
         
           <table style="background-color: #0066CC" id="table">
            <tr>
                <td style="font-weight: bold;">
                    Item ID
                </td>
                <td style="font-weight: bold;  ">
                    Description
                </td>
                <td style="font-weight: bold;  ">
                    Status
                </td>
            </tr>
            
        </table>
    
            <asp:GridView ID="ItemGridView" runat="server" AutoGenerateColumns="false" 
                ShowHeader="false" >
                <Columns>
                    <asp:BoundField DataField="ITEMID">
                       <ItemStyle HorizontalAlign="Left" ForeColor="#00C0C0" Wrap="true"  />
                    </asp:BoundField>
                    <asp:BoundField DataField="DSC" >
                        <ItemStyle HorizontalAlign="Left" ForeColor="#00C0C0" Wrap="true" />
                    </asp:BoundField>
                    <asp:BoundField DataField="ACTIVE" >
                        <ItemStyle HorizontalAlign="Left" ForeColor="#00C0C0" Wrap="true"  />
                    </asp:BoundField>
                </Columns>
                <SelectedRowStyle BackColor="#FBAF29" />
            </asp:GridView>
     
    
            <script type="text/javascript">
                $(function () {
                    $("#ItemGridView tr:first td").each(
    
                        function (index, value) {
                            //get the max width between the header column and gridview column
                            var maxWidth = Math.max($("#table td").eq(index).outerWidth(), $(value).outerWidth());
    
    
                            // set the gridview's column width to the maxWidth
                          $(value).innerWidth(maxWidth);
                       
                          // set the header column width to the maxWidth
                            $("#table td").eq(index).outerWidth(maxWidth);
                        }
    
                    )
                    // set the gridview's  row width to the row width of the header 
                    $("#ItemGridView").innerWidth($("#table").outerWidth());
                    $("#table").innerWidth($("#table").outerWidth());
    
                    var div = $(' <div style="overflow-y: scroll; overflow-x: scroll; height: 200px; width: 210px;"><div>');
                    div.append($("#table")).append($("#ItemGridView"));
                    $("#form1").html(div);
             
                })
           
        </script>
        </form>

    The result.

    Best regards

    Ackerly Xu

    Friday, September 21, 2018 8:15 AM
  • User-807418713 posted

    Hello

    Thanks For Your Code

    I Mean for Example Status showing Like This A22222222222222222222222222222222222222222

    Im giving Width 150px for status then it should come like this with text wrap 

    I will define each colum header width and itemtemplate width will be same it should come perfect with wrap even data is big like above

    Friday, September 21, 2018 9:08 AM
  • User-893317190 posted

    Hi Gopi.MCA,

    If so , you need little js.

    Below is my code.

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <style>
        td{
                box-sizing:border-box;
            word-wrap:break-word;
        word-break:break-all;
        width:100px;   /*write your own width*/    
    
            }
    
        #table td{
         border:1px solid black
        }
        </style>
        <script src="../Scripts/jquery-3.3.1.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">
         
    
       <div id="container"></div>
           <table style="background-color: #0066CC" id="table">
            <tr>
                <td style="font-weight: bold;">
                    Item ID
                </td>
                <td style="font-weight: bold;  ">
                    Description
                </td>
                <td style="font-weight: bold;  ">
                    Status
                </td>
            </tr>
            
        </table>
    
    
            <asp:GridView ID="ItemGridView" runat="server" AutoGenerateColumns="false" 
                ShowHeader="false" >
                <Columns>
                   
                    <asp:BoundField DataField="ITEMID">
                       <ItemStyle HorizontalAlign="Left" ForeColor="#00C0C0" Wrap="true"  />
                    </asp:BoundField>
                    <asp:BoundField DataField="DSC" >
                        <ItemStyle HorizontalAlign="Left" ForeColor="#00C0C0" Wrap="true" />
                    </asp:BoundField>
                    <asp:BoundField DataField="ACTIVE" >
                        <ItemStyle HorizontalAlign="Left" ForeColor="#00C0C0" Wrap="true"  />
                    </asp:BoundField>
                </Columns>
                <SelectedRowStyle BackColor="#FBAF29" />
            </asp:GridView>
     
    
            <script type="text/javascript">
                $(function () {
                    
                    // set the gridview's  row width to the row width of the header 
                    $("#ItemGridView").innerWidth($("#table").outerWidth());
                    $("#table").innerWidth($("#table").outerWidth());
    
                    var div = $(' <div style="overflow-y: scroll; overflow-x: scroll; height: 200px; width: 210px;"><div>');
                   div.append($("#table")).append($("#ItemGridView"));
                    $("#container").html(div);
             
                })
           
        </script>
        </form>
        </body>
        </html>
    

    Best regards,

    Ackerly Xu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, September 22, 2018 2:14 AM