Span columns in datagrid - asp.net

I have a datagrid where some of the text needs to span multiple columns. Here is an example of what I need.
Row # Image Name Price Date
1 xxx My Name $99 1/1/2009
xxx
xxx Long description goes here
2 xxx name 2 $99 1/1/2009
xxx
xxx Another long description
Is something like this possible in Asp.Net using a datagrid? Any suggestions on how to do this?

You might find it easier to use an ASP.Net Repeater instead, and have multiple rows per DataItem. That way, you get complete control over the layout.
It's technically possible to use the ASP.Net GridView to do it, but I suspect this wouldn't be the most elegant solution here. The GridView (and Datagrid) were designed out of the box for one row per DataItem.
Here is some sample ASP.Net containing a Repeater that illustrates an approach that might work for you:
<asp:Repeater ID="Repeater1" runat="server">
<HeaderTemplate>
<table>
</HeaderTemplate>
<tr>
<th>
Col 1
</th>
<th>
Col 2
</th>
<th>
Col 3
</th>
</tr>
<ItemTemplate>
<tr>
<td>
<%# Eval("Field1") %>
</td>
<td>
<%# Eval("Field2") %>
</td>
<td>
<%# Eval("Field3") %>
</td>
</tr>
<tr>
<td>
<%# Eval("Field4") %>
</td>
<td colspan="2">
<%# Eval("Field5") %>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
Note that the ItemTemplate contains two HTML table rows, the second of which contains a td with a colspan of 2.
Hope that helps a little.

Do you have to use a DataGrid?, I would suggest the ListView control. It has all the functionality you need and uses templates for full UI control.

Related

Nested asp.NET ListView

I have a structure that looks like this:
Strategies 1..n Objectives
Objective 1..n Initiatives
Each are in a different table and linked through foreign keys.
I want to be able to nest my results in a few list view (3 to be exact).
When I try to create a dynamic ID for my nested ListView, the code doesn't compile anymore.
<asp:ListView ID="ObjectivesListView" runat="server">
<LayoutTemplate>
<table style="width:100%">
<tr style="align-content:flex-start">
<th>#</th>
...
</tr>
<asp:PlaceHolder ID="itemPlaceholder" runat="server" />
</table>
</LayoutTemplate>
<ItemTemplate>
<tr >
<td onclick='toggleDiv("obj",<%#Eval("ID") %>)'>
<%# Container.DataItemIndex + 1 %>
</td>
...
</tr>
<tr id='obj<%#Eval("ID") %>' class="hide">
<td colspan="7">Another item
<!-- New list view with the initiative for Objective x -->
<asp:ListView runat="server" ID="initiativeListView">
<LayoutTemplate></LayoutTemplate>
<ItemTemplate></ItemTemplate>
</asp:ListView>
<!-- New list view with the initiative for Objective x -->
</td>
</tr>
</ItemTemplate>
</asp:ListView>
I have tried to create a dynamic ID for my second listView by doing ID="initiativeListView<%#Eval(ID)%>"> and that causes the error.
I am also running in a sharepoint environment and limited to the ASP classes. I wanted to preload and display it when the user clicks on the row.
Any Ideas?
In your child control instead of Eval(ID) you need to use
Eval(Container.Parent, "DataItem.ID")%
in first child and
Eval(Container.Parent.Parent, "DataItem.ID")%
in the second child of your nested controls

ASp.Net repeater control : error showing on binding repeater

It shows error "Non-invocable member 'System.Web.UI.WebControls.RepeaterItem.DataItem' cannot be used like a method.
for the <%# Container.DataItem("CostPageDescription")%>
my code below,
<td> Cost Page Description</td>
<td> Vendor Name</td>
<td> Bill Type</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td> <%# Container.DataItem("CostPageDescription")%></td>
<td> <%# Container.DataItem("VendorName")%> </td>
<td> <%# Container.DataItem("BillType") %> </td>
</tr>
<tr>
USE LIKE THIS
<td> <%# eval("CostPageDescription")%></td>
and at one place u left it blank, so make that correct
Use this:
<%# Eval("CostPageDescription") %>
or this:
<%# DataBinder.Eval(Container.DataItem, "CostPageDescription") %>
First one is just a simplification of the second.

Foreign key table field not displaying within a standalone dynamic data enabled list view

I've gone through hundreds of Google result pages, trying to find an answer for this over the past couple of days.
Using a standalone dynamic data page to display a table, using an EntityDataSource, with one of the fields being a foreign key to a sub-table. I want it to display the value from the sub-table. I've been playing with a simplified case using the NorthWinds database (see code below). If I assign the DynamicControl a DataField="Supplier", it displays the sub-table/class name ("DAL.Supplier") instead. If I try assigning DataField="Supplier.CompanyName", it errors with "The table 'Product' does not have a column named 'Supplier.CompanyName'". Since I want to take advantage of dynamic data's editing features, using a templated field with <%# Eval("Supplier.CompanyName") %> is out.
Is this just not possible with a stand-alone dynamic data page? It clearly works fine within a fully scaffolded system. Or am I (hopefully) just missing something? Thank you.
Test.aspx
<%# Page Title="" Language="VB" MasterPageFile="~/Master/Site.master" AutoEventWireup="false" CodeFile="Test.aspx.vb" Inherits="Test" %>
<asp:Content ID="Content3" ContentPlaceHolderID="BodyContent" Runat="Server">
<asp:ListView ID="ListView1" runat="server" DataSourceID="theDataSource" DataKeyNames="ProductID">
<ItemTemplate>
<tr>
<td>
<asp:DynamicControl runat="server" DataField="ProductID" Mode="Edit" />
</td>
<td>
<asp:DynamicControl runat="server" DataField="ProductName" Mode="Edit" />
</td>
<td>
<asp:DynamicControl runat="server" DataField="Supplier" Mode="Edit" />
</td>
<td>
<asp:DynamicControl runat="server" DataField="UnitPrice" Mode="Edit" />
</td>
<td>
<asp:DynamicControl runat="server" DataField="Discontinued" Mode="Edit" />
</td>
</tr>
</ItemTemplate>
<LayoutTemplate>
<table runat="server">
<tr runat="server">
<td runat="server">
<table id="itemPlaceholderContainer" runat="server" border="0">
<tr runat="server">
<th runat="server">
ProductID
</th>
<th runat="server">
ProductName
</th>
<th runat="server">
Supplier
</th>
<th runat="server">
UnitPrice
</th>
<th runat="server">
Discontinued
</th>
</tr>
<tr id="itemPlaceholder" runat="server">
</tr>
</table>
</td>
</tr>
<tr runat="server">
<td runat="server">
</td>
</tr>
</table>
</LayoutTemplate>
</asp:ListView>
<asp:EntityDataSource ID="theDataSource" runat="server"
ConnectionString="name=NorthwindEntities"
DefaultContainerName="NorthwindEntities" EnableDelete="True"
EnableFlattening="False" EnableInsert="True" EnableUpdate="True"
Include="Supplier"
EntitySetName="Products">
</asp:EntityDataSource>
</asp:Content>
Test.aspx.vb
Imports System.Web.DynamicData
Imports DAL
Partial Class Test
Inherits System.Web.UI.Page
Protected table As MetaTable
Protected Sub Page_Init(sender As Object, e As System.EventArgs) Handles Me.Init
Listview1.EnableDynamicData(GetType(Product))
table = theDataSource.GetTable()
Title = table.DisplayName
End Sub
End Class
Problem solved. When all of this had started, I had originally gotten the error message:
Could not determine a MetaTable. A MetaTable could not be determined for the data source 'EntityDataSource1' and one could not be inferred from the request URL. Make sure that the table is mapped to the dats source, or that the data source is configured with a valid context type and table name, or that the request is part of a registered DynamicDataRoute
Trying to track that down led me to getting rid of the asp:DynamicDataManager markup, and replacing it in the code-behind with:
Listview1.EnableDynamicData(GetType(Product))
table = theDataSource.GetTable()
That turns out to have led me down the proverbial rabbit hole... While it got rid of the MetaTable error, it inadvertently caused the problem I wrote about above. Many thanks to: http://daviworld.net/?tag=/DynamicDataManager who points out that this error message is actually caused by:
This is due to an issue with the Designer code generation. When you select a DataSource for the GridView control, it does not add the ContextTypeName Attribute to the EntityDataSourceControl.
Once I removed the lines of code above, and added back in the asp:DynamicDataManager to the markup, and then added a ContextTypeName="DAL.NorthwindEntities" to the EntitiyDataSource, everything now works as one would wish it to.
Yeah true what u said. im at the same place where u got stuck. am running from pillar to post with fire in my belly but i guess it might extinguish soon.
how can it be so screwed up that u cannot work outside the scaffolding mechanism, all u are really doing is borrowing a dynamicdatamanager so u can stay templatised across both their framework and your newly added framework.
the way i got into this hole is when i try to display multiple entities data on the same page. thumb of rule seems to be single entity , single page. whatever im on da error for now. give it another few days before i open up the bottle again.. let there be beer !!!

difference between item template and layout template

what is the difference between item template and the layout template. in layout template only we have information about the designing? or any thing else. i am unable to understand the item template.. please explain..!
In addition to this one i have query in project like this
SELECT TOP (1) ProductName, UnitPrice FROM Products ORDER BY NEWID()
here NEWID() means what? is it predefined function related to sqlserver? there is no any newid() function in my project which was downloaded. if it is predefined function then what it can do?
Thank you
The main layout of a ListView control is created by defining a LayoutTemplate. The LayoutTemplate will include controls that acts as a placeholder for the data like Table, Panel, Label or HTML controls like table, div, or span elements that have a runat attribute set to "server".
Item template is the main template which will show the data bounded to the ListView in a repeated manner. This template typically contains controls that are data-bound to data columns or other individual data elements. These two templates are mandatory.
GroupTemplate will be used to group the items. The EditItemtemplate, SelectedItemTemplate, InsertItemTemplate are shown at that particular operation like insert, edit, select. ItemSeparatorTemplate, GroupSeparatorTemplate are used to separate the individual items and group Items Separately.
Here this makes difference ItemPlaceholderID="itemPlaceholder"
<asp:ListView runat="server" ID="ListView1" ItemPlaceholderID="itemPlaceholder">
<LayoutTemplate>
<table border="0" cellpadding="1">
<tr style="background-color:#E5E5FE">
<th align="left"><asp:LinkButton ID="lnkId" runat="server">Id</asp:LinkButton></th>
<th align="left"><asp:LinkButton ID="lnkName" runat="server">Name</asp:LinkButton></th>
<th align="left"><asp:LinkButton ID="lnkType" runat="server">Type</asp:LinkButton></th>
<th></th>
</tr>
<tr id="itemPlaceholder" runat="server"></tr>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td><asp:Label runat="server" ID="lblId"><%#Eval("ID") %></asp:Label></td>
<td><asp:Label runat="server" ID="lblName"><%#Eval("FirstName")+"
"+Eval("LastName") %></asp:Label></td>
<td><asp:Label runat="server" ID="lblType"><%#Eval("Type") %></asp:Label></td>
<td></td>
</tr>
</ItemTemplate>
<AlternatingItemTemplate>
<tr style="background-color:#EFEFEF">
<td><asp:Label runat="server" ID="lblId"><%#Eval("ID") %></asp:Label></td>
<td><asp:Label runat="server" ID="lblName"><%#Eval("FirstName")+" "+
Eval("LastName") %></asp:Label></td>
<td><asp:Label runat="server" ID="lblType"><%#Eval("Type") %></asp:Label></td>
<td></td>
</tr>
</AlternatingItemTemplate>
</asp:ListView>
Reference links: reference site, code project reference
It looks like you're using the ListView control.
The ItemTemplate property only applies to the data item bound to the control. The LayoutTempate allows you to define the layout for everything else.
Let's say your wanted to render your data using a . your LayoutTemplate would contain your table definition with a single, empty row with ID "itemPlaceHolder"
<tr id="itemPlaceHolder" runat="server" />
Your item template would then define how your s should be rendered.

Push a new <tr> into a GridView?

What I'd like to do is create a second row that spans the others within a GridView. The idea is that it is data within the GridViewRow, say a long varchar() in col 4. But when translating to HTML, how would I put that in a second row?
<table>
<tr>
<td></td>
<th>ru sure?</th>
<th>date</th>
<th>category</th>
</tr>
<tr>
<td rowspan="2">edit</td>
<td>yes</td>
<td>"12/31/2009"</td>
<td>website feedback</td>
</tr>
<tr>
<td colspan="3"><textarea rows="3" cols="50"></textarea></td>
</tr>
</table>
I can take care of the cell output, but I don't know how to terminate one row and begin another. Logically, it still represents one row of data.
One techniquehack that I've used is to have the last regular column of the GridView be a TemplateField, and then put the extra row in there. For example, something like this:
<asp:GridView runat="server">
<Columns>
<asp:BoundField/>
<asp:BoundField/>
<asp:BoundField/>
<asp:TemplateField>
<ItemTemplate>
<%#Eval("category")%>
</td></tr>
<tr><td colspan="3">
<textarea rows="3" cols="50"></textarea>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Have you looked at the ListView control? It allows for some very complex layouts.
http://msdn.microsoft.com/en-us/library/bb398790.aspx

Resources