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>
Related
In past, i worked on ListViews (.net 2.0) using a custom Template field but what i am trying to achieve here is the following
I am now working on .net 4.6
So basically a list which shows items like above and on mouse-hover few options show up as shown in the following screenshot
I also have to trigger those option to do different things -
How can I do that in asp.net, may I please have some code references.
Cheers
P.S.
This is a rough example of how i am creating the List Item Template (as requested)
<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1">
<AlternatingItemTemplate>
<table >
<tr>
<td ><asp:Image ID="image1" ImageUrl='<%# Bind("url") %>' runat="server" Width="98px" /> </td>
<td><h2><asp:Label ID="_label" runat="server" Text ='<%# Bind("title") %>'></asp:Label></h2><asp:Label ID="Label1" runat="server" Text ='<%# Bind("description") %>'></asp:Label></td>
</tr>
</table>
</AlternatingItemTemplate>
<EmptyDataTemplate>
No data was returned.
</EmptyDataTemplate>
<ItemSeparatorTemplate>
<br />
</ItemSeparatorTemplate>
<ItemTemplate>
<table >
<tr>
<td ><asp:Image ID="image1" ImageUrl='<%# Bind("url") %>' runat="server" Width="98px" /> </td>
<td><h2><asp:Label ID="_label" runat="server" Text ='<%# Bind("title") %>'></asp:Label></h2><asp:Label ID="Label1" runat="server" Text ='<%# Bind("description") %>'></asp:Label></td>
</tr>
</table>
</ItemTemplate>
<LayoutTemplate>
<ul id="itemPlaceholderContainer" runat="server" style="">
<li runat="server" id="itemPlaceholder" />
</ul>
<div style="">
</div>
</LayoutTemplate>
</asp:ListView>
I can add any html formatting to this template e,g i can add ASP:button etc but i don't know how to trigger those to perform certain tasks.
One easy way to achieve your requirement is to keep those buttons there but invisible and show them up when the parent container is hovered. following as a quick sample
aspx
<asp:ListView ID="ListView1" runat="server">
<ItemTemplate>
<tr class="row-data">
<td>
<asp:Label ID="NameLabel" runat="server" Text='<%# Eval("Name") %>' />
</td>
<td>
<asp:Label ID="PositionLabel" runat="server" Text='<%# Eval("Position") %>' />
</td>
<td>
<div class="btn-area">
<asp:Button runat="server" Text="Button1" />
<asp:Button runat="server" Text="Button2" />
</div>
</td>
</tr>
</ItemTemplate>
<LayoutTemplate>
<table id="itemPlaceholderContainer" runat="server" border="0" style="">
<tr runat="server" style="">
<th runat="server">
Name
</th>
<th runat="server">
Position
</th>
<th>
</th>
</tr>
<tr id="itemPlaceholder" runat="server">
</tr>
</table>
</LayoutTemplate>
</asp:ListView>
css
.btn-area
{
display: none;
}
.row-data:hover .btn-area
{
display: block;
}
code-behind
protected void Page_Load(object sender, EventArgs e)
{
ListView1.DataSource = new List<dynamic>() {
new { Name = "Andy", Position = "PG"},
new { Name = "Bill", Position = "SD"},
new { Name = "Caroline", Position = "Manager"}
};
ListView1.DataBind();
}
UPDATE
ListView ItemCommand can capture the postback by button pressed and CommandName makes you able to recognize which button fired it.
<asp:Button runat="server" Text="Button1" CommandName="c1" />
<asp:Button runat="server" Text="Button2" CommandName="c2" />
code-behind
protected void ListView1_ItemCommand(object sender, ListViewCommandEventArgs e)
{
if (e.CommandName == "c1")
{
// do something when button1 pressed
}
else if (e.CommandName == "c1")
{
// do something when button2 pressed
}
}
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 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.
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
I am using listview to display a list of items and a nested listview to show list of features to each item. Both parent and child listview need to able Insert,Edit and delete operation. It works fine for parent listview. But when I try to edit an child item, The edit button does not take it into Edit mode. Can you please suggest me what I am missing in my code?
<asp:ListView ID="lvParent" runat="server"
OnItemDataBound="lvParent_ItemDataBound"
onitemcanceling="lvParent_ItemCanceling" onitemcommand="lvParent_ItemCommand"
DataKeyNames="ItemID" onitemdeleting="lvParent_ItemDeleting"
oniteminserting="lvParent_ItemInserting" >
<LayoutTemplate>
<asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder>
<div align="right">
<asp:Button ID="btnInsert" runat="server" Text="ADD Item" onclick="btnInsert_Click"/>
</div>
</LayoutTemplate>
<ItemTemplate>
<table runat="server" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td>
<div id="dvDetail">
<span >Description</span>
<asp:TextBox ID="txtDescription" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Description") %>' TextMode="MultiLine" ></asp:TextBox>
</div>
<div id="dvFeature" >
<span>Feature List</span>
<asp:ListView ID="lvChild" runat="server"
InsertItemPosition="LastItem"
DataKeyNames="FeatureID" OnItemCommand="lvChild_ItemCommand"
OnItemCanceling="lvChild_ItemCanceling" OnItemDeleting="lvChild_ItemDeleting"
OnItemEditing="lvChild_ItemEditing" OnItemInserting="lvChild_ItemInserting" OnItemUpdating="lvChild_ItemUpdating"
DataSource='<%# DataBinder.Eval(Container.DataItem, "FeatureList") %>' >
<LayoutTemplate>
<ul >
<asp:PlaceHolder runat="server" ID="itemPlaceHolder" ></asp:PlaceHolder>
</ul>
</LayoutTemplate>
<ItemTemplate>
<li>
<span class="dvList"><%# DataBinder.Eval(Container.DataItem, "FeatureTitle")%></span>
<div class="dvButton" >
<asp:ImageButton ID="btnEdit" runat="server" ImageUrl="/Images/edit_16x16.gif" AlternateText= "Edit" CommandName="Edit" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "FeatureID") %>' Width="12" Height="12" />
<asp:ImageButton ID="btnDelete" runat="server" ImageUrl="/Images/delete_16x16.gif" AlternateText= "Delete" CommandName="Delete" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "FeatureID") %>' Width="12" Height="12" />
</div>
</li>
</ItemTemplate>
<EditItemTemplate>
<li>
<asp:TextBox ID="txtFeature" Text='<%# DataBinder.Eval(Container.DataItem, "FeatureTitle")%>' runat="server"></asp:TextBox>
<div class="dvButton">
<asp:ImageButton ID="btnUpdate" runat="server" ImageUrl="/Images/ok_16x16.gif" AlternateText= "Update" CommandName="Update" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "FeatureID") %>' Width="12" Height="12" />
<asp:ImageButton ID="btnCancel" runat="server" ImageUrl="/Images/delete_16x16.gif" AlternateText= "Cancel" CommandName="Cancel" Width="12" Height="12" CausesValidation="false" />
</div>
</li>
</EditItemTemplate>
<InsertItemTemplate>
<asp:TextBox ID="txtFeature" runat="server"></asp:TextBox>
<div class="dvButton">
<asp:ImageButton ID="btnInsert" runat="server" ImageUrl="/Images/ok_16x16.gif" AlternateText= "Insert" CommandName="Insert" Width="12" Height="12" />
<asp:ImageButton ID="btnCancel" runat="server" ImageUrl="/Images/delete_16x16.gif" AlternateText= "Cancel" CommandName="Cancel" Width="12" Height="12" CausesValidation="false" />
</div>
</InsertItemTemplate>
</asp:ListView>
</div>
</td>
</tr>
<tr>
<td align="right">
<div id="dvButton" >
<asp:Button ID="btnSave" runat="server" Text="Save"
CommandName="Save"
CommandArgument='<%# DataBinder.Eval(Container.DataItem, "ItemID") %>' />
<asp:Button ID="btnDelete" runat="server" Text="Delete" CssClass="Cancel"
CommandName="Delete"
CommandArgument='<%# DataBinder.Eval(Container.DataItem, "ItemID") %>' />
</div>
</td>
</tr>
</table>
</ItemTemplate>
</asp:ListView>
Code Behind:
protected void Page_Load(object sender, EventArgs e)
{
if (Page.IsPostBack == false)
{
BindData();
}
}
private void BindData()
{
MyDataContext data = new MyDataContext();
var result = from itm in data.ItemLists
where itm.ItemID == iItemID
select new
{
itm.ItemID,
itm.Description,
FeatureList = itm.Features
};
lvParent.DataSource = result;
lvParent.DataBind();
}
protected void lvChild_ItemEditing(object sender, ListViewEditEventArgs e)
{
ListView lvChild = sender as ListView;
lvChild.EditIndex = e.NewEditIndex;
lvChild.DataBind();
}
Edit:
protected void lvChild_ItemEditing(object sender, ListViewEditEventArgs e)
{
ListView lvChild = sender as ListView;
lvChild.EditIndex = e.NewEditIndex;
lvChild.DataBind();
}
If I use "lvChild.DataBind()" in 'ItemEditing' event, the total list of child items goes away if I click 'edit'
protected void lvChild_ItemEditing(object sender, ListViewEditEventArgs e)
{
ListView lvChild = sender as ListView;
lvChild.EditIndex = e.NewEditIndex;
}
if I get rid of 'lvChild.Databind' in ItemEditing event, it goes to Edit mode after clicking the 'edit' button twice . And though it shows textbox control of EditItemTemplate, it appears as a blank textbox (does not bind existing value to edit).
This is an interesting problem. Almost certainly a databinding issue. In order to enter edit mode you must do two things:
1) Set the EditIndex
2) Call DataBind()
In the case of nested repeaters though... when does Render get called? I suspect you will have to call DataBind() on the PARENT in order to render everything correctly. That being the case you may have to then set the EditIndex AGAIN, since you are rebinding the parent.
EDIT:
OK... I just tried this with a nested GridView and I did NOT have to DataBind() the parent to get the sub grid to enter edit mode. Now I have to downvote my own answer. :|
hope that will serve someone, somewhere.
Here is my code to get that to work:
1) I have a Listview wich hold a user control when editing. This User cotnrol has itself a listview inside
<asp:ListView runat=server ID=C_LV_MyObjects DataKeyNames="Id"
OnItemDataBound=DataBoundMyObjects OnItemEditing=ItemEditing
>
<LayoutTemplate>
<table runat=server id="itemPlaceholderContainer">
<tr>
<th>
Description
</th>
</tr>
<tr runat="server" id="itemPlaceholder">
</tr>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td>
text...
</td>
<td>
<asp:LinkButton runat="server" CommandName="Edit" Text="Edit"></asp:LinkButton>
</td>
<td>
<asp:LinkButton runat="server" CommandName="Delete" Text="Delete"></asp:LinkButton>
</td>
</ItemTemplate>
<EditItemTemplate>
<tr>
<td colspan=3>
<MyTag:MyUC ID=C_UC_MyUserControl runat=server
OnEditing=MyObjectEditing
/>
</td>
</tr>
</EditItemTemplate>
<EmptyDataTemplate>
No results found!
</EmptyDataTemplate>
</asp:ListView>
The code c# for this listview is as follows :
public int EditIndexComposition;
protected void ItemEditing(object sender, ListViewEditEventArgs e)
{
C_LV_MyObjects.EditIndex = e.NewEditIndex;
C_LV_MyObjects.DataBind();
}
protected void MyObjectEditing(object sender, EventArgs e)
{
ListViewEditEventArgs MyEvent = (ListViewEditEventArgs)e;
if (MyEvent != null)
EditIndexComposition= MyEvent.NewEditIndex;
C_LV_MyObjects.DataBind();
}
protected void DataBoundMyObjects(object sender, ListViewItemEventArgs e)
{
MyUC uc = (MyUC)e.Item.FindControl("C_UC_MyUserControl");
if (uc!=null)
{
uc.EditIndex = EditIndexComposition;
ListViewDataItem dataItem = (ListViewDataItem)e.Item;
MyObject obj= (MyObject)dataItem.DataItem;
uc.DataSource=Myservice.GetDatasource(obj.Id);
uc.DataBind();
}
}
and the code of my Usercontrol is as follows :
<asp:PlaceHolder runat="server" ID="C_PH_ObjComposition">
<asp:ListView runat="server" ID="C_LV_AppaltatoreComposizione" DataSource="<% # DataSource %>"
DataKeyNames="Id" OnItemEditing="ItemEditing">
etc...
<ItemTemplate>
<tr>
<td>
<asp:LinkButton runat="server" CommandName="Edit" Text="Edit"></asp:LinkButton>
</td>
</tr>
</ItemTemplate>
<EditItemTemplate>
<tr>
<td>
Edit Mode
</td>
</tr>
</EditItemTemplate>
</asp:ListView>
</asp:PlaceHolder>
with the following code c# :
public int EditIndex
{
get {return C_LV_ObjComposition.EditIndex;}
set { C_LV_ObjComposition.EditIndex=value;}
}
public event EventHandler Editing;
protected void ItemEditing(object sender, ListViewEditEventArgs e)
{
C_LV_ObjComposition.EditIndex = e.NewEditIndex;
if (Editing != null)
Editing(this, e);
}
When clicking on the edit button of the innerlistview, we store the index that was clicked and we trigger a function in the first container user control. This function is going to store in a global value the index cliked and triggers a databind of the outter list. Doing so we get the onitemdatabound, that will recreate our usercontrol with the proper values, we can then before the databinding of the usercontrol assign the index of the editing row.
That's all if you have any questions , please feel free to answer..
ciao!