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.
Related
Just ran across a weird thing. We have a page with items rendered in a Repeater. The items in the list have one panel for display and a PlaceHolder for edit mode where controls are added in the item data binding.
We have some client side code working with the fields that got added, and the code was expecting the ids to follow the same container structure you usually see, but for some reason, one level is getting skipped and I don't know why.
With the template below, you'd have the outer panel with an id like ...Repeater_ctl46_ctl100_Display. The PlaceHolder itself doesn't render, nor get included in the id structure in the html, but the id of a HiddenField added to the EditPlaceHolder ends up like ...Repeater_ctl46_ctl100_valueHidden.
The _Display level just doesn't appear. This threw off our client side script because it was expecting the outer panel container to be reflected in all the child controls in the edit template, and it was using that to look them up.
Anyone know why the containing Panel wouldn't be in the id hierarchy?
<ItemTemplate>
...
<asp:Panel ID="Display" runat="server">
<asp:Panel ID="ViewPanel" runat="server"><asp:Label ID="ValueLabel" runat="server" /></asp:Panel>
<asp:PlaceHolder ID="EditPlaceHolder" runat="server" />
</asp:Panel>
<asp:Panel ID="ModButtons" runat="server"><asp:LinkButton ID="EditButton" Text="<%$ Resources:Messages,Edit %>" runat="server" /></asp:Panel>
...
</ItemTemplate>
Okay, after a lot of digging, asp:Panel does not implement INamingContainer, which is why the Panel is not participating in the id naming conventions.
INamingContainer is just a marker interface; it has no properties or methods associated.
So if you want a Panel that can participate in naming conventions, you can make a little derivation and use that instead:
public class NamingPanel : Panel, INamingContainer
{...}
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 use Microsoft.SharePoint.WebControls.SPGridView control to write out data.
Filtering is allowed for grid.
Columns contain templated column, it define ItemTemplate and HeaderTemplate:
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:LinkButton ID="linkTitleHeader" runat="server" Text="TitleHeader1"
CommandName="Sort" CommandArgument="Title"></asp:LinkButton>
</HeaderTemplate>
<ItemTemplate>
some text
</ItemTemplate>
</asp:TemplateField>
</Columns>
It works fine, shows header as link, its performs sorting by click, but filter menu
show on separate row:
i expect that it shows as:
I already try with no result:
Leave Text property empty and define other properties
Set Microsoft.Sharepoint.WebControls.Menu Text programmaticaly after
databind
Set link text by javascript
Have any ideas how to join Menu with LinkButton ? Thanks.
You must also specify the properties of SPGridView : FilterDataFields, FilteredDataSourcePropertyName, FilteredDataSourcePropertyFormat. Maybe this article will help you link
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).