I have a Gridview that has a 3 columns , one of them(ObjectiveID) is invisible using the CSS:
<style type="text/css">
.hidden {
display: none;
}
</style>
But, when i use this style, i got misplaced columns headers as shown in the picture below :
My Aspx code:
<div class="form-group col-md-8">
<asp:GridView runat="server" ID="grdPlanObjectivesStandardWeights" AutoGenerateColumns="False"
CssClass="table table-hover table-bordered table-responsive table-striped"
HeaderStyle-CssClass="tableHeader"
DataKeyNames="ObjectiveID"
EmptyDataText="<%$Resources:DCAACommon, NoDataMessage%>"
EmptyDataRowStyle-CssClass="alert alert-warning"
EmptyDataRowStyle-HorizontalAlign="Center">
<Columns>
<asp:BoundField DataField="ObjectiveID">
<ItemStyle CssClass="hidden" />
</asp:BoundField>
<asp:BoundField DataField="Name" HeaderText="<%$ Resources:DCAAStrategicManagement, Initiative_ObjectiveName %>" />
<asp:TemplateField HeaderText="<%$ Resources:DCAAStrategicManagement, obj_lblStandardWeight %>" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:TextBox runat="server" ID="txtStandardWeight" onkeypress="return onlyNumbers();" Text='<%# Eval("StandardWeight") %>'></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<PagerStyle CssClass="pagination-gridView" />
<PagerSettings Mode="NumericFirstLast" FirstPageText="First" LastPageText="Last" />
</asp:GridView>
</div>
Note: i need to keep the ObjectiveID invisible, and i must not use Visible="False" to the BoundField.
Any help would be appreaciate.
You are hiding a <td> item, not it's content. This will lead to weird behaviour.
A solution is to change the BoundField to a TemplateField. You'll have more control that way.
<asp:GridView ID="GridView1" runat="server">
<Columns>
<asp:TemplateField ItemStyle-CssClass="hidden">
<ItemTemplate>
<span><%# Eval("ObjectiveID") %></span>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<style type="text/css">
.hidden span {
display: none;
}
</style>
I was trying to hide only the items , all i needed is to also hide the Header.
So, i have changed this :
<asp:BoundField DataField="ObjectiveID">
<ItemStyle CssClass="hidden" />
</asp:BoundField>
To this:
<asp:BoundField DataField="ObjectiveID" ItemStyle-CssClass="hidden" HeaderStyle-CssClass="hidden"/>
And it worked just fine.
Related
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?
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 trying to open a ModalPopup on GridView LinkButton, but when I am giving LinkButton ID to targetcontrolid of pop up, it is not accepting.
Please help me.
<asp:GridView ID="grdView" runat="server" AutoGenerateColumns="False" CellPadding="0"
ForeColor="#333333" GridLines="None" onrowdatabound="grdView_RowDataBound">
<Columns>
<asp:TemplateField HeaderText="Dr. Photo">
<ItemTemplate>
<asp:Image ID="Image1" runat="server" Style="height: 80px; width: 100px;" ImageUrl='<%# String.Format("~/Upload/Docters/" + Eval("ImgName")) %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150px" >
<ItemStyle Width="150px"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="Qualification" HeaderText="Qualification"
ItemStyle-Width="50px" >
<ItemStyle Width="50px"></ItemStyle>
</asp:BoundField>
<asp:TemplateField HeaderText="Click to Contact">
<ItemTemplate>
<asp:LinkButton ID="popup" runat="server" Text="Click to Contact"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<ajaxToolKit:ModalPopupExtender id="ModalPopupExtender1" runat="server"
cancelcontrolid="btncancel" okcontrolid="btnSend"
targetcontrolid="Button1" popupcontrolid="Panel1"
popupdraghandlecontrolid="PopupHeader" drag="true" backgroundcssclass="ModalPopupBG">
</ajaxToolKit:ModalPopupExtender
I am placing my code It will work
<asp:GridView ID="gvproducts" runat="server" DataKeyNames="sno," AutoGenerateColumns="false"
OnRowCommand="gvproducts_RowCommand" OnPageIndexChanging="gvproducts_PageIndexChanging"
AllowPaging="true" PageSize="10" EmptyDataText="No Record Found" Width="100%"
BorderColor="#BDBDBD" HeaderStyle-BackColor="#7779AF" HeaderStyle-ForeColor="White" >
<Columns>
<asp:TemplateField HeaderText="SNo" FooterStyle-HorizontalAlign="Center">
<ItemTemplate>
<span>
<%#Container.DataItemIndex + 1%>
</span>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="indentid" HeaderText="Indent ID"></asp:BoundField>
<asp:BoundField DataField="productid" HeaderText="Product ID" ></asp:BoundField>
asp:BoundField DataField="productname" HeaderText="Product Name" ></asp:BoundField>
<asp:BoundField DataField="quantity" HeaderText="Quantity" ></asp:BoundField>
<asp:BoundField DataField="unit" HeaderText="Unit" ></asp:BoundField>
asp:BoundField DataField="requestby" HeaderText="Request By"></asp:BoundField>
<asp:TemplateField HeaderText="Purchase" ItemStyle-HorizontalAlign="Center">
ItemTemplate>
<asp:LinkButton ID="lnkPurchase" runat="server" CommandName="Purchase" CommandArgument="<%#Container.DataItemIndex%>"
ext="Purchase" ForeColor="blue">
</asp:LinkButton>
</ItemTemplate>
/asp:TemplateField>
</Columns>
</asp:GridView>
//Modal Popup
<input id="Hid_Sno" type="hidden" name="hddclick" runat="server" />
<ajaxToolkit:ModalPopupExtender ID="MPEPurchase" runat="server" TargetControlID="Hid_Sno"
PopupControlID="pnlpurchase" RepositionMode="RepositionOnWindowResizeAndScroll"
BackgroundCssClass="modalBackground" CancelControlID="btnxcancel" PopupDragHandleControlID="pnlpurchase" />
.CS
protected void gvproducts_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName.ToUpper() == "PURCHASE")
{
MPEPurchase.Show();
}
}
You have to use GridView's RowDataBound Event for this as "any control inside the grid is not directly accessible". so you need to find the control in gridview's rowdatabound and then set "targetcontrolid" of Ajaxmodalpopup extender.
I think the simplest solution to this problem is to see the generated HTML output of the webpage and find out the exact rendered id of the Button control.
Once that is found simply replace the id in the following code with the generated id.
<ajaxToolKit:ModalPopupExtender id="ModalPopupExtender1" runat="server"
cancelcontrolid="btncancel" okcontrolid="btnSend"
targetcontrolid="Button1" popupcontrolid="Panel1"
popupdraghandlecontrolid="PopupHeader" drag="true" backgroundcssclass="ModalPopupBG">
Most of the time the asp.net engine replaces the control id with its own ids. So your
targetcontrolid ="Button1" may not be firing.
Another way to resolve this issue is by replacing the code as follows:
Replace the following with:
targetcontrolid ="Button1"
this
targetcontrolid ='<%=Button1.ClientID%>'
I have the following grid:
<asp:GridView ID="myGrid"
AutoGenerateColumns="true"
runat="server" CellPadding="4" ForeColor="#333333" GridLines="None" Width="100%">
<AlternatingRowStyle CssClass="rowEven" />
<HeaderStyle CssClass="rowHead" />
<RowStyle CssClass="row" />
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" data-flag="false" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
and its generating
<span data-flag="false"><input id="ctl00_PlaceHolderMain_myGrid_ctl02_CheckBox1" type="checkbox" name="ctl00$PlaceHolderMain$myGrid$ctl02$CheckBox1" /></span>
I want the data flag inside the checkbox. not as an span
Possible and simple workaround is to use the simple html checkbox with a runat="server"
<ItemTemplate>
<input id="Checkbox1" runat="server" type="checkbox" data-flag="false" />
</ItemTemplate>
I think you should use Checked="false" instead of data-flag.
I have grid named 'GridView1' and displaying columns like this
<asp:GridView ID="GridView1" OnRowCommand="ScheduleGridView_RowCommand"
runat="server" AutoGenerateColumns="False" Height="60px"
Style="text-align: center" Width="869px" EnableViewState="False">
<Columns>
<asp:BoundField HeaderText="Topic" DataField="Topic" />
<asp:BoundField DataField="Moderator" HeaderText="Moderator" />
<asp:BoundField DataField="Expert" HeaderText="Expert" />
<asp:BoundField DataField="StartTime" HeaderText="Start" >
<HeaderStyle Width="175px" />
</asp:BoundField>
<asp:BoundField DataField="EndTime" HeaderText="End" >
<HeaderStyle Width="175px" />
</asp:BoundField>
<asp:TemplateField HeaderText="Join" ShowHeader="False">
<ItemTemplate>
<asp:Button ID="JoinBT" runat="server" CommandArgument="<%# Container.DataItemIndex %>" CommandName="Join" Text="Join" Width="52px" />
</ItemTemplate>
<HeaderStyle Height="15px" />
</asp:TemplateField>
</Columns>
</asp:GridView>
Here what is my requirement is whenever we right click on each row in gridview ,it should display three option join meeting(if we click it will go to
meeting.aspx),,view details(will go to detail.aspx),,Subscribe(subscribe.aspx) just like when we click right any where we can see view,sortby,refresh
like that..Do we need to implement javascript here