I have a gallery which holds a large number of thumbnail images and I want to show 6 at a time.
I have this working using the code below, but I can not get the images to display as 2 rows of 3 - it shows as 6 rows of 1.
I can get the desired result by using a datalist but that stops the pageindex function from working.
I'm sure there's an easy solution but I can't figure it out.
<asp:GridView id="GridView1" runat="server" AutoGenerateColumns="False" AllowPaging="True" PageSize="6" onpageindexchanging="PageIndexChanged" PagerSettings-Mode="NextPrevious" PagerSettings-NextPageText="Next" PagerSettings-PreviousPageText="Previous">
<Columns>
<asp:TemplateField>
<itemtemplate>
<asp:Image ID="Image2" runat="server" ImageUrl='<%# Eval("userID", "/imageUpload/Handler.ashx?userID={0}&image=2")%>' ></asp:Image>
</itemtemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
You want to use a ListView.. Look at MSDN here: http://msdn.microsoft.com/en-us/library/bb398790.aspx
Most particularly the GROUPING option.
You might want to consider using a simple asp.net repeater control, and render your items as DIVs. You can use CSS "float" directive to cause your DIVs to automatically "wrap" within their container, to efficiently fit the space (very similar to the way text "wraps" within a text box when it reaches the end of the line).
Because they wrap dynamically, float'd DIVs can be a little more user-friendly: if your user has a wide high-resolution screen, maybe the images render as a 1x6 row. If your user shrinks their browser window, the DIVs will automatically re-arrange themselves into a 3x2 grid.
You wouldn't get data-paging behavior for free, but it's not difficult to implement on its own.
You'd probably be happier with a different control (repeater, etc.)... Gridviews are limited in that they match your datasource row-for-row.
If you have to do this in a gridview for some reason, one option would be to modify the SELECT in your data source so that it put your images into 3 columns. You might be able to do that with a pivot and rownumber() function, or other ways. Once you did that, you'd modify your grideview (copy your template column two more times).
Related
I've got a standard ASP.NET 4.0 DataGrid control, it's declared like this:
<asp:DataGrid id="gridIssues" runat="server" EnableViewState="false" AutoGenerateColumns="False" OnItemDataBound="gridIssues_ItemDataBound" UseAccessibleHeader="true" ShowFooter="true">
I need to insert another row with the "More tickets" button at the bottom when count of rows exceeds a certain number (see screenshot).
http://dl.dropbox.com/u/347209/Screen%20Shot%202012-03-18%20at%206.45.53%20PM.png http://dl.dropbox.com/u/347209/Screen%20Shot%202012-03-18%20at%206.45.53%20PM.png
The preferred way to do this is to inject html like <tr><td colspan='%columns_count%'></td></tr> on the server side somehow. I can do this on the client side with JavaScript, but this solution is not flexible enough for me.
With databound controls, you should add rows to the datasource and then rebind. You can't easily add html directly.
Guys i have a job to display the list of subscribers as it is given in the image. I would like to know which data control in ASP.NET would be perfect for this scenario. I am just playing with Listview but i would like get inputs from the folks here. Thank You. Faraaz.
Update1: Should i use list of gridviews (nested inside a listview) here? Or can it be done with a single list view?
Obviously, grid-view would give you desired tabular layout (probably with the minimal efforts with Auto Generated Columns).
However, if paging, sorting, editing are note required then I would rather user Repeater control. The main reason being precise control over the mark-up. For example, grid-view does not support elements such as <colgroup> or <thead> (again, these elements may not be needed for your layout). If paging/sorting/editing etc is needed then ListView is better choice.
As far as, showing multiple tables goes, you can use nested controls - for example, repeater/list-view nesting a grid-view.
EDIT:
You are not very clear about the structure of data that you have and also about the exact layout that you want. So here's what I am assuming - you have a single List<Subscriber> containing both root subscribers and their children. And in the layout, you want one table for root subscribers followed by multiple tables - one for each root subscriber's children.
Mark-up will be something like
<asp:Repeater runat="server" ID="Outer" >
<HeaderTemplate>
<%-- Put a grid here for parent -->
<asp:GridView runat="server" ID="Root" DataSource='<%# GetRootSubscribers() %>' >
... column def etc
</asp:GridView>
</HeaderTemplate>
<ItemTemplate>
<!-- Put a grid here for children for current root subsriber -->
<asp:GridView runat="server" ID="Child" DataSource='<%# GetChildSubscribers(Eval("MemberID")) %>' >
... column def etc
</asp:GridView>
</ItemTemplate>
</asp:Repeater>
This will be supported by two code-behind methods such as
protected IEnumerable<Subscriber> GetRootSubscribers()
{
// I am not sure how you decide if a subscriber is a parent or not, I have just
// illustrated a condition where you have a parent id field to indicate the same
return allSubscribers.Where(s => s.ParentID == null);
}
protected IEnumerable<Subscriber> GetChildSubscribers(object memberId)
{
// I am not sure how you decide a child subscriber, I have just
// illustrated a condition where you have a parent id field to indicate the same
return allSubscribers.Where(s => s.ParentID.Equals(memberId));
}
// bind the outer repeater to root list
Outer.DataSource = GetRootSubscribers();
Outer.DataBind();
Hope this will give you some idea about how to proceed.
to me this is a GridView with usual header texts. The first bar above you can make with any other control or pure HTML right before the grid. ListViews are not grids and in my opinion should not be used when the final expected result is closer to a grid
I have a WebForms page with a treeview on the left and grids on the right. When the user clicks a treeview node, the corresponding grid is populated using a SqlDataSource and then displayed. The whole thing's in a single UpdatePanel.
Here's my setup:
<asp:GridView runat="server" ID='LocationsRowGrid' AutoGenerateColumns="false" DataSourceID="SqlDataSource_LocationRow">
<Columns>
<asp:TemplateField HeaderText="Location">
<ItemTemplate>
<asp:DropDownList runat="server" ID="NAME_LCTN" OnDataBound="dropdown_DataBound"
DataTextField="NAME_TO_LCTN" DataValueField="NAME_TO_LCTN" DataSourceID="SqlDataSource_LocationNames">
</asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Move Time (HR)">
<ItemTemplate>
<asp:TextBox runat="server" ID="STD_MOVE_TME_AMNT" Text='<%# Bind("STD_MOVE_TME_AMNT") %>'></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="LAST_UPDATED_BY" HeaderText="Updated By" Visible="true" />
<asp:BoundField DataField="LAST_REV_DT" HeaderText="Revision Date" Visible="true" />
</Columns>
</asp:GridView>
There are other (larger) grids, but this is basically the template. The largest grid has about twelve columns, about six of which are templatefields with textboxes and one of which is a templatefield with a dropdown list. The dropdown is databound to another table, which has about 150 elements. The grid itself has about 100 entries.
This is slow. It seems like the problem might have to do with the rendering of the HTML - the server isn't taking TOO long to respond, but the browsers (Chrome and IE) are nearly falling over trying to render the result. My first (obvious) guess is that rendering 100 html selects, each with > 100 elements, is going to slow - especially when done all at once inside tables tags like ASP.NET will do.
Does this seem like a reasonable guess at the cause of the slowness?
For this project I am (currently) not allowed to use jQuery (or presumably any other javascript library) and must justify any and all javascript I use. Basically, other developers don't want to need any real understanding of javascript to be able to maintain this application when I'm done with it.
Given these constraints, is there anything I can do to reduce the size of the returned HTML and/or the render times in the browser? Thanks in advance.
My thought is reduce the amount of bound data on the initial page and institute paging. Unless this is a "report", the user does not need to see every row at one time.
Another possibility is you have the page set to also use viewstate for the grid. If so, you are consuming time in the bind to create the viewstate prior to rendering (at least in the default situation).
Beyond that, I agree with #n8wrl that you need to troubleshoot by isolating whether it truly is the rendering that is the issue. I would probably do this through tracing rather than turning things off, but you do have to make sure the problem is the rendering. Another control, like a repeater, may work, but I only see this as a benefit with something like CSS, which reduces the amount of tagged data to produce output.
Compressing the response stream in IIS can also speed things up. Rendering time will still be the same, but you will eliminate the time to send the HTML to the browser, which is at least part of your problem.
Several thoughts for you:
'Turn off' the rendering to see how much of the response time is in server-side querying. You can do this by commenting out DataSoource= statements.
Browsers tend to wait until an entire table has made it before rendering any of it. You might try different layouts such that not everything is in a single table. Maybe a repeater where each item is a stand-alone table? Each can then render as the markup appears.
You can start to get a lot more fancy with jQuery and AJAX to page your content. Instead of 100 rows maybe 10 rows with page 1, 2, 3... links?
The default ASP.NET Dynamic Data template by default uses a GridView to display the menu repeating vertically. This doesn't look particularly well. I'm wondering if there is either (a) a way to get the gridview repeating horizontally or (b) use another control that allows horizontal repeating.
A DataList can be used :)
You set an ItemTemplate to specify how the items should be displayed and set the RepeatDirection to Horizontal, bind it to your Dynamic data source and you are done :D
Additionally you can specify the number of columns to be repeated through the RepeatColumns attribute.
This page (scroll down towards the end) has got some examples on how to use a DataList
http://msdn.microsoft.com/en-us/library/7efxhktc.aspx
This is a simple process. In our code-behind file we have to wire up our Dynamic Data connection like so:
Menu1.DataSource = visibleTables
Menu1.DataBind()
Then we create a DataList like so:
<asp:DataList ID="Menu1" runat="server"
CellPadding="3" GridLines="Vertical"
HorizontalAlign="Center" CssClass="DDGridView" RepeatDirection="Horizontal"
ItemStyle-CssClass="td" HeaderStyle-CssClass="th" >
<ItemTemplate>
<asp:DynamicHyperLink ID="HyperLink1" runat="server"><%# Eval("DisplayName")%></asp:DynamicHyperLink>
</ItemTemplate>
</asp:DataList>
You can see that I've utilized (temporarily) the css classes from the default gridview to provide uniform layout/display elements.
I'm hoping someone can help me with a question I have about images and GridView controls in ASP.Net 2.0.
I'm trying to put together a photo album application as a learning exercise which uses a GridView control with two columns. Column one will display the image (using an image column type) based on a URL held in the database I am using while column two will display some details about the image such as date, time, location, people etc.
This seems to works ok at the moment, however all the images are of the same size regardless of their orientation (portrait\landscape) which means that only some of the photos appear properly and no all crushed up. Is there a way to adjust the properties of the image column so that it will always show the photo correctly based on its orientation? Or a reduced size while maintaining the aspect of the image?
I have no experience with the ImageField column type I assume you are using.
You could certainly just use a TemplateField and an img tag (without specifying width or height) to address this.
<asp:TemplateField>
<ItemTemplate>
<img src='<%# Bind("URLFromDB") %>' runat="server" />
</ItemTemplate>
</asp:TemplateField>
You can query the image properties, then change your picture container accordingly. This will need to be done in the RowDataBound event.