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 %>" ...
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
GridView paging in modalpopupextender issue
:
I have a GridView in modalpopupextender...but the thing is Paging is not working inside it....
My HTML code is:
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:gridview runat="server" id="GridView2" showfooter="true"
autogeneratecolumns="false" GridLines="None" CssClass="table"
HeaderStyle-CssClass="th" RowStyle-CssClass="td" Width="100%"
OnRowCreated="GridView2_RowCreated" >
<columns>
<asp:TemplateField HeaderText="Date" >
<ItemTemplate>
<asp:LinkButton ID="Date" runat="server" CausesValidation="false" CommandName="Date_Select" Text='<%#Eval("Date","{0:yyyy-MM-dd}") %>' onclick="Date1_Click" EnableTheming="False"></asp:LinkButton>
</ItemTemplate>
<EditItemTemplate>
</EditItemTemplate>
</asp:TemplateField>
<asp:boundfield datafield="" headertext="Total" footerstyle-font-bold="true"
footertext="Grand Total:" >
<FooterStyle Font-Bold="True"></FooterStyle>
</asp:boundfield>
<asp:boundfield datafield="MIns" headertext="Mins"
footerstyle-font-bold="true" >
<FooterStyle Font-Bold="True"></FooterStyle>
</asp:boundfield>
<asp:boundfield datafield="Amount" headertext="Amount" footerstyle-font-bold="true"
>
<FooterStyle Font-Bold="True"></FooterStyle>
</asp:boundfield>
<asp:boundfield datafield="Profit" headertext="Profit"
footerstyle-font-bold="true">
<FooterStyle Font-Bold="True"></FooterStyle>
</asp:boundfield>
</columns>
<HeaderStyle BackColor="#CEFF99" ForeColor="Black" BorderColor="#C1FF80" BorderStyle="Solid"
BorderWidth="1px"></HeaderStyle>
<RowStyle CssClass="td"></RowStyle>
</asp:gridview>
<asp:Button runat="server" ID="btnModalPopUp1"
style="display:none"/>
<AjaxToolkit:ModalPopupExtender ID="modalPopUpExtender2"
runat="server"
TargetControlID="btnModalPopUp1"
PopupControlID="pnlPopUp1"
BackgroundCssClass="modalBackground" CancelControlID="btnCancel1" X="570" Y="10"
>
</AjaxToolkit:ModalPopupExtender>
<asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="UpdatePanel2">
<ProgressTemplate>
<div class="modal">
<div class="center" align="center">
This can take a while. Please be patient...
<img alt="" src="Images/loader.gif" />
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:Panel runat="Server" ID="pnlPopUp1" CssClass="modalPopup">
<asp:Button runat="server" ID="btnCancel1"
Text="Close"/>
<asp:gridview runat="server" id="GridView18" showfooter="true"
autogeneratecolumns="false" GridLines="None" CssClass="table"
HeaderStyle-CssClass="th" RowStyle-CssClass="td" Width="100%"
AllowPaging="True" OnPageIndexChanging="OnPageIndexChanging" PageSize="10"
EnableSortingAndPagingCallbacks="True" >
<columns>
<asp:boundfield datafield="Customer" headertext="Customer"
footerstyle-font-bold="true" >
<FooterStyle Font-Bold="True"></FooterStyle>
</asp:boundfield>
<asp:boundfield datafield="MIns" headertext="Mins" footerstyle-font-bold="true" >
<FooterStyle Font-Bold="True"></FooterStyle>
</asp:boundfield>
<asp:boundfield datafield="Amount" headertext="Amount"
footerstyle-font-bold="true" >
<FooterStyle Font-Bold="True"></FooterStyle>
</asp:boundfield>
<asp:boundfield datafield="Profit" headertext="Profit" footerstyle-font-bold="true"
>
<FooterStyle Font-Bold="True"></FooterStyle>
</asp:boundfield>
</columns>
<HeaderStyle BackColor="#CEFF99" ForeColor="Black" BorderColor="#C1FF80" BorderStyle="Solid"
BorderWidth="1px"></HeaderStyle>
<RowStyle CssClass="td"></RowStyle>
</asp:gridview>
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID = "GridView18" EventName="PageIndexChanging" />
</Triggers>
</asp:UpdatePanel>
This is my Code Behind for Paging:
protected void OnPageIndexChanging(object sender, GridViewPageEventArgs e)
{
GridView18.DataSource = ds;
GridView18.PageIndex = e.NewPageIndex;
GridView18.DataBind();
modalPopUpExtender2.Show();
}
Any help is highly appreciated ...Thanks in advance...
First: if you go to MSDN concerning UpdatePanels and scroll down to the section:
Controls that Are Not Compatible with UpdatePanel Controls
You find this:
GridView and DetailsView controls when their EnableSortingAndPagingCallbacks property is set to true.
Paging a Gridview requires a Postback. Typically when you use any kind of modal/popup control it uses JS to activate. But a postback is going eliminate the popup...so...
The main thing is you need to be able to maintain the popup state between postbacks. There are a couple of ways to handle this.
Easiest is to eliminate the paging and use scrolling, assuming the total number of items is a manageable list. If the list is too long chances are that it's also too much information for a user anyway and should be filtered to a manageable list.
If you must use paging, you need to use a popup control that can withstand postbacks, which may mean using an <iframe>. I don't know enough about the AjaxControlToolkit to say if it can be done that way.
Personally, when I needed to do what you are trying to do via popup, I use Colorbox. But this also requires jquery.
I move the gridview to a standalone page and configure Colorbox to open the page in an iframe. This way the iframe manages the paging postbacks.
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;
}
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 am trying to bind my grid to table adapter data, this is what i do :
DataSourceDepartement dpt = new DataSourceDepartement();
DataSourceDepartementTableAdapters.departementTableAdapter
adapter = new DataSourceDepartementTableAdapters.departementTableAdapter();
gridDepartement.DataSource = adapter.GetDataDepartement();
gridDepartement.DataBind();
aspx file :
<asp:GridView ID="gridDepartement" runat="server" CellPadding="4" ForeColor="Black"
GridLines="Horizontal" AutoGenerateColumns="False" BackColor="White"
BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" AllowSorting="true">
<Columns>
<asp:TemplateField ItemStyle-Width="20px">
<ItemTemplate>
<asp:CheckBox Id="cbSelect" runat="server"/>
</ItemTemplate>
</asp:TemplateField>
<asp:CommandField ShowEditButton="True" ItemStyle-Width="20px" />
<asp:CommandField ShowDeleteButton="True" ItemStyle-Width="20px" />
<asp:TemplateField HeaderText="Departement Code">
<ItemTemplate>
<asp:label runat="server" ID="departementcode" ></asp:label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<FooterStyle BackColor="#CCCC99" ForeColor="Black" />
<HeaderStyle BackColor="#333333" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="White" ForeColor="Black" HorizontalAlign="Right" />
<SelectedRowStyle BackColor="#CC3333" Font-Bold="True" ForeColor="White" />
</asp:GridView>
but somehow, my gridview does not show its data, what i miss?
You need to use the RowDataBound event, access the controls for the row in the GridView and then set the values:
SO post
Also make sure no exceptions are being thrown!