How to add Expand/Collapse to a nested Gridview without using JQuery - asp.net

Is it possible to add expand colapse functionality in a nested grid view without using Jquery or java script.
If yes can someone give me an example?
Below is the asp code for my nested gridview
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
BackColor="White" BorderColor="#E7E7FF" BorderStyle="None" BorderWidth="1px"
CellPadding="3" GridLines="Horizontal"
onrowdatabound="GridView1_RowDataBound" DataKeyNames="id1" >
<AlternatingRowStyle BackColor="#F7F7F7" />
<Columns>
<asp:TemplateField HeaderText="ID">
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Eval("id1") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Students">
<ItemTemplate>
<asp:GridView ID="GridView2" runat="server" CellPadding="4" ForeColor="#333333"
GridLines="None">
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
<EditRowStyle BackColor="#999999" />
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#E9E7E2" />
<SortedAscendingHeaderStyle BackColor="#506C8C" />
<SortedDescendingCellStyle BackColor="#FFFDF8" />
<SortedDescendingHeaderStyle BackColor="#6F8DAE" />
</asp:GridView>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<FooterStyle BackColor="#B5C7DE" ForeColor="#4A3C8C" />
<HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#F7F7F7" />
<PagerStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" HorizontalAlign="Right" />
<RowStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" />
<SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="#F7F7F7" />
<SortedAscendingCellStyle BackColor="#F4F4FD" />
<SortedAscendingHeaderStyle BackColor="#5A4C9D" />
<SortedDescendingCellStyle BackColor="#D8D8F0" />
<SortedDescendingHeaderStyle BackColor="#3E3277" />
</asp:GridView>

You can use the asp.net ajax toolkit. Which still uses javascript, but you don't have to do any of it yourself. It's all done under the hood.
http://ajaxcontroltoolkit.devexpress.com
Here is the collapse/expand panel extender
http://ajaxcontroltoolkit.devexpress.com/CollapsiblePanel/CollapsiblePanel.aspx

Related

Gridview within a placeholder

i have currently create a user web control with a dataview in it
currently this is the gridview
<div class="col-md-12">
<asp:GridView id="dtgrid1" runat="server" AutoGenerateColumns="False" AutoGenerateDeleteButton="True" AutoGenerateEditButton="True" AutoGenerateSelectButton="True" CellPadding="4" ForeColor="#333333" GridLines="Horizontal" AllowPaging="True" width="100%" ShowFooter="True" ShowHeaderWhenEmpty="True" EmptyDataText="No records Found">
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
<Columns>
<asp:BoundField DataField="ID" HeaderText="ID" ItemStyle-Width="30" />
<asp:BoundField DataField="Descripcion" HeaderText="Descripcion" ItemStyle-Width="250" />
<asp:BoundField DataField="Monto" HeaderText="Monto" ItemStyle-Width="150" />
<asp:BoundField DataField="Fecha" HeaderText="Fecha" ItemStyle-Width="150" />
</Columns>
<EditRowStyle BackColor="#999999" />
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#E9E7E2" />
<SortedAscendingHeaderStyle BackColor="#506C8C" />
<SortedDescendingCellStyle BackColor="#FFFDF8" />
<SortedDescendingHeaderStyle BackColor="#6F8DAE" />
</asp:GridView>
</div>
that gridview is in a webuser control with other cotrols and divs, everythings show as it should but the gridviews
this is the code on the onload event
If Not Page.IsPostBack Then
dim dgv1datatable as new DataTable
With dgv1datatable
.Columns.Add(New DataColumn("ID", GetType(Integer)))
.Columns.Add(New DataColumn("Descripcion", GetType(String)))
.Columns.Add(New DataColumn("Monto", GetType(Double)))
.Columns.Add(New DataColumn("Fecha", GetType(Date)))
End With
Session("dgv1dt") = dgv1datatable
dtgrid1.DataSource = DirectCast(Session("dgv1dt"), DataTable)
dtgrid1.DataBind()
dtgrid1.Visible = True
End If
but it's now showing the gridview but if i insted place the gridview where the placeholder should be the gridview shows any help please?
EDIT
im going to try and explain better the issue
this is where the gridview should've within a webusercontrol that is in a placeholder
so since it wasn't showing i decided to delete the placeholder and place the gridview in the same place and it did appear
<asp:SqlDataSource ID="SqlDataSource1" runat="server" CacheExpirationPolicy="Sliding"
ConnectionString="<%$ ConnectionStrings:catalog %>"
SelectCommand="SELECT * FROM YourDB"></asp:SqlDataSource>

Need to load data from grid view to text box and droup down using Row command

This is my Grid view. I want to know how to bind data to Text boxes and drop down list using Row command event.
<asp:Panel ID="Panel2" runat="server" CssClass="mid">
<asp:GridView ID="BuyerGrid" runat="server" AutoGenerateColumns="False" DataKeyNames="BuyerId" CellPadding="4" ForeColor="#333333" GridLines="None" OnRowCommand="BuyerGrid_RowCommand">
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
<Columns>
<asp:BoundField DataField="BuyerName" HeaderText="Buyer Name" />
<asp:BoundField DataField="BuyerCode" HeaderText="Buyer Code" />
<asp:BoundField DataField="CountryName" HeaderText="Country" />
<asp:BoundField DataField="CityName" HeaderText="City" />
<asp:TemplateField HeaderText="" SortExpression="">
<ItemTemplate>
<asp:LinkButton ID="LinkButtonEdit" runat="server" CommandName="Edit"
CommandArgument='<%#Eval("BuyerId") %>'>Edit</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EditRowStyle BackColor="#999999" />
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#E9E7E2" />
<SortedAscendingHeaderStyle BackColor="#506C8C" />
<SortedDescendingCellStyle BackColor="#FFFDF8" />
<SortedDescendingHeaderStyle BackColor="#6F8DAE" />
</asp:GridView>
</asp:Panel>
This is my code behind part.
protected void BuyerGrid_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "Edit")
{
int index = Convert.ToInt32(e.CommandArgument);
//Bind values in the text box of the pop up control
tbxBuyerName.Text = BuyerGrid.Rows[index].Cells[0].Text;
tbxBuerCode.Text = BuyerGrid.Rows[index].Cells[1].Text;
//.Text = gview.Rows[index].Cells[2].Text;
}
}
Change
CommandArgument='<%#Eval("BuyerId") %>'
to
CommandArgument='<%# Container.DataItemIndex %>'
or
CommandArgument='<%# Container.DisplayIndex %>'

ASP.NET entity framework code first foreign key on gridview

I am using this method to retrieve company from trade. How can I display company ID on GridView? This is my code to retrieve.
public List<Trade> getTrade()
{
List<Trade> trades=dbContext.trades.Include("tradeCompany")
.OrderBy(t => t.tradeDate).ToList();
return trades;
}
I bind to List at code behind... This is my gridview
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
BackColor="White" OnRowDataBound="sharesGridView_RowDataBound" BorderColor="#999999" BorderStyle="None" BorderWidth="1px"
CellPadding="3" GridLines="Vertical">
<AlternatingRowStyle BackColor="#DCDCDC" />
<Columns>
<asp:BoundField DataField="tradeDate" DataFormatString="{0:MMMM d, yyyy}"
HeaderText="Date" HtmlEncode="False" SortExpression="tradeDate" />
<asp:BoundField DataField="type" HeaderText="Type" SortExpression="type" />
<asp:BoundField HeaderText="Company" />
<asp:BoundField DataField="tradePrice" HeaderText="Price"
SortExpression="tradePrice" />
<asp:BoundField DataField="tradeQuantity" HeaderText="Quantity"
SortExpression="tradeQuantity" />
</Columns>
<FooterStyle BackColor="#CCCCCC" ForeColor="Black" />
<HeaderStyle BackColor="#000084" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
<RowStyle BackColor="#EEEEEE" ForeColor="Black" />
<SelectedRowStyle BackColor="#008A8C" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#F1F1F1" />
<SortedAscendingHeaderStyle BackColor="#0000A9" />
<SortedDescendingCellStyle BackColor="#CAC9C9" />
<SortedDescendingHeaderStyle BackColor="#000065" />
</asp:GridView>
Instead of using a BoundField you can use a template field:
<asp:TemplateField>
<itemtemplate>
<p><%#DataBinder.Eval(Container.DataItem, "Company.Id")%></p>
</itemtemplate>
</asp:TemplateField>

select button on gridview - asp.net

in asp.net, when you have an autogenreated select button on a gridview, is it possible to change the text of it from 'select' to something else of your choosing? If so can anyone point me to an example?
thanks again
Check this similar question:
Changing text of an autogenerated select column of a gridview in asp.net - How?
Example:
<asp:buttonfield buttontype="Button"
commandname="Select"
headertext="Select Customer"
text="SelectText"/>
<asp:GridView ID="gvSearch" runat="server" Visible="False"
OnPageIndexChanging="Grid_Changing" AllowPaging="True" AllowSorting="True"
AutoGenerateSelectButton="True" CellPadding="4" Font-Names="Arial"
Font-Size="XX-Small" ForeColor="#333333" GridLines="None"
onselectedindexchanged="gvSearch_SelectedIndexChanged" PageSize="100">
<AlternatingRowStyle BackColor="White" />
<EditRowStyle BackColor="#2461BF" />
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#EFF3FB" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#F5F7FB" />
<SortedAscendingHeaderStyle BackColor="#6D95E1" />
<SortedDescendingCellStyle BackColor="#E9EBEF" />
<SortedDescendingHeaderStyle BackColor="#4870BE" />
</asp:GridView>

gridview image problem

work on C# vs05 asp.net .want to show image on gridview....From Northwind database .Table..Categories .this table contain the picture column......i want to show this column on my gridview.......
my code is bellow.............
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4"
DataSourceID="SqlDataSource1" ForeColor="#333333" GridLines="None" Width="284px" PageSize="3">
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<Columns>
<asp:CommandField ShowSelectButton="True" />
<asp:BoundField DataField="CategoryName" HeaderText="CategoryName" SortExpression="CategoryName" />
<asp:BoundField DataField="Description" HeaderText="Description" SortExpression="Description" />
<asp:TemplateField HeaderText="Picture">
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Image ID="Image1" runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<EditRowStyle BackColor="#999999" />
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
</asp:GridView>
You can use an ImageField, like so:
<asp:ImageField DataImageUrlField='<%# "ThumbNailImage.ashx?ImID="+ Eval("Picture") %>'></asp:ImageField>

Resources