I am trying to make a GridView populate like the image below:
This is how my GridView currently looks.
Code:
<asp:GridView runat="server" ID="GridView1" CssClass="wiretable" AutoGenerateColumns="False"
BorderColor="#E8CC6B" BorderStyle="Solid" BorderWidth="1px"
Width="100%" ShowFooter="False" OnRowDataBound="GridView1_RowDataBound">
<Columns>
<asp:BoundField DataField="Name" HeaderText="Attendees" />
</Columns>
</asp:GridView>
Since you want a table structure, then I would recommend using a repeater instead of a grid to get better control of the output, like this:
Markup:
<asp:Repeater ID="Repeater1" runat="server">
<HeaderTemplate>
<table>
<tr>
<th colspan="2">Attendees</th>
<tr>
<tr>
</HeaderTemplate>
<ItemTemplate>
<%# (Container.ItemIndex != 0 && Container.ItemIndex % 2 == 0) ? #"</tr><tr>" : string.Empty %>
<%# string.Format("{0}{1}{2}", #"<td>", Container.DataItem, #"</td>") %>
</ItemTemplate>
<FooterTemplate>
</tr>
</table>
</FooterTemplate>
</asp:Repeater>
Code-behind:
protected void Page_Load(object sender, EventArgs e)
{
// Only bind repeater initially, not every post back
if (!IsPostBack)
{
Repeater1.DataSource = GetDataFromDatabase();
Repeater1.DataBind();
}
}
Note: You can apply whatever necessary CSS to the table header, rows and cells to make it look like you want.
Looking for:
<HeaderTemplate>
<table>
<tr>
<th colspan="2">Attendees</th>
<tr>
<tr>
</HeaderTemplate>
So HeaderTemplate tag's attributes.
Related
I am doing an interdisciplinary work in college which would be a simple POST system, using gridview and bootstrap/asp.net, so far it has worked out fine, but I am in the part of SHOWING the post on the home page, and the gridview is not very pretty , it does not look like a post, it looks like this:
Simply GridView:
And I wanted something like that:
The way I wanted it:
Do you have any way to do this?
If not, would I have to see the whole post click on the title and not the giant red button? Can not it be dark when I move the mouse? especially in pagination, like this: HORRIBLE
Code aspx :
<div class="container-fluid bg-page" id="conteudo">
<div class="row">
<div class="col-lg-12">
<asp:GridView ID="gdv_posts" runat="server" CssClass="table table-hover table-striped" GridLines="None" AutoGenerateColumns="false" OnRowCommand="gdv_posts_RowCommand" AllowPaging="True" OnPageIndexChanging="gdv_posts_PageIndexChanging">
<Columns>
<asp:BoundField DataField="titulo" HeaderText="Titulo" />
<asp:BoundField DataField="descrição" HeaderText="Descrição" />
<asp:BoundField DataField="data" HeaderText="Data de Criação" />
<asp:BoundField DataField="autor" HeaderText="Autor" />
<asp:TemplateField>
<ItemTemplate>
<asp:Button ID="btn_visualizar" runat="server" Text="Visualizar" class="btn btn-danger" CommandName="Visualizar" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "id")%>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</div>
</div>
Code cs:
protected void Page_Load(object sender, EventArgs e)
{
gdv_posts.UseAccessibleHeader = true;
if (!Page.IsPostBack)
{
preencherGrid();
}
}
protected void gdv_posts_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
gdv_posts.PageIndex = e.NewPageIndex;
preencherGrid();
}
The <asp:GridView/> is basically a plain table int html. If you would like your posts to look like in the image supplied you would need a table of 1 column and X rows. To accomplish that you should use one <asp:TemplateField/> with an <ItemTemplate/> inside. And then design the content inside to your liking.
Example:
<asp:GridView ID="gdv_posts" runat="server" CssClass="table table-hover table-striped" GridLines="None" AutoGenerateColumns="false" OnRowCommand="gdv_posts_RowCommand" AllowPaging="True" OnPageIndexChanging="gdv_posts_PageIndexChanging">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<table>
<tr>
<td>
<%# DataBinder.Eval(Container.DataItem, "titulo")%>
</td>
</tr>
<tr>
<td>
<%# DataBinder.Eval(Container.DataItem, "descrição")%>
</td>
</tr>
<tr>
<td>
<%# DataBinder.Eval(Container.DataItem, "data")%>
</td>
</tr>
<tr>
<td>
<%# DataBinder.Eval(Container.DataItem, "autor")%>
</td>
</tr>
</table>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Actually I have problem with finding LinkButton Control in gridview .
I have 2 gridviews which one of them is inside another one so my problem is I cannot get the value of LinkButton of second gridview,
here is my code
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
BorderStyle="None" DataSourceID="SqlDataSource2" GridLines="None">
<Columns>
<asp:TemplateField ShowHeader="False">
<ItemTemplate>
<table align="center" class="Table3">
<tr>
<td >
<asp:Label ID="lblID" runat="server" Visible="false" Text='<%# Eval("Food_ID") %>'></asp:Label>
<b> <%#Eval("Title")%></b>
</td>
</tr>
<tr>
<td align="center" class="ImgKidFood">
<asp:Image ID="Img" Width="680px" Height="145px" ImageUrl='<%#Eval("Pictures") %>' runat="server" />
</td>
</tr>
<tr>
<td style="direction:rtl; text-align:right;">
<asp:GridView ID="ShowFoodMenu2" runat="server" AutoGenerateColumns="False"
BorderStyle="None" GridLines="None" ShowHeader="False"
DataSourceID="SqlDataSource1" Width="100%"
>
<Columns>
<asp:TemplateField>
<ItemTemplate>
<table align="center" class="TableListMenu">
<tr>
<td class="Add">
<asp:LinkButton ID="LinkButton2" CommandArgument="<%# Container.DataItemIndex %>"
runat="server" CausesValidation="False"
CommandName="Select" Text="Select"
onclick="LinkButton2_Click" ></asp:LinkButton>
</td>
<td class="ToCenter">
<b><%#Eval("Title_Pr") %>
</b>
<asp:LinkButton ID="LinkButton12" runat="server" CommandArgument="<%# Container.DataItemIndex %>" CommandName="Link2" Text='<%# Eval("Menu_ID") %>'></asp:LinkButton>
</td>
<td class="PriceLeft">
<%#Eval("Price") %>
</td>
</tr>
</table>
<hr />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<br /><br /><br />
</td>
</tr>
</table>
</ItemTemplate>
</asp:TemplateField>
</Columns>
As u can see the second gidview named id is ShowFoodMenu2 and it's inside first girdview which id Giridview1 .
and also I have two Linkbuttons inside the second gridview
one of them keep the value(which is LinkButton12) and another one(LinkButton2) is for when I clicked it add a record in Database .
But when I clicked on Linkbutton(LinkButton2) to show the value of Linkbutton12 , I will get ann error
Here is the error
http://hidelion.com/Images/error.png
and here is my.cs code
protected void LinkButton2_Click(object sender, EventArgs e)
{
GridView G = new GridView();
G.FindControl("ShowFoodMenu2");
System.Threading.Thread.Sleep(1000);
LinkButton m = (LinkButton)sender;
int i = Int32.Parse(m.CommandArgument);
LinkButton LblMososID = (LinkButton)G.Rows[i].FindControl("LinkButton2");
// LinkButton LblMososID2 = (LinkButton)G.Rows[i].FindControl("LinkButton12");
Label1.Text = LblMososID.Text;
}
So how can I solved this problem ??????
GridView G = new GridView(); just create a new instance of Gridview class, and it will not find your gridview automatically, You are messing it up, simply go like this, from linkbutton find the corresponding row, from that row fetch the control you wish to manipulate, do it like this:-
protected void LinkButton2_Click(object sender, EventArgs e)
{
LinkButton LinkButton2 = sender as LinkButton;
GridViewRow grdRow = (GridViewRow)LinkButton2.NamingContainer;
LinkButton LinkButton12 = (LinkButton)grdRow.FindControl("LinkButton12 ");
Label1.Text = LinkButton12.Text;
}
I have a repeater, nested with Html table rows:
<asp:Repeater ID="Repeater1" runat="server" OnItemDataBound="Repeater1_ItemDataBound">
<HeaderTemplate>
<table id="grid">
<thead>
<tr>
<th>SID</th>
<th>Start Date</th>
<th>End Date</th>..
<th>PDF Text</th>
</tr>
</thead>
<tbody>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><%#DataBinder.Eval(Container.DataItem,"ID") %></td>
<td><%#DataBinder.Eval(Container.DataItem,"startDate") %></td>
<td><%#DataBinder.Eval(Container.DataItem,"endDate") %></td
<td>
<asp:LinkButton runat="server" ID="lbtnPDF" Text="PDF Full Text" OnClick="lbtnPDF_Click" />
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</tbody>
</table>
</FooterTemplate>
</asp:Repeater>
When the user clicks on linkbutton, I want to get the ID of that row of repeater item and will display the PDF file which is related to that ID, in another aspx page.
I wrote on itemdatabound event :
protected void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
LinkButton lnkBtn = (LinkButton)e.Item.FindControl("lbtnPDF");
}
How can I get column Id of repeater nested with an html table?
I don't think you are following the right approach to do it. I would choose the benefits of Repeater's ItemCommand Event to do it.
The following code might be helpful to you:
HTML/ASP.net
<asp:Repeater ID="Repeater1" DataSourceID="SqlDataSource1" runat="server" OnItemCommand="Repeater1_ItemCommand">
<ItemTemplate>
<asp:Button ID="Button1" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"Username") %>' CommandName="ViewPDF" CommandArgument='<%#DataBinder.Eval(Container.DataItem,"ID") %>' />
</ItemTemplate>
</asp:Repeater>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString='<%$ ConnectionStrings:myConnString %>' SelectCommand="SELECT * FROM [tblUserAccounts]"></asp:SqlDataSource>
As you have noticed, I have used CommandName and CommandArgument attributes in the label. I have used CommandName attribute to identify which action the user is expecting. Also the CommandArgument to pass the required data object to server.
Go to Repeater's OnItemCommand instead of ItemDataBound event. And write the code as below;
protected void Repeater1_ItemCommand(object source, RepeaterCommandEventArgs e)
{
if (e.CommandName == "ViewPDF")
{
Response.Redirect("~/MyPDFFiles/" + (string)e.CommandArgument);
}
}
Now run and test your Application!
Hope this helps!
<asp:CheckBox ID="chkBox1" runat="server" Text="1" />
<asp:CheckBox ID="chkBox2" runat="server" Text="2" />
I have two checkbox, Based up on the Selection i need to run query and bind into repeater control.
In Repeater Control:
<asp:Repeater runat="server" ID="Repeater1">
<HeaderTemplate >
<table class="list_table" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<th>1</th>
<th>2</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><%=CheckBox1.Checked ? Eval("1") : "" %></td>
<td><%=CheckBox2.Checked ? Eval("2") : "" %></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
AVD suggestion i have changed my coding, if condition is working fine, but i need to bind the data from database into the repeater control.
You can try,
<ItemTemplate>
<tr>
<td><%=CheckBox1.Checked ? "1" : "" %></td>
<td><%=CheckBox2.Checked ? "2" : "" %></td>
</tr>
</ItemTemplate>
EDIT:
#Prince Antony G : If I select checkbox1 then run the query- select 1 from table1; or if I select checkbox2 then run the query- select 2 from table2; and bind the data into my repeater control (and both these tables have different fields)
You can't bound different data source to a DataControl because some of the binding expression (columns) are not available(found) in either of that case.
Page1.aspx markup
<div>
<asp:MultiView ID="MultiView1" runat="server">
<asp:View ID="View1" runat="server">
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<!--Bind the result from first table -->
</ItemTemplate>
</asp:Repeater>
</asp:View>
<asp:View ID="View2" runat="server">
<asp:Repeater ID="Repeater2" runat="server">
<ItemTemplate>
<!--Bind the result from second table -->
</ItemTemplate>
</asp:Repeater>
</asp:View>
</asp:MultiView>
</div>
Page1.aspx.cs - code behind
protected void BindResult(object sender, EventArgs e)
{
CheckBox check = sender as CheckBox;
switch (check.Text)
{
case "1":
/*
* 1. Execute - Select * from Table1
* 2. Bind the DataSource to Repeater1
*/
/* Shows the first View*/
MultiView1.ActiveViewIndex = 0;
break;
case "2":
/*
* 1. Execute - Select * from Table2
* 2. Bind the DataSource to Repeater2
*/
/* Shows the second View*/
MultiView1.ActiveViewIndex = 1;
break;
}
}
I have a templatefield having a textbox and filteredtextboxextender inside the templatefield. I need to change the ValidChars property for filteredtextboxextender from "123" to "abc" in c# codebehind. The templatefield is there inside the GridView.
I used the following code in aspx page.
<asp:GridView ID="grdEducation" runat="server" AllowSorting="True" AutoGenerateColumns="False"
AllowPaging="false" CellPadding="4" GridLines="Vertical" OnRowDeleting="grdEducation_RowDeleting"
OnRowDataBound="grdEducation_RowDataBound" OnRowUpdating="grdEducation_RowUpdating" ShowFooter="false" ShowHeader="true">
<HeaderStyle CssClass="grid-header-style" />
<Columns>
<asp:TemplateField HeaderStyle-CssClass="grid-label-small" >`
<ItemTemplate>
<table>
<tr>
<td width='90%'>
<table>
<td width='60%'>
<asp:TextBox ID="textbox1" Width="100px" runat="server"
ToolTip="Provide text" MaxLength="11"></asp:TextBox>
<ajaxtoolkit:FilteredTextBoxExtender ID="filter" runat="server" TargetControlID="textbox1"
ValidChars="123" />
</td>
</table>
</td>
</tr>
</table>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Is there any possibility is there for change filteredtextboxextender property like that like that?
Thank you..
Register the RowBoundData event like below.
protected void GridView_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
YourControlType Conrol = (YourControlType)e.Row.FindControl("ControlID");
//Set the property here
}
}
You can similarly change the Control Properties in Row_Command event also