This is how i created a grid view in my ASP.NET C# project. This grid has 4 columns. I want to add a 5th column and add a button on each and every row. How can i do this ?
<asp:GridView ID="gv" runat="server" CellPadding="1" Width="900px"/>
Set AutoGenerateColumns="False" in the gridview markup
Define columns as BoundField (or TemplateField if you wish)
Add aTemplateField for the button in the last column
Sum up:
<asp:GridView runat="server" ID="gv" AutoGenerateColumns="False" CellPadding="1" Width="900px">
<Columns>
<%-- <asp:BoundField /> Definitions here --%>
...
<asp:TemplateField>
<ItemTemplate>
<asp:Button Text="Click ME" runat="server" ID="btn" OnClick="Clicked" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
suppose you are binding data table having 4 column say col1,col2,col3 and col4
then your gird view in .aspx will be like;
<asp:GridView runat="server" ID="gv" AutoGenerateColumns="False" CellPadding="1" Width="900px" OnRowCommand="gv_RowCommand">
<Columns>
<asp:TemplateField HeaderText="col1">
<ItemTemplate>
<%#Eval("col1")%>// "col1" is field of your database
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="col2">
<ItemTemplate>
<%#Eval("col2")%>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="col3">
<ItemTemplate>
<%#Eval("col3")%>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="col4">
<ItemTemplate>
<%#Eval("col4")%>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:Button ID="btnOK" runat="server" Text="OK" CommandName="show" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
*.cs page will be *
protected void gv_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName.ToLower() == "show")
{
//your code on click event
}
}
Related
I've got a gridview nested inside another gridview. What I need is that on the inner gridview get the DataKey from the outer gridview.
How can I pass it?
Thanks.
UPDATE
<asp:GridView ID="gvPeople" runat="server" AutoGenerateColumns="false" CssClass="Grid" DataKeyNames="person_id" OnRowDataBound="gvPeople_RowDataBound">
<Columns>
<asp:TemplateField HeaderStyle-Width="10px" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<img alt = "" style="cursor: pointer" src="images/glyphicons/png/glyphicons_236_zoom_in.png" />
<asp:Panel ID="pnlOrders" runat="server" Style="display: none">
<asp:GridView ID="gvDocuments" runat="server" AutoGenerateColumns="false" CssClass = "ChildGrid" DataKeyNames="document_id" ShowFooter="true"
OnRowCommand="gvDocuments_RowCommand" OnRowDataBound="gvDocuments_RowDataBound" OnRowDeleted="gvDocuments_RowDeleted" OnRowDeleting="gvDocuments_RowDeleting"
GridLines="Horizontal" >
<Columns>
<asp:BoundField ItemStyle-Width="150px" DataField="document_date" HeaderText="Document Date" />
<asp:BoundField ItemStyle-Width="100px" DataField="value" HeaderText="Value" DataFormatString="{0:#,##.00 €}" />
<asp:TemplateField HeaderText="">
<ItemTemplate>
<asp:Button runat="server" ID="delbutton" CommandArgument='<%# Eval("document_id") %>' CommandName="Delete" Text="Delete" />
<asp:Button runat="server" ID="editbutton" CommandArgument='<%# Eval("document_id") %>' Text="Edit" UseSubmitBehavior="false" />
</ItemTemplate>
<FooterTemplate>
<asp:Button runat="server" ID="newdoc" CommandName="New" Text="New Document" UseSubmitBehavior="false" />
</FooterTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</asp:Panel>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField ItemStyle-Width="150px" DataField="name" HeaderText="Name" />
<asp:BoundField ItemStyle-Width="150px" DataField="ndocs" HeaderText="Nº of Documents" />
<asp:BoundField ItemStyle-Width="150px" DataField="total_cost" HeaderText="Total Cost" DataFormatString="{0:#,#0.00 €}" />
</Columns>
</asp:GridView>
Here is my aspx code, which is all working, with the excpetion of the new document button, which runs a javascript button, as the edit button, but on this one I need to pass the person_id, from the row of the gvPeople, so when I create a new gvDocuments row, it will make it to that person id.
Thanks.
Just put it to work.
Add a hiddenfield before the child gridview with the value that I want.
On the RowDataBound of the child gridview, added this:
string str= ((HiddenField)e.Row.Parent.Parent.Parent.FindControl("hf")).Value.ToString();
And now use the str value for anything that I want.
You need to first access each of the parent gridview row then access the child gridview row then access the datakey.
Example:
foreach (GridViewRow rowPeople in gvPeople.Rows)
{
GridView gvDocuments = (GridView)rowPeople.FindControl("gvDocuments");
//this will get you the outer/parent gridview datakeys
gvDocuments.DataKeys[rowPeople.RowIndex].Values[0].ToString();
foreach (GridViewRow rowDocuments in gvDocuments.Rows)
{
//this will get you the inner/child gridview datakeys
gvDocuments.DataKeys[rowDocuments.RowIndex].Values[0].ToString();
}
}
Let me know if that works for you!
I have a gridview of messages that is populated by an object class. There is a list in the object so that for each message, there is a list of recipients. Problem is, right now the gridview is only displaying "Person[]" for each message. I want it to display as a count of the recipients in the list.
Any help would be appreciated.
HTML
<asp:GridView
ID="grdMsgSent"
runat="server"
CssClass="cellSpacing"
OnRowDataBound="grdMsgSent_RowDataBound"
AllowSorting="True"
EmptyDataText="You have not sent any messages."
AllowPaging="True"
PageSize="6"
OnPageIndexChanging="grdMsgSent_PageIndexChanging"
OnSorting="grdMsgSent_Sorting"
AutoGenerateColumns="False">
<Columns>
<asp:BoundField DataField="Recipients" HeaderText="Recipients" />
</Columns>
</asp:GridView>
C#
grdMsgSent.DataSource = listSentMsg.List;
grdMsgSent.DataBind();
For example, if you have a data column name called UserID, you can populate in grid view using Eval (DataBinding Expression). So your code will be like this in aspx page,
<asp:TemplateField HeaderText="UserID" Visible="false">
<ItemTemplate>
<asp:Label ID="lblUserID" runat="server" Text='<%# Eval("UserID") %>' />
</ItemTemplate>
</asp:TemplateField>
In C# Code Behind,
DataTable dataTable = new DataTable();
DataColumn dataColumn;
dataColumn = new DataColumn("UserID");
You can use a templatefield:
For array[], do this:
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%#Eval("Recipients.Length") %>' />
</ItemTemplate>
</asp:TemplateField>
For List, do this:
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%#Eval("Recipients.Count") %>' />
</ItemTemplate>
</asp:TemplateField>
I need to develop such a program in which the GridView's rows should be decided at run time.
i.e. I have a table in database called dealer capacity.
Dealer_ID Capacity
D0001 5
Now when the Dealer D00001 is selected from combo box the number of rows in grid view should be 5. I want to use the template field also.
My code for GridView is:
<asp:GridView ID="grdlicence" runat="server" DataKeyNames="Version_id" GridLines="None" BorderStyle="Solid" AutoGenerateColumns="false" AllowSorting="true"
CssClass="mGrid table"
PagerStyle-CssClass="pgr"
AlternatingRowStyle-CssClass="alt" >
<Columns>
<asp:BoundField DataField="Version_name" ItemStyle-CssClass="uppercase" ItemStyle-Width="150px" HeaderText="Version" HeaderStyle-HorizontalAlign="Left" />
<asp:BoundField DataField="Version_id" Visible="false" HeaderText="Version" HeaderStyle-HorizontalAlign="Left" />
<asp:TemplateField HeaderText="Price">
<ItemTemplate>
<center><asp:TextBox ID="txtprice" CssClass="alignments TextStyle" MaxLength="5" runat="server" ></asp:TextBox></center>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Licence Id">
<ItemTemplate>
<center><asp:TextBox ID="txtlicenceid" CssClass="alignments uppercase" runat="server" ></asp:TextBox></center>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Purchase Date">
<ItemTemplate>
<center><asp:TextBox ID="txtpurchasedate" onfocus="showCalendarControl(this);" CssClass="alignments TextStyle" runat="server"></asp:TextBox></center>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Expiry Date">
<ItemTemplate>
<center><asp:TextBox ID="txtexpirydate" onfocus="showCalendarControl(this);" CssClass="alignments TextStyle" runat="server"></asp:TextBox></center>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Upload File">
<ItemTemplate>
<center><asp:FileUpload ID="fileUpload" runat="server" /></center>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
You need to define PageSize for your GridView and remember to set AllowPaging to true for the GridView
GridView.PageSize Property
Gets or sets the number of records to display on a page in a GridView
control.
The default is 10.
You may see this article: GridView Paging Sample in ASP.NET
You can use the linq Take() and pass the number as parameter.
Updated according to the comment, use following code.
grdlicence.DataSourse= ds.Take(5);
grdlicence.DataBind();
I have a GridView, and The headers of the GridView changes every time I run my program. I want DropDownList in each and every cell of my GridView as shown in the attached image.
According to the image:
The values in the DropDownList under each header are = {1,2,3,4,5,6,7,8,9,10}.
Suppose I select value 2 from the DropDownList for KITCHEN2, When I hit on SAVE, I want 2 Lamps(Lamp1, Lamp2)(provided I have selected Lamp_profile in the first column of my GridView) to be updated in the database for Kitchen2. Similarly I want this event to happen at once for all the values that I have selected in GridView when I hit SAVE.
Therefore my Gridview is just a way to provide input, not bound to any datasource.
How do I achieve it. Any help would be useful. Thank you.
You can try with TemplateField
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" OnRowDataBound="GridView1_RowDataBound">
<Columns>
<asp:TemplateField HeaderText="">
<ItemTemplate>
<asp:DropDownList ID="DropDownList1" runat="server">
</asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Kitchen1">
<ItemTemplate>
<asp:DropDownList ID="Kitchen1_DropDownList" runat="server"></asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Kitchen2">
<ItemTemplate>
<asp:DropDownList ID="Kitchen2_DropDownList" runat="server"></asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Kitchen3">
<ItemTemplate>
<asp:DropDownList ID="Kitchen3_DropDownList" runat="server"></asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Kitchen4">
<ItemTemplate>
<asp:DropDownList ID="Kitchen4_DropDownList" runat="server"></asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
You must know how bind your data in code behind (You can use Eval.DataBinder)
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
DropDownList ddl = (DropDownList)e.Row.FindControl("DropDownList1");
DropDownList Kitchen1DropDownList = (DropDownList)e.Row.FindControl("Kitchen1_DropDownList");
....
}
}
You can use TemplateFields for the DropDownLists.
<asp:GridView ID="GridView1" AutoGenerateColumns="false" runat="server" >
<Columns>
<asp:TemplateField HeaderText="Col1">
<ItemTemplate>
<asp:DropDownList ID="Ddl1" runat="server"></asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Col2">
<ItemTemplate>
<asp:DropDownList ID="Ddl2" runat="server"></asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Col3">
<ItemTemplate>
<asp:DropDownList ID="Ddl3" runat="server"></asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
So i got this gridview on ASP.NET, it is about a gmail client, i made a template field with a check box that is for select several message at the same time, but first when you select a message i want to change the row background color, I already have my CSS but i dont know how to trigger the action or how to know what row was selected in the code. Here is the template of my grid:
<asp:GridView ID="inboxGrid" runat="server"
AutoGenerateColumns="false" CssClass="inbox" ShowHeader="false" BorderStyle="None" GridLines="None">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="chkSelect" runat="server" />
</ItemTemplate>
<ItemStyle Width="24" CssClass="check"/>
</asp:TemplateField>
<asp:TemplateField>
<ItemStyle CssClass="from" />
<ItemTemplate>
<asp:Label ID="lblFrom" runat="server"
Text = '<%# Eval("From") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemStyle CssClass="subject" />
<ItemTemplate>
<asp:Label ID="lblSubject" runat="server" Text='<%# Eval("Subject") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemStyle CssClass="date" />
<ItemTemplate>
<asp:Label ID="lblFecha" runat="server" Text='<%# Eval("Fecha") %>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
<RowStyle CssClass="inbox"/>
</asp:GridView>
Here is a solution using JQuery
Provided you add a CssClass named chk to asp:checkbox
<asp:CheckBox ID="chkSelect" runat="server" CssClass="chk" />
Here is the script
$(document).ready(function () {
$(".chk :checkbox").live("click", function () {
$(this).closest("tr").css("background-color", this.checked ? "#0000FF" : "");
});
});
Try this:
<asp:CheckBox ID="chkSelect" runat="server" OnClick="changeCss(this.id);" />
You can use toggleClass('CssClassName') to toggle the class on checkbox clicks:
function changeCss(ctrlId){
$(ctrlId).parent().parent().toggleClass('check');
}
The hierarchy is tr > td > checkbox, we go reverse to change the css of tr/row.