I am trying to create a view with multiple product listing in it. An example is below of how the product listing should look like. I am not sure if I should use a table and create a new table for each new product or what. I am not a very good ASP.NET developer and I am not sure how to approach this.
Basically if I have 10 results I need to display 10 of these in a list and each button and image is different based on each product result.
The source of data is from another class that was built and runs through a foreach for each product. Any guidance on this would be helpful. I just think I need to be pointed in the right direction because I tried it with a table and it wasn't working out to well.
Using GridView
<asp:GridView runat="server" ID="myGrid"
OnRowCommand="MyGrid_RowCommand">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<img src='<%# Eval("SmallImageUrl") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<div>Title: <%# Eval("Title") %> </div>
<div>Weight: <%# Eval("Weight") %> </div>
<asp:Button runat="server" ID="GetOfferButton" CommandArgument='<%# Eval("OfferID") %>'></asp:Button>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Assuming you have a collection of Products e.g. List, or DataTable of Product etc., and your collection has these fields
class Product
{
//property Title
//property SmallImageUrl
//property Weight
}
You can have
myGrid.DataSource = <Replace with List of Products collection>;
myGrid.DataBind();
Maybe you can try using asp.net table and just add rows with the images dynamically once you iterate your results..check out the control here:
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.table.aspx
and here you have an example to add rows dynamically:
http://msdn.microsoft.com/en-us/library/7bewx260%28v=vs.100%29.aspx
in each row you can put the controls that you want...
Related
List<MasterBook> listOfBooks = new List<MasterBook>();
after i put the masterbook objects which by the way have 3 fields( name,id and active ) into the list
GridView1.DataSource = listOfBooks;
GridView1.DataBind();
in the web form
<Columns>
<asp:TemplateField HeaderText="Book Name">
<ItemTemplate>
<asp:Label ID="BookNameText" runat="server"
Text="<%#Container.DataItem%>">
</asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
the problem is that i want to display the bookmaster's name in the gridview column
this code print bookmaster in the column how can i make it type the name
Change:
<%#Container.DataItem%>
To:
<%#Eval("name")%>
Cast it to MasterBook:
Text="<%# ((MasterBook) Container.DataItem).Name %>">
The quick, dirty hack workaround is to overload the ToString() method of your MasterBookclass in order to return that name. Commit seppuku afterwards if you do it.
The elegant and graceful way is to make an object datasource. That way you can bind the grid view's columns to the objects' properties. In the case of a DataList or other templated data controls, you can bind your objects' properties to the data control's child controls in their templates.
The middle path is in hutchonoid's answer: evaluate a property of the object, not the object itself.
Use this sintax:
<asp:Label ID="BookNameText" runat="server"
Text="<%# ((MasterBook)Container.DataItem).Name %>">
I'm wondering if it is possible to format a Grid View like the pattern below
Usual Grid View:
Name Address Age Gender <--- Fields Name
Example Example Example Example <--- Values
What I want to look like
"Fields" "Values"
Name Example
Address Example
Age Example
Gender Example
Any thought will be highly appreciated
you should look into using a repeater.
I think that GridView was simply not meant to be used that way. Usually, you will display several items in it and if those items are too many you will end up with the horizontal scrolling mistake (also, some nice arguments here).
If you are showing only one record, you should use a DetailsView control, which:
Displays the values of a single record from a data source in a table,
where each data row represents a field of the record. The DetailsView
control allows you to edit, delete, and insert records.
I got an Answer using this Codes:
<asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="False" >
<Columns>
<asp:TemplateField HeaderText="">
<ItemTemplate>
Name: <asp:Label ID="Label1" runat="server" Text='<%# Eval("Name") %>'></asp:Label><br />
Address: <asp:Label ID="Label2" runat="server" Text='<%# Eval("Address") %>'></asp:Label><br />
Postcode: <asp:Label ID="Label3" runat="server" Text='<%# Eval("Postcode") %>'></asp:Label><br />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
I have created a dropdown list in a DetailsView control
I want to make that dropdown have multiple columns. Is that possible? If So how?
I've done a lot of searching and cant seem to find the solution.
Below is the code for my dropdown template:
<asp:TemplateField HeaderText="Division" SortExpression="fDivisionID">
<EditItemTemplate>
<asp:DropDownList
ID="DivisionDropDownList"
runat="server"
DataSourceID="DivisionSqlDataSource"
DataTextField="DivisionName"
DataValueField="DivisionID"
Text='<%# Bind("fDivisionID") %>'>
</asp:DropDownList>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Bind("DivisionName") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
How do I add another column to that.. such as "Location"..
Thanks in advance
There are I think three ways actually.
Add two columns in your Select statement when fetching from database like below. or from here
Select Column1 + ' ' + Column2 From Yourtable
You can use third party controls.
Jquery Also supports this feature Here
I have a student enrollment gridview populated with Enrollment objects. The Enrollment object has student Id. With that Id, I am populating 2 columns (from 3 properties of Student object) of enrollment gridview.
Right now, I am doing it with below code. This means 3 round trips to database for the same object, which is so very bad. How can I use the same object to get the 3 properties?
<asp:TemplateField HeaderText="Student Name">
<ItemTemplate>
<asp:Label ID="lblName" runat="server" Text='<%# string.Format("{0} - {1}", StudentProfile.GetStudentProfileById(Convert.ToInt32(Eval("StudentId"))).FirstName, StudentProfile.GetStudentProfileById(Convert.ToInt32(Eval("StudentId"))).Surname) %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Student DOB">
<ItemTemplate>
<asp:Label ID="lblDOB" runat="server" Text='<%# StudentProfile.GetStudentProfileById(Convert.ToInt32(Eval("StudentId"))).DateOfBirth %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
Edit: FYI, I have to deal with updating the gridview rows which will involve adding textboxes and so to each row. Can you please keep the answers apt to this point?
Thank you very much!
The way you are binding data to the gridview is wrong. You need to get the Data in an Object/Collection and then bind that data as a DataSource to your GridView.
Take a look here Displaying Data With the ObjectDataSource and look at this as well Querying Data with the SqlDataSource Control
I am creating a web interface which currently reads data in from an XML data file, parses it into an array of Objects, after which I bind it to the data source of a Gridview. I then use and to retrieve the data I want from the objects for each column.
However, I am at the point that I would like to have multiple tabs in this gridview, possibly controlled by different link buttons. Each tab would show a different set of columns.
What would be the best way to implement this? Do I need to have three separate GridViews in my page, and just show the one for which the user selected (based on the click to the link button), while hiding all the others? This seemed like it might be unnecessarily slow. Is it possible to do via one GridView?
Right now the entire GridView is contained in an AJAX update panel, with the code below:
<asp:Panel id="searchResultsGrid" runat="server" CssClass="searchResultsGrid">
<asp:GridView id="gridViewSearchResults" runat="server" AutoGenerateColumns="false"
AllowPaging="True" AllowSorting="True"
PageSize="25" Width="920" PagerSettings-Visible="false">
<Columns>
<asp:templatefield headertext="Test Column 1 Tab 1" HeaderStyle-HorizontalAlign="Left">
<itemtemplate>
<%# GetColumnInfo() %>
</itemtemplate>
</asp:templatefield>
<asp:templatefield headertext="Test Column 2 Tab 1" HeaderStyle-HorizontalAlign="Left">
<itemtemplate>
<%# GetColumnInfo() %>
</itemtemplate>
</asp:templatefield>
<asp:templatefield headertext="Test Column 3 Tab 1" HeaderStyle-HorizontalAlign="Left">
<itemtemplate>
<%# GetColumnInfo() %>
</itemtemplate>
</asp:templatefield>
<asp:templatefield headertext="Test Column 4 Tab 1" HeaderStyle-HorizontalAlign="Right" ItemStyle-HorizontalAlign="Right">
<itemtemplate>
<%# GetColumnInfo() %>
</itemtemplate>
</asp:templatefield>
<asp:templatefield headertext="Test Column 5 Tab 1" HeaderStyle-HorizontalAlign="Right" ItemStyle-HorizontalAlign="Right">
<itemtemplate>
<%# GetColumnInfo() %>
</itemtemplate>
</asp:templatefield>
<asp:templatefield headertext="Test Column 6 Tab 1" HeaderStyle-HorizontalAlign="Right" ItemStyle-HorizontalAlign="Right">
<itemtemplate>
<%# GetColumnInfo() %>
</itemtemplate>
</asp:templatefield>
<asp:templatefield headertext="Test Column 7 Tab 1" HeaderStyle-HorizontalAlign="Right" ItemStyle-HorizontalAlign="Right">
<itemtemplate>
<%# GetColumnInfo() %>
</itemtemplate>
</asp:templatefield>
</Columns>
<RowStyle CssClass="searchResultEntry borderTopGrey" />
<EmptyDataTemplate>
<p class="searchResultsEmpty">
<asp:Label ID="lblSearchResultsEmpty" runat="server" Text="No records matched the selected criteria. Please revise your criteria and try again." CssClass="searchResultsEmpty"></asp:Label>
</p>
</EmptyDataTemplate>
</asp:GridView>
</asp:Panel>
This is the code I currently have for one gridview, with the content of one tab. Based on jdk's response, how would I go about adding other TemplateFields for the second and third tabs, and then switching between displaying the different sets when a tab link button is clicked?
Thanks!
The page ViewState string can become very (unnecessarily) large when multiple GridViews are present (view its resulting HTML source code and search for "__VIEWSTATE" to see it). You can use one GridView control, like you said, and swap appropriate data into it depending on which LinkButton (a.k.a. "tab") was recently clicked.
If this is also a paginated data scenario, you can store a simple array of three integers in ViewState representing the current page number of each of the three sets of data, so you can display the most recent page of data when swapping them in and out of the one DataGrid control.
However if bandwidth is not a concern (i.e. if the page doesn't receive a lot of hits or runs on an Intranet) then don't worry as much about optimizing it.
I've done similar things before. I used template columns for the GridView. And put a Ajax control toolkit tab control in the GridView.
I would probably create a Custom Composite Control (as the tabbed-container) and add the grid-view to that. I would not bundle it into one.