I have a Gridview. Inside I have a nested Gridview. I am using a javascript for expand collapse. My problem is that when I am trying to add an ajax hover menu extender on nested gridview, the hover is not displayed.
My code:
<script type="text/javascript">
$("[src*=plus]").live("click", function () {
$(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>")
$(this).attr("src", "../minusbutton.png");
});
$("[src*=minus]").live("click", function () {
$(this).attr("src", "../plusbutton.png");
$(this).closest("tr").next().remove();
});
</script>
<asp:GridView ID="GridViewCustomers" runat="server" AllowPaging="True"
AutoGenerateColumns="False" DataKeyNames="CustomerID">
<Columns>
<asp:TemplateField HeaderText="CustomerID" InsertVisible="False"
SortExpression="lblCustomerID" Visible="False">
<ItemTemplate>
<asp:Label ID="lblCustomerID" runat="server"
Text='<%# Bind("CustomerID") %>'>
</asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name"
SortExpression="Name" >
<ItemTemplate>
<asp:Label ID="Name" runat="server" Text='<%# Bind("Name") %>'>
</asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<img alt = "" style="cursor: pointer" src="../plusbutton.png" />
<asp:Panel ID="pnlCustomersDetails" runat="server" Style="display: none">
<asp:GridView ID="mynestedGridView" runat="server"
AutoGenerateColumns="False"
DataKeyNames="DetailsID">
<Columns>
<asp:TemplateField Visible="false" HeaderText="DetailsID">
<ItemTemplate>
<asp:Label ID="lblDetailsID" runat="server" Text='<%# Bind("DetailsID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Details>
<ItemTemplate>
<asp:Label ID="lblDetails" runat="server" Text='<%# Bind("Details") %>'></asp:Label>
<br />
<asp:HoverMenuExtender ID="HoverMenuExtender1" runat="server" TargetControlID="lblDetails" PopupControlID="Panel2" PopupPosition="Center" OffsetX="0" OffsetY="0" PopDelay="50">
</asp:HoverMenuExtender>
<asp:Panel ID="Panel2" runat="server">
<asp:Button ID="Button1" runat="server" Text="Button"></asp:Button>
</asp:Panel>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</asp:Panel>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
What does the code behind look like?
I found this tutorial extremely helpful when working on nested gridview elements:
http://www.aspsnippets.com/Articles/ASPNet-Nested-GridViews-GridView-inside-GridView-with-Expand-and-Collapse-feature.aspx
Related
I have the following UI design for a nested GridView. According to that I want a solution for exporting a nested Gridview into Excel.
Nested GridView
<asp:GridView ID="Mastergrid" PageSize="20" AllowPaging="true" Width="100%" Height="100%" OnPageIndexChanging="Mastergrid_PageIndexChanging" runat="server" AutoGenerateColumns="false" CssClass="gridview" DataKeyNames="r_id" OnRowDataBound="Mastergrid_RowDataBound" ShowHeaderWhenEmpty="true">
<Columns>
<asp:TemplateField HeaderText="id" Visible="false">
<ItemTemplate>
<asp:Label ID="lblr_id" runat="server" Text='<%# Eval("r_id") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Reg. No">
<ItemTemplate>
<asp:Label ID="lblregid" runat="server" Text='<%# Eval("r_uid") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:Label ID="lblname" runat="server" Text='<%# Eval("name") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Indos No.">
<ItemTemplate>
<asp:Label ID="lblindosno" runat="server" Text='<%# Eval("indos_no") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Course Infomation">
<ItemTemplate>
<asp:GridView ID="subgrid" ShowHeader="true" runat="server" AutoGenerateColumns="false" Width="100%" Height="100%" EmptyDataText="No Record found..!!" CssClass="gridview1">
<Columns>
<asp:TemplateField HeaderText="Course id" Visible="false" HeaderStyle-Width="5%" >
<ItemTemplate>
<asp:Label ID="Course_id" runat="server" Text='<%# Eval("Course_id") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Course Name" HeaderStyle-Width="60%">
<ItemTemplate>
<asp:Label ID="lblcoursename" runat="server" Text='<%# Eval("course_name") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Course Fees" >
<ItemTemplate>
<asp:Label ID="lblcoursefees" runat="server" Text='<%# Eval("course_fees") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Course Date">
<ItemTemplate>
<asp:Label ID="lblcoursedate" runat="server" Text='<%# Eval("course_date","{0:dd-MM-yyyy}") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
You need to find the nested grid with FindControl:
protected void Mastergrid_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "exportNestedGrid")
{
//convert the CommandArgument
int rowNumber = Convert.ToInt32(e.CommandArgument);
//find the nested GridView
GridView gridview = GridView1.Rows[rowNumber].FindControl("subgrid") as GridView;
//do stuff with the nested GridView
gridview.Visible = false;
}
}
And for getting the rowNumber, you could send it along with the export button:
<asp:TemplateField>
<ItemTemplate>
<asp:Button ID="Button1" CommandArgument='<%# Container.DataItemIndex %>' CommandName="exportNestedGrid" runat="server" Text="Export nested GridView" />
</ItemTemplate>
</asp:TemplateField>
we can export Nested Gridview same as simple gridview into the excel.
i want edit and delete button on the right side of the gridview not
at left side of grid. for user friendly manipulation of gridview.
how to show buttons at right side of my grid view?
<asp:GridView ID="GvAllTasks" runat="server" AutoGenerateColumns="false"
AutoGenerateEditButton="true" AutoGenerateDeleteButton="true"
CssClass="table table-hover table-bordered"
onrowcancelingedit="GvAllTasks_RowCancelingEdit"
onrowdeleting="GvAllTasks_RowDeleting"
onrowediting="GvAllTasks_RowEditing" onrowupdating="GvAllTasks_RowUpdating" ShowHeaderWhenEmpty="True" EmptyDataText="No records Found">
you need to set AutoGenerateColumns property false and create the required columns for the grid using property within the html source of the grid in whatever order you want. The columns can be pre defined columns like CheckBoxField, ImageField etc. or templatecolumns. The following example shows creating a grid with edit and delete buttons on right for a table with name DEPT having three columns DEPTNO, DNAME and LOC.
<asp:GridView ID="GvDept" runat="server" AutoGenerateColumns="False"
ShowFooter="true"style="z-index: 1; left: 145px; top: 22px;position:
absolute; height: 191px; width: 756px;font-family: 'Arial Black';
font-size: large" EnableViewState="False">
<Columns>
<asp:TemplateField HeaderText="Deptno">
<ItemTemplate>
<asp:Label ID="LblDno" runat="server"
Text='<%# Eval("Deptno") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Dept Name">
<ItemTemplate>
<asp:Label ID="LblDname" runat="server"
Text='<%# Eval("Dname") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Location">
<ItemTemplate>
<asp:Label ID="LblLoc" runat="server"
Text='<%# Eval("Loc") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ShowHeader="false">
<ItemTemplate>
<asp:LinkButton ID="LnkEdit" runat="server" Text="Edit"
CommandName="Edit" />
<asp:LinkButton ID="LnkDelete" runat="server"
Text="Delete" CommandName="Delete" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
for adding edit and delete buttons left side of ur gridview add
<asp:CommandField ShowEditButton="True" />
<asp:CommandField ShowDeleteButton="True" />
in your columns after your template field
CssClass="table table-hover table-bordered"
onrowcancelingedit="GvAllTasks_RowCancelingEdit"
onrowdeleting="GvAllTasks_RowDeleting"
onrowediting="GvAllTasks_RowEditing" onrowupdating="GvAllTasks_RowUpdating" ShowHeaderWhenEmpty="True" EmptyDataText="No records Found">
<%-- AutoGenerateEditButton="true"--%>
<%-- AutoGenerateDeleteButton="true" --%>
<Columns>
<asp:TemplateField HeaderText="Task Id">
<ItemTemplate>
<asp:HiddenField ID="HiddTaskid" runat="server" Value='<%# Eval("task_Id") %>' />
<%#Eval("task_Id")%>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Task Name">
<ItemTemplate>
<%#Eval("task_Name")%>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Assigned To">
<ItemTemplate>
<%#Eval("task_Employee_Name")%>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Project Name">
<ItemTemplate>
<%#Eval("task_Project_Title")%>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Task Status">
<ItemTemplate>
<%#Eval("task_Status")%>
</ItemTemplate>
<EditItemTemplate>
<asp:Label ID="lbl_Status" runat="server" Text='<%#"Status : " + Eval("task_Status") %>'></asp:Label>
<asp:DropDownList ID="Gv_DdlStatus" runat="server">
<asp:ListItem Text="-Change Status-" Value="0"></asp:ListItem>
<asp:ListItem Text="Reviewed" Value="1"></asp:ListItem>
<asp:ListItem Text="InProgress" Value="1"></asp:ListItem>
<asp:ListItem Text="Completed" Value="2"></asp:ListItem>
<asp:ListItem Text="Stopped" Value="3"></asp:ListItem>
</asp:DropDownList>
<asp:HiddenField ID="hiddstatusId" runat="server" Value='<%# Eval("task_Status") %>' />
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Task Start dt">
<ItemTemplate>
<%#Eval("task_StartDate")%>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Task Completed dt">
<ItemTemplate>
<%#Eval("TaskCompletedDt")%>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtTaskCompletedDt" runat="server" Text='<%# Eval("TaskCompletedDt") %>'>
</asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Assigned By">
<ItemTemplate>
<%#Eval("AssignedBy")%>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Comments">
<ItemTemplate>
<%#Eval("comment")%>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtComments" runat="server" Text='<%# Eval("comment") %>'>
</asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<asp:CommandField ShowEditButton="True" />
<asp:CommandField ShowDeleteButton="True" />
</Columns>
</asp:GridView>
I have a gridView that I wish to add a textbox to. I want the textbox to be located in the footer, but I have no idea how to do that.
This is my gridview:
<asp:GridView ID="gvTest" runat="server" AutoGenerateColumns="false"
AllowSorting="True"
ShowFooter="True"
ShowHeaderWhenEmpty="true"
OnRowDataBound="gvTest_RowDataBound"
Width="550px">
<EmptyDataTemplate>
No data.
</EmptyDataTemplate>
<Columns>
<asp:BoundField DataField="Name" headerText="Name"/>
<asp:TemplateField>
<HeaderTemplate>
Actions
</HeaderTemplate>
<ItemTemplate>
<asp:ImageButton ID="imbView" runat="server" ToolTip="View details" ImageUrl="~/css/images/Search.png" Width="16" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
I've seen people talking about adding something like this:
<FooterTemplate>
<asp:TextBox ID="tbName" runat="server"/>
</FooterTemplate>
But I dont know where or how to add it. If I just put it in between the <asp:TemplateField>tags it messes up (probably because my boundfields).
Additional information:
I bind the gridview using DataTable. The real table has more columns, but this will suffice for an example.
Switch from:
<asp:TemplateField>
<HeaderTemplate>
Actions
</HeaderTemplate>
<ItemTemplate>
<asp:ImageButton ID="imbView" runat="server" ToolTip="View details" ImageUrl="~/css/images/Search.png" Width="16" />
</ItemTemplate>
</asp:TemplateField>
to:
<asp:TemplateField>
<HeaderTemplate>
Actions
</HeaderTemplate>
<ItemTemplate>
<asp:ImageButton ID="imbView" runat="server" ToolTip="View details" ImageUrl="~/css/images/Search.png" Width="16" />
</ItemTemplate>
<FooterTemplate>
<asp:TextBox ID="tbName" runat="server"/>
</FooterTemplate>
</asp:TemplateField>
It's easy if you understand, that you can devide your TemplateField into three sections:
Header
Item(or main content)
Footer
Greetz
You will need to put it in the template field.. like this..
<asp:TemplateField HeaderText="BankName" SortExpression="BankName">
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("BankName") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label2" runat="server" Text='<%# Bind("BankName") %>'></asp:Label>
</ItemTemplate>
<FooterTemplate>
<asp:TextBox ID="tbAddBankName" runat="server"></asp:TextBox>
</FooterTemplate>
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
</asp:TemplateField>
this is an example from my working code.
i have a grid view in the web custom control and want to select any row and so that i can edit that row. the edit button is on the master page and default.aspx is inherited from that master and know i want the row id on my defult page so that i can edit that row easily.
my web user control is
<asp:GridView runat="server" ID="grvBranches" GridLines="None"
AutoGenerateColumns="False" CellPadding="5"
OnRowDataBound="grvBranches_RowDataBound"
OnRowCancelingEdit="grvBranches_RowCancelingEdit"
OnRowEditing="grvBranches_RowEditing"
OnRowUpdating="grvBranches_RowUpdating">
<SelectedRowStyle BackColor="#d8d8d8" />
<HeaderStyle BackColor="#d8d8d8" />
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:Label Text="BranchName" ID="lblHeaderBranchName" runat="server" />
</HeaderTemplate>
<ItemTemplate>
<asp:Label Text='<%# Eval("ID") %>' ID="lblID" Visible="false" runat="server" />
<asp:Label Text='<%# Eval("Branch_Name") %>' ID="lblBranchName" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
<asp:Label Text="OrganizationName" ID="lblHeaderOrganizationName" runat="server" />
</HeaderTemplate>
<ItemTemplate>
<asp:Label Text='<%# Eval("Organization_Name") %>' ID="lblOrganizationName" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
<asp:Label Text="Address" ID="lblHeaderAddress" runat="server" />
</HeaderTemplate>
<ItemTemplate>
<asp:Label Text='<%# Eval("Address_1") %>' ID="lblAddress" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
<asp:Label Text="City" ID="lblHeaderCityName" runat="server" />
</HeaderTemplate>
<ItemTemplate>
<asp:Label Text='<%# Eval("City_Name") %>' ID="lblCityName" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField />
<asp:CommandField ShowSelectButton="True" />
</Columns>
</asp:GridView>
and i want this rowid in on my Default page
On your master page .cs, on the EditButton click event
GridView gView = ContentPlaceHolder1.FindControl("GridView1") as GridView;
// use gView.SelectedIndex to manipulate the row, edit it, etc
Assuming your main ContentPlaceHolder's ID is 'ContentPlaceHolder1'
So I have an ASP.NET grid view:
<asp:GridView ID="gvReferences" runat="server" AutoGenerateColumns="False" ShowHeader="False"
OnRowEditing="gvReferences_RowEditing"
OnRowDeleting="gvReferences_RowDeleting" onrowcreated="gvReferences_RowCreated">
<Columns>
<asp:TemplateField ItemStyle-Width="400px">
<ItemTemplate>
<asp:Label ID="lblId" Visible="false" runat="server" Text='<%# Eval("Id") %>' />
<asp:Label ID="lblAssociatedSpecies" runat="server" Text='<%# Eval("Text") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:Label ID="lblKind" runat="server" Text='<%# Eval("Kind") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:CommandField ButtonType="Button" DeleteText="delete" ShowDeleteButton="True"
ShowCancelButton="False" EditText="edit" ShowEditButton="True">
<ControlStyle Width="60px" />
</asp:CommandField>
</Columns>
</asp:GridView>
I'd like to attach some JavaScript to the Delete command button to ask for confirmation before a row is deleted.
Any ideas?
You could always use a TemplateField rather than the CommandField.
<asp:TemplateField>
<ItemTemplate>
<asp:Button name="btnDelete" commandName="Delete" OnClientClick="return confirm('Delete
this Item');" Text="Delete" runat="server" />
<asp:Button name="btnEdit" commandName="Edit" Text="Edit" runat="server" />
</ItemTemplate>
</asp:TemplateField>
When I've done this I've used a Template Field with the ConfirmButtonExtender from the Ajax Control Toolkit.
<asp:TemplateField>
<ItemTemplate>
<asp:Button name="DeleteButton" commandName="Delete" Text="Delete" runat="server" />
<ajaxToolkit:ConfirmButtonExtender TargetControlId="DeleteButton" ConfirmText="Delete this entry?" />
</ItemTemplate>
</asp:TemplateField>
This is a javascript for delete confirmation.
function not_check1()
{
var where_to1= confirm("Do you really want to delete this record??");
if (where_to1 == true)
{
return true;
}
else
{
return false;
}
}
This is a gridview field from where you call the javascript.
<asp:TemplateColumn ItemStyle-Width="20" >
<ItemTemplate>
<asp:ImageButton ID="ib_delete" runat="server" ImageUrl="~/image/images.jpg" commandName="Delete" OnClientClick="return not_check1();" ImageAlign="Middle"/></ItemTemplate>
</asp:TemplateColumn>
In RowDataBound add -
LinkButton objDelete = e.Row.Cells[0].Controls[0] as LinkButton;
objDelete.Attributes.Add("onclick", "javascript:return confirm('Do you want to delete this item?');");