I have a GridView which is populated by images from my database. My current GridView looks like that:
But I would like to fit my grid width, like this:
And here is my code:
<asp:GridView runat="server" ID="GridView1" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" Width="100%" GridLines="None">
<Columns>
<asp:ImageField DataImageUrlFormatString="http://myurl/{0}" DataImageUrlField="url" ControlStyle-Height="200px" ControlStyle-Width="200px">
<ControlStyle Height="200px" Width="200px"></ControlStyle>
</asp:ImageField>
</Columns>
</asp:GridView>
Any help appriciated.
You can use datalist instead of gridview in this case having 3 columns
It works nearly same as gridview.
<asp:DataList ID="dlImages" runat="server" RepeatColumns="4" CellPadding="3" CellSpacing="3"
RepeatDirection="Horizontal">
<ItemTemplate>
<table class="TableBorder">
<tr>
<td class="NormalTextBig" valign="top" align="left">
<%#Container.ItemIndex + 1%>.
</td>
</tr>
<tr>
<td valign="top" align="left">
<asp:ImageButton ID="ImageButton1" runat="server" CommandName="ImageClick" CommandArgument='<%# Eval("PageName") %>' />
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
Binding:
Protected Sub dlImages_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataListItemEventArgs) Handles dlImages.ItemDataBound
If e.Item.ItemType = ListItemType.AlternatingItem Or e.Item.ItemType = ListItemType.Item Then
CType(e.Item.FindControl("ImageButton1"), ImageButton).ImageUrl = "ImageResize.aspx?ImageName=ScreenMasterImages/" & e.Item.DataItem("ImgName") & "&BoxSize=" & 300
CType(e.Item.FindControl("ImageButton1"), ImageButton).ToolTip = e.Item.DataItem("PageName")
End If
End Sub
I have used this code for same purpose like you mentioned in my project.
ItemCommand:
Protected Sub dlImages_ItemCommand(ByVal source As Object, ByVal e As System.Web.UI.WebControls.DataListCommandEventArgs) Handles dlImages.ItemCommand
If e.CommandName = "ImageClick" Then
Session("ImageName") = e.CommandArgument
Response.Redirect("ScreenDetails.aspx")
End If
End Sub
This is how it will look:
I think you have similar thing to do :)
Related
Can someone help me, I am new at using asp.net. I have a table that is filled with data and if the user clicks on a row, the data inside the selected row will populate the input fields. I Have created a c# code using onclick row selection in grid view, it is working but it can only select one row and if you select another row it doesn't select it and it stays on whatever you clicked first. how can I select the other rows using onclick?
this is the html gridview code
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
DataKeyNames="CASE_KEY" DataSourceID="SqlDataSource1" Height="250px"
Width="1109px" BackColor="White" BorderColor="#999999" BorderStyle="None"
BorderWidth="1px" CellPadding="3" GridLines="Vertical" OnSelectedIndexChanged="GridView1_SelectedIndexChanged"
OnRowDataBound="GridView1_RowDataBound">
<AlternatingRowStyle BackColor="Gainsboro" />
<Columns>
<asp:BoundField DataField="CASE_KEY" HeaderText="CASE_KEY" ReadOnly="True"
SortExpression="CASE_KEY" Visible="False" />
<asp:BoundField DataField="DEPARTMENT_CASE_NUMBER"
HeaderText="Department Case #" SortExpression="DEPARTMENT_CASE_NUMBER" />
<asp:BoundField DataField="DEPARTMENT_NAME" HeaderText="Department"
SortExpression="DEPARTMENT_NAME" />
<asp:BoundField DataField="CHARGE" HeaderText="Charge"
SortExpression="CHARGE" />
<asp:BoundField DataField="LAB_CASE" HeaderText="Lab Case #"
SortExpression="LAB_CASE" />
<asp:BoundField DataField="OFFENSE_DATE" HeaderText="Incident Report Date"
SortExpression="OFFENSE_DATE" />
</Columns>
This is the html input fields
<table class="style2">
<tr>
<td class="style3">
Department Case #</td>
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td class="style3">
Department</td>
<td>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td class="style3">
Charge</td>
<td>
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td class="style3">
Lab Case #</td>
<td>
<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td class="style3">
Incident Report Date</td>
<td>
<asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>
</td>
</tr>
</table>
This is my c# code
protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)
{
//Get the selected row
GridViewRow row = GridView1.SelectedRow;
if (row != null)
{
//Change the cell index(1) of column as per your design
//Get the Selected row cell values here
GridViewRow gr = GridView1.SelectedRow;
TextBox1.Text = gr.Cells[1].Text;
TextBox2.Text = gr.Cells[2].Text;
TextBox3.Text = gr.Cells[3].Text;
TextBox4.Text = gr.Cells[4].Text;
TextBox5.Text = gr.Cells[5].Text;
}
}
protected void GridView1_RowDataBound(object sender, System.Web.UI.WebControls.GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
//Change the mouse cursor to Hand symbol to show the user the cell is selectable
e.Row.Attributes["onmouseover"] = "this.style.cursor='hand';this.style.textDecoration='underline';this.style.cursor='Pointer'";
e.Row.Attributes["onmouseout"] = "this.style.textDecoration='none';";
//Attach the click event to each cells
e.Row.Attributes["onclick"] = ClientScript.GetPostBackClientHyperlink(this.GridView1, "Select$" + e.Row.RowIndex);
}
}
Your solution is almost right except for the fact that you should use the rowCommand event of the GridView instead of the selectedIndexChange and then your solution should work
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 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