I need to create a dynamically populated two-dimensional array of Button or ImageButton controls.
I want to be able to set the number of buttons in a row.
The table will receive the data from a DataSource control or from code behind, and populate each cell with a Button control with the corresponding value.
For example, if I set then number of columns to 3:
Value1 Value2 Value3
Value4 Value5 Value6
Value7 Value8
What ASP.NET control is best for implementing this?
Thank You.
You can do it by using Repeater Control.
.aspx Page
<div style="width:269px">
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<asp:Button runat="server" ID="btn" Text='<%# Eval("Value") %>' />
</ItemTemplate>
</asp:Repeater>
</div>
Here you can set the width of div upon your requirment.
.cs page
DataTable dt = new DataTable();
dt.Columns.Add("Value");
dt.Rows.Add("Value1");
dt.Rows.Add("Value2");
dt.Rows.Add("Value3");
dt.Rows.Add("Value4");
dt.Rows.Add("Value5");
dt.Rows.Add("Value6");
dt.Rows.Add("Value7");
dt.Rows.Add("Value8");
Repeater1.DataSource = dt;
Repeater1.DataBind();
The output will be look like this
You can use DataList for this. RepeatColumns will help you to set the no. of columns.
<asp:DataList ID="dlButtons" runat="server" RepeatDirection="Horizontal" RepeatColumns="3">
<ItemTemplate>
<asp:Button runat="server" ID="button" Text='Your Text' />
</ItemTemplate>
</asp:DataList>
Related
I have a repeater control on a page that I populate with 10 records from the database. There is a more button on the page; both are inside an update panel. The more button brings the next 10 records from the database. All I want to do is to append the new 10 records to the existing 10 records in the repeater. How would I do this?
I need it to work like Twitter and Facebook and load server side controls while appending new records to repeater control without paging.
This is my .aspx code:
<asp:repeater id="repStd" runat="server" onitemcommand="repStd_ItemCommand"
onitemdatabound="rptCore_ItemDataBound">
<HeaderTemplate>
<asp:Label ID="lnkStdName" runat="server" CommandName="Name"
CssClass="hrefclass">Name</asp:Label>
</HeaderTemplate>
<ItemTemplate>
<div class="headParent" id="STHeader" runat="server">
<asp:Label ID="lblStdName" runat="server"
Text='<%# DataBinder.Eval(Container.DataItem, "Project_Name") %>'></asp:Label>
</div>
<div class="contentParent" id="STcontent" runat="server">
<asp:UpdatePanel ID="UpdatePanelST" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
<ContentTemplate>
<cc1:AsyncFileUpload ID="STAsyncFileUpload_Pdf" runat="server" Width="500px"
CompleteBackColor="White" OnClientUploadError="STuploadError" OnClientUploadComplete="STuploadComplete"
OnClientUploadStarted="STUploadedStartedPdfFile" UploadingBackColor="#CCDDEE"
UploaderStyle="Modern" ThrobberID="STinProgress"
OnUploadedComplete="STPdf_FileUploadComplete" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</ItemTemplate>
</asp:repeater>
My itemdatabound:
public void rptCore_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
//load controls data and calculations here.. like fileupload control etc
}
According to your requirement use for/Foreach loop by calling table/div structure in place of repeater..
For your logic call 10 records from last index and add in your table/div.
This will solve your problem and it is very effective without making any performance issue..
For eg. follow below logic -
DataTable dt = GetYourRows();
String html = "";
foreach(DataRow dr in dt.Rows)
{
html += "<div>"+dr["column"].ToString();+"</div>";
}
then use your html anywhere in your existing HTML code
<asp:GridView ID="GridView1" runat="server">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="LinkButton1" runat="server" OnClick="lclick">Buy</asp:LinkButton>
</ItemTemplate>
<edititemtemplate>
<asp:Textbox runat="server" id="txt"/>
<edititemtemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Is it possible to edit the GridView without the edititem Template?
I have done this before and I can only explain what I did
To make sure my edit controls is part of viewstate I added an empty form to the bottom of my page
<div id="myeditform">
<table>
<tr>
<td><asp:HiddenField runat="server" ID="myRowId" />
</td>
<td>... other controls </td>
<td>... Save button -- </td>
</tr>
<table>
</div>
The tr(s) has to match the number of columns in your grid or you can use colspan
Then
use jQuery or javascript to get the row (e.g. the nearest parent to the edit link clicked),
get the td(s) and pass the value of each td to the respective control in your edit form.
replace your <tr> with the content of the table in your edit form
when save is clicked, refresh the page to update gridview
In ASP.NET usign C#, .NET3.5 F/W
Hi,
I've a Gridview with template columns containing textbox and Label controls.
By code through some queries and stored procedures i got some data to a datatable. Now i want to pass this datatable column field or names to the Gridview Label controls.
How can i set the datatable column header names to gridview label control of Header Template?
It's called Binding here is link
<asp:TemplateColumn>
<ItemTemplate HeaderText="PersonId">
<asp:Label id=Label1 runat="server"
Text='<%# Eval("NameOfColumnt") %>'>
</asp:Label>
</ItemTemplate>
</asp:TemplateColumn>
Try this
<asp:TemplateColumn >
<ItemTemplate>
<asp:Label id=Label1 runat="server"
Text='<%# DataBinder.Eval(Container,EmployeeName") %>'>
</asp:Label>
</ItemTemplate>
</asp:TemplateColumn>
For this to work you will have to give your grid view a data source:
yourGridView.DataSource = yourDataTable;
yourGridView.DataBind();
After you do this, you just have to link each control in template columns to column in datatable, for example:
<HeaderTemplate>SomeText</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="a" Text='<%# Eval("nameOfTheColumn") %>' runat="server"></asp:Label>
</ItemTemplate>
EDIT:
Regarding your other question, I suggest you to add bound fields to your grid view dynamically rather then right away in the aspx. Something like this:
foreach (DataColumn column in dt.Columns)
{
BoundField nameColumn = new BoundField();
nameColumn.DataField = column.ColumnName.ToString();
nameColumn.SortExpression = column.ColumnName.ToString();
nameColumn.HeaderText = column.ColumnName.ToString();
gridView.Columns.Add(nameColumn);
}
This way you don't have to know exactly how many columns you have, and have the ability to name them as they are in the data table.
If we add a customer header to the gridview, will it add extra row?
Currently I have a gridview with four columns and, when I add a custom header gridview coming with a five rows.
My code looks like this...
<asp:TemplateField HeaderText="" ItemStyle-Width="4%" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center">
<HeaderTemplate>
<asp:DropDownList ID="Select" runat="server">
<asp:ListItem>Country</asp:ListItem>
<asp:ListItem>Region</asp:ListItem>
<asp:ListItem>Title</asp:ListItem>
</asp:DropDownList>
</HeaderTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="" ItemStyle-Width="4%" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:HiddenField ID="Id" Value='<%#Eval("id")%>' runat="server" />
<asp:Literal ID="ltrImage" runat="server"></asp:Literal>
</ItemTemplate>
</asp:TemplateField>
and three other TemplateFields...
Is there any problem of adding header this way? Any other way to add customer header without having this issue?
My desired output should look like this
Search Result Search By (Dropdownlist)
Data column1 Data column2 Data column3 Data column4
The one I am getting now is
Sort By (Dropdownlist)
Data column1 Data column2 Data column3 Data column4
Could anyone help if have an idea?
Thanks in advance
You just added another column with custom header to your gridview. If you want to customize a header of the first column, just customize the header of your first template field:
<asp:TemplateField HeaderText="" ItemStyle-Width="4%" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center">
<HeaderTemplate>
<asp:DropDownList ID="Select" runat="server">
<asp:ListItem>Country</asp:ListItem>
<asp:ListItem>Region</asp:ListItem>
<asp:ListItem>Title</asp:ListItem>
</asp:DropDownList>
</HeaderTemplate>
<ItemTemplate>
<asp:HiddenField ID="Id" Value='<%#Eval("id")%>' runat="server" />
<asp:Literal ID="ltrImage" runat="server"></asp:Literal>
</ItemTemplate>
</asp:TemplateField>
If this dropdownlist is too big or if you want add some additional text in the header, you can always create HeaderTemplate for other TemplateFields of merge some of the column's headers in code behind (example for "merging" two first headers, Id of the gridView is gridView1):
protected void gridView1_PreRender(object sender, EventArgs e)
{
int indexOfColumnToSpan = 0;
int indexOfColumnToRemoveHeader = 1;
gridView1.HeaderRow.Cells[indexOfColumnToSpan].ColumnSpan = 2;
gridView1.HeaderRow.Cells.RemoveAt(indexOfColumnToRemoveHeader);
}
well, you have not actually added a header row, but a header column .. which is basically just another column with more controls ..
why dont you place your DropDownList before your GridView, and then you can write some code behind handling the DropDownList_SelectedIndexChanged event to sort the Data ?
I have implemented this without using the filters within the GridView. Then you can handle the events separately, and populate the GridView accordingly.
What you are actually adding is a column, instead of a row. That's why you are getting that result.
Hope this helps!
I want to use the gridview command button (edit) with the jquery not postback. Please help me.
Place an asp button in another item template and set its CommandName property to edit. This will work simillar to default edit button in grid view. Then you can call javascript function and perform your logic.
See the code below:
Remove the following line to avoid default edit button:
<asp:CommandField ShowEditButton="true" ShowCancelButton="true"/>
Add the following instead:
<asp:TemplateField HeaderText="headerName" >
<ItemTemplate>
<asp:Button ID="Button1" CommandName="edit" runat="server" Text="Button" />
</ItemTemplate>
</asp:TemplateField>
Hope this helps you..
I think you can do it in a gridview.What you need is to columns with textbox and display the data in the textbox and needs a button at the end .
<asp:TemplateField >
<HeaderTemplate>
Values
</HeaderTemplate>
<ItemTemplate>
<asp:textbox ID"txt" runat="server" cssclass="abc" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Spares">
<HeaderTemplate>
Edit column
</HeaderTemplate>
<ItemTemplate>
<asp:button id="abc" runat="server" text="save" cssclass="pqr" />
<input type="hidden" runat="server" value="" />
</ItemTemplate>
</asp:TemplateField>
Store the Id in a hidden field and it is possible to get the value of text box and hidden feild via jquery.
gridview will be rendered as html table and using parent() we can able to find the clicked row and after finding the row u can use find() to find the values in the txtbox and hidden feild. Use $ajax() or $post() to send data to server.