Hi I am developing a website using c# and asp.net. But my grid view is not showing properly for one page only. Whether I am using the same css class but still the output is something odd.
Here is the output I am getting:
here is my design view code for the grid:
<div style="width: 800px; align-content: center;">
<asp:GridView ID="gvMv" runat="server" AutoGenerateColumns="False" width="400px"
OnRowDataBound="gvMv_RowDataBound" CssClass="Grid" ShowFooter="True">
<FooterStyle Height="25" />
<RowStyle />
<PagerStyle />
<HeaderStyle />
<Columns>
<asp:BoundField DataField="day" HeaderText="Day" HeaderStyle-Width="150" ItemStyle-Height="25" HeaderStyle-Height="30">
<HeaderStyle Height="30px" Width="150px"></HeaderStyle>
<ItemStyle Height="25px"></ItemStyle>
</asp:BoundField>
<asp:TemplateField HeaderText="0.30"></asp:TemplateField>
<asp:TemplateField HeaderText="1.00"></asp:TemplateField>
<asp:TemplateField HeaderText="2.00"></asp:TemplateField>
<asp:TemplateField HeaderText="2.50"></asp:TemplateField>
<asp:TemplateField HeaderText="4.00"></asp:TemplateField>
<asp:TemplateField HeaderText="5.00"></asp:TemplateField>
<asp:TemplateField HeaderText="1.50"></asp:TemplateField>
<asp:TemplateField HeaderText="Total" ItemStyle-ForeColor="#0099FF">
<ItemStyle ForeColor="#0099FF"></ItemStyle>
</asp:TemplateField>
</Columns>
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" Font-Size="Smaller" />
<RowStyle CssClass="rSty" BackColor="#F7F7DE" />
<SelectedRowStyle BackColor="#CE5D5A" Font-Bold="true" ForeColor="White" />
<PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
<HeaderStyle CssClass="hSty" BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" />
</asp:GridView>
</div>
I want all of the column to be same width. Can anyone please help me on this?
Thank you.
I had the same issue and this is what worked for me
<asp:TemplateField ItemStyle-Width="150px" HeaderText="ABC" ItemStyle-HorizontalAlign="center">
<ItemTemplate>
<asp:Label ID="ABC" runat="server" Text ='<%# Eval("ABC")%>' ></asp:Label>
</ItemTemplate>
<HeaderTemplate>
<asp:TextBox ID="txtBusinessGroup" runat="server" onkeyup="filter_BusinessGroup(this)" CssClass="texbox_header" Width="130px" placeholder="ABC" Text="" ToolTip="TYPE IN THE ABC PLEASE"></asp:TextBox>
</HeaderTemplate>
<ItemStyle HorizontalAlign="Center" Width="150px" />
</asp:TemplateField>
I am showing textfield in the headertext which you can remove.
The width of the fields i change from
<ItemStyle HorizontalAlign="Center" Width="150px" />
or the actual textbox im using or the templatefield
<asp:TemplateField ItemStyle-Width="150px" HeaderText="ABC" ItemStyle-HorizontalAlign="center">
I hope this helps you and works for you or anyone else who might end up here.
thank you
Here is an example how you can do it :
<asp:TemplateField HeaderText="used">
<HeaderStyle Width="100" />
<ItemStyle Width="100" />
</asp:TemplateField>
You can use ItemStyle to set properties for your template field column
Try using this template code:
<asp:TemplateField HeaderText="ABC">
<ItemTemplate>
<asp:Label ID="lblABC" runat="server"
Text='<%#DataBinder.Eval(Container.DataItem, "ABCId") %>'>
</asp:Label>
</ItemTemplate>
<ItemStyle Width="20px" />
<HeaderStyle Width="20px" />
<FooterStyle Width="20px" />
<EditItemTemplate>
<asp:Label ID="lblEditABC" runat="server"
Text='<%#DataBinder.Eval(Container.DataItem, "ABCId") %>'>
</asp:Label>
</EditItemTemplate>
</asp:TemplateField>
i experienced the same. ItemStyle is not working! use HeaderStyle.
GridView1.Columns[2].HeaderStyle.Width = 20;
``If these all above code will note work to increase the width of gridview header then you can try this one also it will work definitely.Simply after YourText putt HTML space tag that is that much how much space you want.
**HeaderText="YourText "**
Related
hi i have a Gridview that load from the database and i create a column in the Gridview name lblImportanceRatio and i need this column to generate those number in every row 25,20,35,20
this is the Gridview:
enter image description here
and the column name SymbolicRate i wanna just generate those number 25,20,35,20 in every row i tried to add the generate number in the Grirdview row data bound in for loop but it only give me the last number in the all column i'm Using Asp.net C#
this the Gridview:
<asp:GridView ID="gvRptBattalion" runat="server" AutoGenerateColumns="False" CssClass="table" OnRowDataBound="gvRptBattalion_RowDataBound" Visible="false">
<Columns>
<asp:BoundField DataField="ReadinessTypeName" HeaderText="Type" />
<asp:BoundField DataField="SymbolicRate" HeaderText="Rate" />
<asp:TemplateField>
<HeaderTemplate>
<asp:Label runat="server" Text="SymbolicRate"></asp:Label>
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lblImportanceRatio" runat="server"></asp:Label>
</ItemTemplate>
<ItemStyle Width="50px" />
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
<asp:Label runat="server" Text="Total"></asp:Label>
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lblTotal" runat="server"></asp:Label>
</ItemTemplate>
<ItemStyle Width="50px" />
</asp:TemplateField>
<asp:BoundField DataField="BattalionDate" HeaderText="#">
<FooterStyle CssClass="hide_identity" />
<HeaderStyle CssClass="hide_identity" HorizontalAlign="Right" />
<ItemStyle CssClass="hide_identity" />
</asp:BoundField>
<asp:BoundField DataField="SUnitId" HeaderText="#">
<FooterStyle CssClass="hide_identity" />
<HeaderStyle CssClass="hide_identity" HorizontalAlign="Right" />
<ItemStyle CssClass="hide_identity" />
</asp:BoundField>
<asp:TemplateField>
<HeaderTemplate>
<asp:Label runat="server" Text="TotalAll"></asp:Label>
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lblFormla" runat="server"></asp:Label>
</ItemTemplate>
<FooterStyle CssClass="lbl" />
<HeaderStyle CssClass="lbl" HorizontalAlign="Right" />
<ItemStyle CssClass="lbl" />
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
<asp:Label runat="server" Text="TotalALL2"></asp:Label>
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lblG" runat="server"></asp:Label>
</ItemTemplate>
<FooterStyle CssClass="lbl" />
<HeaderStyle CssClass="lbl" HorizontalAlign="Right" />
<ItemStyle CssClass="lbl" />
</asp:TemplateField>
</Columns>
</asp:GridView>
I have gridview with footer and addbutton on that, how to add new rows if I push the addbutton ? so I can enter new data on that. I also want save them all into database, can somebody explain please
this my front code:
<asp:GridView ID="GridView1" AutoGenerateColumns="False" runat="server" CellPadding="4" ForeColor="#333333"
GridLines="None" ShowFooter="True" Width="707px" >
<AlternatingRowStyle BackColor="White"/>
<Columns>
<asp:TemplateField>
<FooterTemplate>
<asp:Button ID="AddProduct" runat="server" CssClass="button" Text="Add" onclick="AddProduct_Click" ></asp:Button>
</FooterTemplate>
</asp:TemplateField>
<asp:BoundField HeaderStyle-Width="120px" HeaderText="Id Trans" DataField="Id_Trans" ShowHeader="False" Visible="False">
<HeaderStyle Width="120px"></HeaderStyle>
</asp:BoundField>
<asp:TemplateField HeaderText="Nama Barang" SortExpression="Nama_Item">
<ItemTemplate>
<asp:DropDownList ID="DropDownList1" runat="server" DataSourceID="tampilbarang" DataTextField="Nama_Item" DataValueField="Id_Item">
</asp:DropDownList>
<asp:SqlDataSource ID="tampilbarang" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT * FROM [Item]"></asp:SqlDataSource>
</ItemTemplate>
<HeaderStyle Width="120px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="QTY">
<ItemTemplate>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</ItemTemplate>
<HeaderStyle Width="120px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Keterangan Penggunaan">
<ItemTemplate>
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
</ItemTemplate>
<HeaderStyle Width="120px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Aksi">
<ItemTemplate>
<asp:Button ID="Del" runat="server" Height="22px" Text="Delete" Width="57px" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EditRowStyle BackColor="#2461BF" />
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#EFF3FB" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#F5F7FB" />
<SortedAscendingHeaderStyle BackColor="#6D95E1" />
<SortedDescendingCellStyle BackColor="#E9EBEF" />
<SortedDescendingHeaderStyle BackColor="#4870BE" />
</asp:GridView>
There are a lot of things to explain in answer your question, so instead I'd recommend a good tutorial - try this - https://quickstarts.asp.net/quickstartv20/aspnet/doc/ctrlref/data/gridview.aspx
You can add a button in footer template like this example:
<asp:gridview ID="Gridview1" runat="server" ShowFooter="true" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="RowNumber" HeaderText="Row Number" />
<asp:TemplateField HeaderText="Header 1">
<ItemTemplate>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Header 2">
<ItemTemplate>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Header 3">
<ItemTemplate>
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
</ItemTemplate>
<FooterStyle HorizontalAlign="Right" />
<FooterTemplate>
<asp:Button ID="ButtonAdd" runat="server" Text="Add New Row" />
</FooterTemplate>
</asp:TemplateField>
</Columns>
</asp:gridview>
Currently I have 3 checkboxes in gridview which are Approval,Access and Edit. What I want to achieve is when I checked the Edit column, the Access column will be checked automatically too. Is there any way to solve this? I have looked through a lot internet source but still not able to do it. Please help me..
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" AllowSorting="True" BorderStyle="Solid" Font-Names="Tahoma" Font-Size="11pt" HorizontalAlign="Center" Width="65%">
<Columns>
<asp:BoundField DataField="Module" HeaderText="Module" SortExpression="Module" />
<asp:BoundField DataField="Description" HeaderText="Description" SortExpression="Description" />
<asp:TemplateField HeaderText="Approval">
<ItemTemplate>
<asp:CheckBox ID="CBApproval" runat="server" />
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Access">
<ItemTemplate>
<asp:CheckBox ID="CBAccess" runat="server" AutoPostBack="False" />
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Edit">
<ItemTemplate>
<asp:CheckBox ID="CBEdit" runat="server" AutoPostBack="True"/>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
</Columns>
<HeaderStyle BackColor="#FFCC00" BorderColor="Black" BorderStyle="Solid" BorderWidth="2px" />
</asp:GridView>
Sinc edit checkbox postback you may set the value of accessed checkbox from codebehind.. Add new event to edit checkbox on click and set new value for accessed checkbox.checked
I have the following Gridview. I need sorting arrows in every column header for sorting. I have set AllowSorting property to true.But it is not showing the arrows.Additionally, I added SortExpression to template fields .Still it is not showing the sorting arrows. I couldn't understand the issue. How can I fix this issue?
The code is given below
<asp:GridView ID="dgvCatReport" runat="server"
AutoGenerateColumns="False" CellPadding="4"
ForeColor="#333333" GridLines="None"
AllowPaging="True"
AllowSorting="true"
OnPageIndexChanging="dgvCatReport_PageIndexChanging"
PagerSettings-Mode="NumericFirstLast"
PagerSettings-Position="TopAndBottom"
PageSize="10"
CssClass=" table table-striped table-hover"
AlternatingRowStyle-CssClass="alt"
PagerStyle-CssClass="bs-pagination">
<columns>
<asp:templatefield headertext="Category Name" sortexpression="CatName">
<itemtemplate>
<h5><%# Eval("CatName") %></h5>
</itemtemplate>
<headerstyle horizontalalign="Left" />
<itemstyle width="200px" />
</asp:templatefield>
<asp:templatefield headertext="Total Views" sortexpression="ReportCount">
<itemtemplate>
<span><%# Eval("ReportCount") %></span>
</itemtemplate>
<headerstyle horizontalalign="Left" />
<itemstyle width="75px" />
</asp:templatefield>
<asp:templatefield headertext="Daily Views" sortexpression="DailyCount">
<itemtemplate>
<span><%# Eval("DailyCount") %></span>
</itemtemplate>
<headerstyle horizontalalign="Left" />
<itemstyle width="75px" />
</asp:templatefield>
<asp:templatefield headertext="Weekly Views" sortexpression="WeeklyCount">
<itemtemplate>
<span><%# Eval("WeeklyCount") %></span>
</itemtemplate>
<headerstyle horizontalalign="Left" />
<itemstyle width="75px" />
</asp:templatefield>
<asp:templatefield headertext="Monthly Views" sortexpression="MonthlyCount">
<itemtemplate>
<span><%# Eval("MonthlyCount") %></span>
</itemtemplate>
<headerstyle horizontalalign="Left" />
<itemstyle width="75px" />
</asp:templatefield>
</columns>
<%-- <pagersettings mode="NumericFirstLast" position="TopAndBottom"></pagersettings>
<pagerstyle backcolor="White" cssclass="pgr"></pagerstyle>--%>
</asp:GridView>
I'm not sure if Asp.net grid provides default images for sorting. But you can still use a custom approach to show images.
set the Gridview properties
SortedAscendingHeaderStyle-CssClass="sortasc"
SortedDescendingHeaderStyle-CssClass="sortdesc"
Add css classes:
th.sortasc a
{
display:block; padding:0 4px 0 15px;
background:url("images/icons/ascArrow.png") no-repeat;
}
th.sortdesc a
{
display:block; padding:0 4px 0 15px;
background:url("images/icons/descArrow.png") no-repeat;
}
I am using asp.net framework 3.5 and c# 2.0. I am able to bind data in to gridview.
Actually I want to display Image on mouseover event on asp:linkButton, which is used in grid view
<asp:GridView ID="gvTemplate" runat="server" AllowPaging="True" AutoGenerateColumns="False"
CellPadding="4" ForeColor="#333333" GridLines="None" ShowFooter="True" Width="100%"
OnRowCommand="gvTemplate_RowCommand" OnRowDataBound="RowDataBound" OnPageIndexChanging="gvTemplate_PageIndexChanging">
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<Columns>
<asp:TemplateField HeaderStyle-HorizontalAlign="Left" HeaderText="Sr. No">
<ItemTemplate>
<%# Container.DataItemIndex + 1 %>
</ItemTemplate>
<HeaderStyle HorizontalAlign="Left" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Template Name" ItemStyle-HorizontalAlign="Left">
<ItemTemplate>
<asp:LinkButton ID="lBtTempID" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"tempName") %>'
CommandName='<%# DataBinder.Eval(Container.DataItem,"tempID") %>' CommandArgument="tempID" onmouseover="javascript:showImage(this.id)"/>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderStyle-HorizontalAlign="Left" HeaderText="Template Type">
<ItemTemplate>
<asp:Label ID="lbltempType" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"tempType") %>' />
</ItemTemplate>
<HeaderStyle HorizontalAlign="Left" />
</asp:TemplateField>
</Columns>
<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>
If you can use jquery it would be like this
$('.lBtTempClass').mouseover(function() {
/// Do your code
});
you should add a css class to link button
<asp:LinkButton ID="lBtTempID" CssClass="lBtTempClass" runat="server" >