I'm building a GridView control which encapsulates a child gridview. The child gridview holds a div tag which is displayed when the user selects a row in the parent gridview. However, even though the contents is hidden i.e. the div tag, an extra column is added - how do I get rid of the extra column. In the tutorial it states that by adding a </td></td> and starting a new row <tr> this should happen but it does (I also noticed that the author turned off gridlines so my assumption is that he in fact has this problem also). Here is the gridview, oh and I set the visible state of the itemtemplate to 'true' but then the javascript could (not) find it.
<asp:GridView ID="GridView1" runat="server" AllowPaging="True" AllowSorting="True"
AutoGenerateColumns="False" DataKeyNames="PublicationID"
DataSourceID="ObjectDataSource1" Width="467px" OnRowDataBound="GridView1_RowDataBound"
Font-Names="Verdana" Font-Size="Small">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="PublicationSelector" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="NameAbbrev" HeaderText="Publication Name" SortExpression="NameAbbrev" />
<asp:BoundField DataField="City" HeaderText="City" SortExpression="City" />
<asp:BoundField DataField="State" HeaderText="State" SortExpression="State" />
<asp:TemplateField HeaderText="Owners">
<ItemTemplate>
<asp:Label ID="Owners" runat="server"></asp:Label>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
<asp:BoundField DataField="Type" HeaderText="Type" SortExpression="Type" />
<asp:TemplateField>
<ItemTemplate >
</td></tr>
<tr>
<td colspan="7">
<div id="<%# Eval("PublicationID") %>" style="display: none; position: relative">
<asp:GridView ID="GridView2_ABPubs" runat="server" AutoGenerateColumns="false" Width="100%"
Font-Names="Verdana" Font-Size="small">
<Columns>
<asp:BoundField DataField="NameAbbrev" HeaderText="Publication Name" SortExpression="NameAbbrev" />
</Columns>
</asp:GridView>
</div>
</td>
</tr>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Apart from the extra column in the master gridview it works fine.
Just for completeness, here is a to the original article (for some reason it didn't like my <a href> tag so it's copy and paste).
To get rid of the extra column, just set its css style to display: none. You can do this by applying a CssClass to the TemplateField containing the nested grid:
<asp:TemplateField HeaderStyle-CssClass="hidden-column" ItemStyle-CssClass="hidden-column" FooterStyle-CssClass="hidden-column">
Here is the definition of the CssClass I used:
<style type="text/css">
.hidden-column {
display: none;
}
</style>
Note: the markup will still be in the html but at least it won't be visible.
Tested under IE 8.0, Google Chrome 2.0 and Opera 10.0
Update: To eliminate the double border, just put the id and the style on the <tr> instead of the <div>:
<tr id="<%# Eval("PublicationID") %>" style="display: none; position: relative">
<td colspan="7">
<div>
...
... and change the display in the javascript from block to table-row:
div.style.display = "table-row"; // not a div anymore!!
Looks like you have unbalanced tags in your <ItemTemplate>:
<ItemTemplate >
</td></tr> <<---- These look unbalanced
<tr>
<td colspan="7">
<div id="<%# Eval("PublicationID") %>" style="display: none; position: relative">
<asp:GridView ID="GridView2_ABPubs" runat="server" AutoGenerateColumns="false" Width="100%"
Font-Names="Verdana" Font-Size="small">
<Columns>
<asp:BoundField DataField="NameAbbrev" HeaderText="Publication Name" SortExpression="NameAbbrev" />
</Columns>
</asp:GridView>
</div>
</td>
</tr>
</ItemTemplate>
I don't see an opening tag for these tr, td tags:
...
<ItemTemplate >
</td></tr>
...
Just checked and the author of the article seems to have the same issue in the generated source of the page.
Related
I have the following code:
<asp:GridView ID="gvMaster" runat="server" AutoGenerateColumns="False" DataKeyNames="subjectid" OnRowDataBound="gvMaster_RowDataBound">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<img id="imagesubjectid-<%# Eval("subjectid") %>" alt="Click to show/hide orders" src="plus.png" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="strategicid" HeaderText="strategicid" HeaderStyle-CssClass="hideGridColumn" ItemStyle-CssClass="hideGridColumn" />
<asp:BoundField DataField="subject" HeaderText="Subject" />
<asp:TemplateField>
<ItemTemplate>
<tr>
<td colspan="100%">
<div id="subjectid-<%# Eval("subjectid") %>" style="display: none; position: relative; left: 5px;">
<asp:GridView ID="nestedGridView" runat="server" AutoGenerateColumns="False" DataKeyNames="areaid" ClientIDMode="Static">
<Columns>
<asp:BoundField DataField="area" HeaderText="Area" />
<asp:BoundField DataField="areaid" HeaderText="areaid" />
<asp:CommandField ShowSelectButton="true" ButtonType="Button" SelectText="Detail" />
</Columns>
</asp:GridView>
</div>
</td>
</tr>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
I want to access the nestedGridView selectedindexchanged. I provide a commandfield to access the selected row. How can I do that?
Normally, I do normal thing with gridview. This is the first time I am using nestedgridview.
In the designer go into the parent GridView’s "Edit Template" then select the nested GridView and click on the events (Lightning) in properties go into the "selected index changed" textbox and hit enter.
This will add
OnSelectedIndexChanged="nestedGridView_SelectedIndexChanged" to the nested GridView and the event method protected void nestedGridView_SelectedIndexChanged(object sender, EventArgs e) to the code, which you could also do manually.
I have below GridView with radio button as column. I want to hide or display panel based on GridView row selection that will be rendering outside of GridView in same page.
Below is my GridView:
<table style="width: 95%; margin-top: 10px;" class="transferCertsTbl">
<tr style="width: 95%">
<td colspan="2">
<asp:GridView ID="gvClearpassCertInfo" runat="server" AutoGenerateColumns="False" GridLines="None"
CellSpacing="1" CellPadding="1"
Width="95%" BorderWidth="0"
AllowSorting="True"
PageSize="30"
OnRowDataBound="gvClearpassCertInfo_RowDataBound"
CssClass="data responsive">
<Columns>
<asp:TemplateField HeaderText="Select" SortExpression="">
<ItemTemplate>
<asp:RadioButton ID="radioChkCert" runat="server" onclick="RadioCheck(this);" /><input type="hidden" id="hdnCertId" runat="server" value='<%# DataBinder.Eval(Container.DataItem, "CertId") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="CertificateID" HeaderText="Certificate ID" HeaderStyle-HorizontalAlign="Center" />
<asp:BoundField DataField="partID" HeaderText="Part Number" HeaderStyle-HorizontalAlign="Center"/>
<asp:BoundField DataField="BaseLicense" HeaderText="Base License" Visible="false" />
</Columns>
<EmptyDataRowStyle CssClass="AlternatingRowStyle" />
<HeaderStyle CssClass="HeaderStyle" HorizontalAlign="Center" />
<RowStyle HorizontalAlign="Center" />
<AlternatingRowStyle HorizontalAlign="Center" />
<PagerSettings Visible="False" />
</asp:GridView>
</td>
</tr>
</table>
But I am not sure how to display or hide based on row selection in GridView on server side only.
Could any one please help on this that would be very grateful to me?
You can do the following:
For the radio button tag add autopostback=true and OnCheckedChanged="radioChkCert_CheckedChanged" like this:
<asp:RadioButton ID="radioChkCert" runat="server" onclick="RadioCheck(this);" autopostback="true" OnCheckedChanged="radioChkCert_CheckedChanged"/>
in the codebehind add the function:
protected void radioChkCert_CheckedChanged(object sender, EventArgs e)
{
radiobutton radiobtn = (radiobutton)sender;
string txt = (((Label)radiobtn.Parent.FindControl("l1")).Text); //l1 is the id of a label in the gridview
if ((txt == "CertainCode")) {
Certainpanel.Visible = true;
}
}
Note:
I used the label's text to control which panel to show, in your case choose it depending on which control and it's value.
I converted from vb.net to C# tell me if there is an error
I have a gridview which is bounded as
<asp:GridView
runat="server"
ID="gvShipDetails"
AutoGenerateColumns="false"
OnRowDataBound="gvShipDetails_RowDataBound">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
Ship name
<br />
<asp:TextBox class="search_textbox" runat="server" BorderStyle="None" Width="100%">
</asp:TextBox>
</HeaderTemplate>
<ItemTemplate>
<%#Eval("VesselName")%>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
The problem is the finally rendered html table td is rendered as
<td> sample vessel name </td>
A lot of spaces inside td.How is this possible.
If I replace this bound code as
<asp:BoundField HeaderText="vessel name" DataField="vesselname" />
Then html is renderd as <td>sample vessel name<td>
Why is it so? I wanted to use headertemplate and i wanted to avoid these trailing spaces. How to do it
Any help will be appreciated
As Naveen suggested Doing
<ItemTemplate><%#Eval("VesselName")%></ItemTemplate>
Solved my issue and the reason for this is unknown for me
I have a gridview that has a textbox in one of cells in my aspx file.
After clicking the edit link in the row, I am able to get the control programatically in the rowdatabound event with this:
e.Row.FindControl("controlPlaceholder");
Using the edit index from the edit event works as well.
However, the control is only enabled on the first page of the gridview. On any other page, FindControl() returns null.
What could be the reason for this? Are there any potential solutions to this issue? I've looked for a solution but haven't had any luck with finding someone who has this particular problem.
Markup:
<asp:Panel ID="pnlAccountAssignment" runat="server" CssClass="clsDataPanel" meta:resourcekey="pnlAccountAssignmentResource1">
<asp:GridView ID="gvAccountAssignment" runat="server" AutoGenerateColumns="False"
AllowPaging="true" PageSize="25" OnRowDataBound="gvAccountAssignment_RowDataBound"
OnRowCancelingEdit="gvAccountAssignment_RowCancelingEdit" OnRowEditing="gvAccountAssignment_RowEditing"
OnRowUpdating="gvAccountAssignment_RowUpdating" OnPageIndexChanging="gvAccountAssignment_PageIndexChanging"
OnSorting="gvAccountAssignment_Sorting" AllowSorting="True" meta:resourcekey="gvAccountAssignmentResource1">
<RowStyle BackColor="White" ForeColor="Black" />
<HeaderStyle CssClass="clsGrayBkgCell" HorizontalAlign="Center" VerticalAlign="Bottom" />
<Columns>
...Other Columns...
<asp:TemplateField meta:resourcekey="TemplateFieldResource8">
<ItemStyle CssClass="clsNumber" HorizontalAlign="Left" VerticalAlign="Top" />
<EditItemTemplate>
<asp:TextBox ID="column13PlaceHolder" runat="server" CssClass="clsNormalLabel">
</asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="lblprevMonth" runat="server" CssClass="clsNormalLabel"></asp:Label>
</ItemTemplate>
<HeaderTemplate>
<asp:LinkButton runat="server" ID="hypSortGLBal" OnClick="hypSortGLBal_Click"></asp:LinkButton>
</HeaderTemplate>
</asp:TemplateField>
...Other Columns...
</Columns>
<PagerStyle HorizontalAlign="Center" VerticalAlign="Middle" />
</asp:GridView>
<asp:HiddenField ID="hdnPrepPopulated" runat="server" />
</asp:Panel>
I have a RadGrid to display subscribers list and a repeater control with two fields. Repeater is placed inside template column of grid when I click on export to csv button of grid then other column of grid are export but template column with repeater not.Could anyone please help me?
<telerik:GridTemplateColumn HeaderText="Email Address/Verified Status" DataField="SubscriberEmailAddress"
Groupable="false" AllowFiltering="false" UniqueName="SubscriberEmailAddress">
<ItemTemplate>
<asp:Repeater ID="EmailAddressRepeater" runat="server">
<ItemTemplate>
<table style="width: 100%">
<tr>
<td style="width: 80%;">
<asp:Label ID="EmailAddressLabel" runat="server" Text='<%#Eval("News_Subscriber_Email_Map_Email_Address") %>' />
</td>
<td>
<asp:CheckBox ID="EmailAddressVerifiedCheckBox1" runat="server" Checked='<%# Convert.ToBoolean(Eval("News_Subscriber_Log_Verified_Status").ToString())%>' />
</td>
</tr>
</table>
</ItemTemplate>
</asp:Repeater>
</ItemTemplate>
<ItemStyle HorizontalAlign="Left" VerticalAlign="Top" Wrap="false" Width="20%" />
<HeaderStyle VerticalAlign="Top" HorizontalAlign="Left" Wrap="false" Width="20%" />
</telerik:GridTemplateColumn>
CSV is text-Based format it doesn't support complex structures like tables.