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;
}
Related
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
Works fine in google chrome and firefox but GRIDVIEW is not appearing in IE11.
No errors in console, viewed source and it just isnt there??
Had a look online and couldnt find much someone suggested adding in GridLines="None" but that didnt have any effect....Any ideas please?
<asp:GridView ID="GridView1" runat="server"
AutoGenerateColumns="false" Width="100%" ViewStateMode="Enabled"
BorderWidth="1px" BackColor="White" CellPadding="3" BorderStyle="None"
BorderColor="#CCCCCC" Font-Names="Arial" GridLines="None">
<FooterStyle ForeColor="#000066" BackColor="White"></FooterStyle>
<PagerStyle ForeColor="#000066" HorizontalAlign="Left"
BackColor="White"></PagerStyle>
<HeaderStyle ForeColor="White" Font-Bold="True"
BackColor="#1e4964"></HeaderStyle>
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="SelectedCheckBox" runat="server" />
</ItemTemplate>
<HeaderTemplate>
<asp:CheckBox ID="CheckHeader" OnCheckedChanged="CheckHeader_OnCheckedChanged" AutoPostBack="true" runat="server" />
</HeaderTemplate>
</asp:TemplateField>
<asp:BoundField HeaderText="File" DataField="File">
<ItemStyle HorizontalAlign="Center"></ItemStyle>
</asp:BoundField>
<asp:BoundField HeaderText="Date Added" DataField="DateAdded" DataFormatString="{0:d}">
<ItemStyle HorizontalAlign="Center"></ItemStyle>
</asp:BoundField>
<asp:TemplateField>
<ItemTemplate>
<a href="<%# ResolveUrl((string)Eval("LargePictureURL"))%>" onclick="magnificPopup('GridView1')">
<img alt="" src='<%# ResolveUrl((string)Eval("PictureURL"))%>' style="max-height: 20px; max-width: 30px; text-align: center" />
</a>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField HeaderText="ID" DataField="ID" Visible="true">
<ItemStyle HorizontalAlign="Center"></ItemStyle>
</asp:BoundField>
</Columns>
<SelectedRowStyle ForeColor="White" Font-Bold="True"
BackColor="#669999"></SelectedRowStyle>
<RowStyle ForeColor="#000066"></RowStyle>
</asp:GridView>
UPDATE
The gridview is populated with
// Update the images displayed on the gridview
GridView1.DataSource = GetData(false);
GridView1.DataBind();
upViewUploadImages.Update();
Same process shows images for FIREFOX and GOOGLE but not on IE.
The problem is that you don't have set the data source on your grid view - DataSourceID not exist at all.
To display some data your on grid view you need to tell him what that data are.
So I will confuse at first because I believe the the IE11 was the problem but after your comments I realize that you do not have set any data to show !
Eg: You must have something like (if you do not use code behind data binder)
<asp:GridView DataSourceID="ThisPageSql" runat="server" ...
<asp:SqlDataSource ID="ThisPageSql" runat="server"
ConnectionString="<%$ ConnectionStrings:DbCoonect %>" ...
I have a GridView with one nested GridView as follows:
<asp:GridView ID="gvEmpNew" runat="server" AutoGenerateColumns="false" BackColor="White"
BorderColor="#E9ECEF" BorderStyle="None" BorderWidth="1px" CellPadding="4" ForeColor="Black" ShowFooter="true"
GridLines="None" EmptyDataText="There are no data records to display." OnRowDataBound="gvEduTrainingExp_RowDataBound"
Width="970px">
<Columns>
<asp:TemplateField ItemStyle-CssClass="gridViewCellCenter" HeaderStyle-CssClass="headerStyle" >
<ItemTemplate>
<a href="javascript:expandcollapse('div<%# Eval("empid") %>', 'two');">
<img id="imgdiv<%# Eval("empid") %>" alt="Click to show/hide Details for Education Information <%# Eval("empid") %>"
width="15px" border="0" src="../images/plus.gif" title="Education" />
</a>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-CssClass="gridViewCellCenter" HeaderStyle-CssClass="headerStyle" >
<ItemTemplate>
<div></div>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<tr>
<td colspan="100%">
<div id="div<%# Eval("empid") %>" style="display:none; position: relative;
left: 10px; width: 100%">
<asp:GridView ID="GridViewChildEducation" runat="server" AutoGenerateColumns="False"
BackColor="White" BorderColor="#E9ECEF" BorderStyle="None" BorderWidth="1px"
CellPadding="4" ForeColor="Black" GridLines="None" EmptyDataText="">
<Columns>
<asp:TemplateField HeaderText="EXAM TITLE">
<ItemTemplate>
<asp:Label ID="lblEXAM_TITLE" runat="server" Text='<%# Eval("EXAM_TITLE") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="EDUCATION LEVE LNAME" >
<ItemTemplate>
<asp:Label ID="lblEDUCATIONLEVELNAMEChild" runat="server" Text='<%# Eval("EDUCATIONLEVELNAME") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<HeaderStyle CssClass="headerStyle" />
<RowStyle CssClass="rowStyle" />
<AlternatingRowStyle CssClass="alternatingRowStyle" />
</asp:GridView>
</Columns>
<HeaderStyle CssClass="headerStyle" />
<RowStyle CssClass="rowStyle" />
<AlternatingRowStyle CssClass="alternatingRowStyle" />
</asp:GridView>
I want to hide one of the GridView named GridViewChildEducation. I tried this code:
GridViewChildEducation.Columns[1].Visible = false;
It shows me that the name GridViewChildEducation does not exist in the current context. I need a way to hide or show any column of this 'GridViewChildEducation' GridView
Couldn't you use:
GridViewChildEducation.Style.Visibility="hidden";
GridViewChildEducation.Style.Display="none";
or crease a CSS class for hidden and one for visible, and go that route.
I'm a little confused, though - are you only trying to hide one column, or the whole view?
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 "**
I just can't figure out what I'm doing wrong. I want checkboxes in the first column display in one direct line under my header with checkbox. Code sample:
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
GridLines="None" AllowSorting="True"
AllowPaging="True" PageSize="20" Width="100%" >
<HeaderStyle HorizontalAlign="Left" Wrap="False" />
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<input ID="SelectAllEvs" runat="server" type="checkbox" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="EventSelector" runat="server" />
</ItemTemplate>
<ItemStyle HorizontalAlign="Left" />
</asp:TemplateField>
<asp:BoundField DataField="EventDate"
...
<ItemStyle Wrap="False" />
</asp:BoundField>
<asp:BoundField DataField="Subject"
...
</asp:BoundField>
<asp:BoundField DataField="Body"
...
</asp:BoundField>
</Columns>
</asp:GridView>
And image sample of what i have in result is attached.
Thanx for any help.
Remove <ItemStyle HorizontalAlign="Left" /> for checkbox. and give a fix width to that column:
<RowStyle Width="150px"/>
Try this code :
<Columns>
<asp:TemplateField HeaderText="Checkbox">
<ItemTemplate>
<asp:CheckBox ID="EventSelector" runat="server" />
</ItemTemplate>
<ItemStyle HorizontalAlign="Left" />
</asp:TemplateField>
</Columns>