it is showing the output like thisIt should diplay the data in the equal gridview in equal length ltscript type34textjavascript34 src39httpajaxaspnetcdncomajaxjQueryjquery183minjs39gtltscriptgt ltscript type34textjavascript34gt documentreadyfunction var width new Array var table 34tableidGridView134 Pass your gridview id here tablefind34th34eachfunction i widthi

Hi smileRemove these property from GridViewRowStyleWrapfalseHeaderStyleWrapfalseAnd also remove Wrapfalse from below line of codesmile saysltHeaderStyle HorizontalAlignLeft Width100 Wrapfalse gtYou need to set same width size for gridview and div refer below sampleHTMLltscript type34textjavascript34 src34httpajaxgoogleapiscomajaxlibsjquery191jqueryminjs34gtltscriptgtltscript type34textjavascript34 src34httpmaxcdnbootstrapcdncombootstrap337jsbootstrapminjs34gtltscriptgtltlink rel34stylesheet34 href34httpmaxcdnbootstrapcdncombootstrap337cssbootstrapmincss34 gtltscript type34textjavascript34gt documentreadyfunction var table 34tableidGridView134 34container34htmltable0outerHTML 34container idGridView134find34trnotnthchild1notnthchild234

Set same (equal) ASP.Net GridView columns width using CSS

smile

SOLVED CLOSED ACTIVE ANSWERED
User: smile
Posted: on Feb 27, 2019 01:22 AM
Forum: Data Controls
Answer: 1
Views: 9837
Sample Code: Download

it is showing the output like this

It should diplay the data in the equal gridview in equal length

    <script type="text/javascript" src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
    <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").next();
    firstRow.find("td").each(function (i) {
        $(this).width(width[i]);
    });
    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(300);
    $("#container").width(table.width() + 1000);
    $("#container").append(table);
});
    </script>
<div>
    <div id="container" style="overflow: scroll; overflow-x: hidden; ">
    </div>
   <asp:GridView ID="GridView1" runat="server" AllowPaging="false"  ShowFooter = "true" AutoGenerateColumns="false"
          RowStyle-Wrap="false" HeaderStyle-Wrap="false"   Class="table table-striped table-bordered table-hover" Style="width: 50%; border-collapse: collapse;">
                            <Columns>
                    <asp:TemplateField>
                    <HeaderTemplate>
                      <asp:CheckBox ID="checkAll" runat="server" onclick = "checkAll(this);" />
                    </HeaderTemplate>
                   <ItemTemplate>
                     <asp:CheckBox ID="CheckBox1" runat="server" onclick = "Check_Click(this)" />
                   </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Code">
                <ItemTemplate >
                    <asp:Label ID="lbl_No" runat="server" Text='<%# Eval("GFID") %>' Width="50"></asp:Label>
                </ItemTemplate>               
                </asp:TemplateField>        
                <asp:BoundField ItemStyle-Width="150px" DataField="Year" HeaderText="Year" />
        <asp:BoundField ItemStyle-Width="150px" DataField="Month" HeaderText="Month" />
        <asp:BoundField ItemStyle-Width="150px" DataField="IssueDate" HeaderText="Issue Date" />
        <asp:BoundField ItemStyle-Width="150px" DataField="DueDate" HeaderText="Due Date" />
        <asp:BoundField DataField="AdmissionNo" HeaderText="Reg No">
            <HeaderStyle HorizontalAlign="Left" Width="100%" Wrap="false" />
            <ItemStyle HorizontalAlign="Left" VerticalAlign="Middle" Width="100%" Wrap="false" />
        </asp:BoundField>
        <asp:BoundField DataField="Class" HeaderText="Class">
            <HeaderStyle HorizontalAlign="Left" Width="100%" Wrap="false" />
            <ItemStyle HorizontalAlign="Left" VerticalAlign="Middle" Width="100%" Wrap="false" />
        </asp:BoundField>
        <asp:BoundField DataField="Section" HeaderText="Section">
            <HeaderStyle HorizontalAlign="Left" Width="100%" Wrap="false" />
            <ItemStyle HorizontalAlign="Left" VerticalAlign="Middle" Width="100%" Wrap="false" />
        </asp:BoundField>
        <asp:BoundField DataField="Head" HeaderText="Monthly Fees">
            <HeaderStyle HorizontalAlign="Left" Width="100%" Wrap="false" />
            <ItemStyle HorizontalAlign="Left" VerticalAlign="Middle" Width="100%" Wrap="false" />
        </asp:BoundField> 
    </Columns>
   </asp:GridView>
    </div>
  </div>

Download FREE API for Word, Excel and PDF in ASP.Net

pandeyis...

0 3

Reply
ANSWER
User: pandeyism
Replied: on Feb 27, 2019 11:04 PM
Modified: on Mar 08, 2019 07:35 AM
Report

Hi smile,

Remove these property from GridView.

RowStyle-Wrap="false"

HeaderStyle-Wrap="false"

And also remove Wrap="false" from below line of code.

smile says:

<HeaderStyle HorizontalAlign="Left" Width="100%" Wrap="false" />

You need to set same width size for gridview and div, refer below sample.

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript">
    $(document).ready(function () {
        var table = $("table[id*=GridView1]");
        $("#container").html($(table)[0].outerHTML);
        $("#container [id*=GridView1]").find("tr:not(:nth-child(1)):not(:nth-child(2))").remove();
    });
</script>
<div>
    <div id="container">
    </div>
    <asp:GridView ID="GridView1" runat="server" AllowPaging="false" ShowFooter="true"
        AutoGenerateColumns="false" RowStyle-Wrap="false" HeaderStyle-Wrap="false" Class="table table-striped table-bordered table-hover"
        Style="width: 500px; border-collapse: collapse;">
        <Columns>
            <asp:TemplateField>
                <HeaderTemplate>
                    <asp:CheckBox ID="checkAll" runat="server" onclick="checkAll(this);" />
                </HeaderTemplate>
                <ItemTemplate>
                    <asp:CheckBox ID="CheckBox1" runat="server" onclick="Check_Click(this)" />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:BoundField ItemStyle-Width="150px" DataField="CustomerId" HeaderText="CustomerId" />
            <asp:BoundField ItemStyle-Width="150px" DataField="Name" HeaderText="Name" />
            <asp:BoundField ItemStyle-Width="150px" DataField="Country" HeaderText="Country" />
            <asp:BoundField ItemStyle-Width="150px" DataField="CustomerId" HeaderText="CustomerId" />
            <asp:BoundField ItemStyle-Width="150px" DataField="Name" HeaderText="Name" />
            <asp:BoundField ItemStyle-Width="150px" DataField="Country" HeaderText="Country" />
            <asp:BoundField ItemStyle-Width="150px" DataField="CustomerId" HeaderText="CustomerId" />
            <asp:BoundField ItemStyle-Width="150px" DataField="Name" HeaderText="Name" />
            <asp:BoundField ItemStyle-Width="150px" DataField="Country" HeaderText="Country" />
            <asp:BoundField ItemStyle-Width="150px" DataField="CustomerId" HeaderText="CustomerId" />
            <asp:BoundField ItemStyle-Width="150px" DataField="Name" HeaderText="Name" />
            <asp:BoundField ItemStyle-Width="150px" DataField="Country" HeaderText="Country" />
            <asp:BoundField ItemStyle-Width="150px" DataField="CustomerId" HeaderText="CustomerId" />
            <asp:BoundField ItemStyle-Width="150px" DataField="Name" HeaderText="Name" />
            <asp:BoundField ItemStyle-Width="150px" DataField="Country" HeaderText="Country" />
            <asp:BoundField ItemStyle-Width="150px" DataField="CustomerId" HeaderText="CustomerId" />
            <asp:BoundField ItemStyle-Width="150px" DataField="Name" HeaderText="Name" />
            <asp:BoundField ItemStyle-Width="150px" DataField="Country" HeaderText="Country" />
            <asp:BoundField ItemStyle-Width="150px" DataField="CustomerId" HeaderText="CustomerId" />
            <asp:BoundField ItemStyle-Width="150px" DataField="Name" HeaderText="Name" />
            <asp:BoundField ItemStyle-Width="150px" DataField="Country" HeaderText="Country" />
            <asp:BoundField ItemStyle-Width="150px" DataField="CustomerId" HeaderText="CustomerId" />
            <asp:BoundField ItemStyle-Width="150px" DataField="Name" HeaderText="Name" />
            <asp:BoundField ItemStyle-Width="150px" DataField="Country" HeaderText="Country" />
        </Columns>
    </asp:GridView>
</div>

Namespaces

using System.Data;

Code

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[3] { new DataColumn("CustomerId", typeof(int)),
                        new DataColumn("Name", typeof(string)),
                        new DataColumn("Country",typeof(string)) });
        dt.Rows.Add(1, "John Hammond", "United States");
        dt.Rows.Add(2, "Mudassar Khan", "India");
        dt.Rows.Add(3, "Suzanne Mathews", "France");
        dt.Rows.Add(4, "Robert Schidner", "Russia");
        GridView1.DataSource = dt;
        GridView1.DataBind();
    }
}

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Set same (equal) ASP.Net GridView columns width using CSS

Company

Explore

Follow us

Contact Us