Hi:
This is my first try with Telerik controls, so please forgive me if I seem ignorant. I am trying to use the RadGrid to create a DataList-type look. I follow the example "Grid / ListView/DataList View" (http://demos.telerik.com/aspnet-ajax/grid/examples/programming/listview/defaultcs.aspx) from the demos, and I successfully displayed a grid. It looks rather odd, though, with one cell at the top of the form, then the "page counter control", then eleven cells showing below. (See the attachment.) Does anyone know what's happening here? Thanks!
Steve Smith
P.S. The aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
<link href="~/Styles/gridstyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
<Scripts>
<%--Needed for JavaScript IntelliSense in VS2010--%>
<%--For VS2008 replace RadScriptManager with ScriptManager--%>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
</Scripts>
</telerik:RadScriptManager>
<script type="text/javascript">
//Put your JavaScript code here.
</script>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
</telerik:RadAjaxManager>
<div>
<telerik:RadGrid ID="RadGrid1" DataSourceID="SqlDataSource1" AllowFilteringByColumn="true"
runat="server" GridLines="None" AllowPaging="true" AllowSorting="true"
PageSize="12">
<MasterTableView TableLayout="Fixed">
<PagerStyle Mode="NextPrevAndNumeric" />
<ItemTemplate>
<%# (((GridItem)Container).ItemIndex != 0)? "</td></tr></table>" : "" %>
<asp:Panel ID="ItemContainer" CssClass='<%# (((GridItem)Container).ItemType == GridItemType.Item)? "item" : "alternatingItem" %>'
runat="server" HorizontalAlign="Left">
<b><%# Eval("PCName")%></b>
<br />
<%# Eval("ProductName")%>
<br />
sku: 
<%# Eval("Sku")%>
<br />
Price: 
<%# Eval("Price")%>
<br />
CV: 
<%# Eval("CV")%>
</asp:Panel>
</ItemTemplate>
</MasterTableView>
<GroupingSettings CaseSensitive="false" />
</telerik:RadGrid>
</div>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:Database Connection String %>"
ProviderName="<%$ ConnectionStrings:Database Connection String.ProviderName %>"
SelectCommand="select ProductCategory.Name PCName, ProductName, Sku, ProductPricePlan.RetailPrice Price, ProductPricePlan.UnitComVol CV
from Product
join ProductCategory on Product.ProductCategoryID = ProductCategory.ProductCategoryID
join ProductPricePlan on Product.ProductID = ProductPricePlan.ProductID and ProductPricePlan.PricePlanID = 1"></asp:SqlDataSource>
</form>
</body>
</html>
This is my first try with Telerik controls, so please forgive me if I seem ignorant. I am trying to use the RadGrid to create a DataList-type look. I follow the example "Grid / ListView/DataList View" (http://demos.telerik.com/aspnet-ajax/grid/examples/programming/listview/defaultcs.aspx) from the demos, and I successfully displayed a grid. It looks rather odd, though, with one cell at the top of the form, then the "page counter control", then eleven cells showing below. (See the attachment.) Does anyone know what's happening here? Thanks!
Steve Smith
P.S. The aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
<link href="~/Styles/gridstyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
<Scripts>
<%--Needed for JavaScript IntelliSense in VS2010--%>
<%--For VS2008 replace RadScriptManager with ScriptManager--%>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
</Scripts>
</telerik:RadScriptManager>
<script type="text/javascript">
//Put your JavaScript code here.
</script>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
</telerik:RadAjaxManager>
<div>
<telerik:RadGrid ID="RadGrid1" DataSourceID="SqlDataSource1" AllowFilteringByColumn="true"
runat="server" GridLines="None" AllowPaging="true" AllowSorting="true"
PageSize="12">
<MasterTableView TableLayout="Fixed">
<PagerStyle Mode="NextPrevAndNumeric" />
<ItemTemplate>
<%# (((GridItem)Container).ItemIndex != 0)? "</td></tr></table>" : "" %>
<asp:Panel ID="ItemContainer" CssClass='<%# (((GridItem)Container).ItemType == GridItemType.Item)? "item" : "alternatingItem" %>'
runat="server" HorizontalAlign="Left">
<b><%# Eval("PCName")%></b>
<br />
<%# Eval("ProductName")%>
<br />
sku: 
<%# Eval("Sku")%>
<br />
Price: 
<%# Eval("Price")%>
<br />
CV: 
<%# Eval("CV")%>
</asp:Panel>
</ItemTemplate>
</MasterTableView>
<GroupingSettings CaseSensitive="false" />
</telerik:RadGrid>
</div>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:Database Connection String %>"
ProviderName="<%$ ConnectionStrings:Database Connection String.ProviderName %>"
SelectCommand="select ProductCategory.Name PCName, ProductName, Sku, ProductPricePlan.RetailPrice Price, ProductPricePlan.UnitComVol CV
from Product
join ProductCategory on Product.ProductCategoryID = ProductCategory.ProductCategoryID
join ProductPricePlan on Product.ProductID = ProductPricePlan.ProductID and ProductPricePlan.PricePlanID = 1"></asp:SqlDataSource>
</form>
</body>
</html>
4 Answers, 1 is accepted
0
Mark
Top achievements
Rank 1
Rank 1
answered on 06 Apr 2011, 04:02 PM
Am I using the RadGrid in a radical fashion?
0
Mark
Top achievements
Rank 1
Rank 1
answered on 06 Apr 2011, 10:15 PM
I've investigated this more thoroughly, and determined that the problem is caused by this line:
<%# (((GridItem)Container).ItemIndex != 0)? "</td></tr></table>" : "" %>
This causes the interesting effect, as I guess it is a "hack" of sorts. If you take it out, though, you get one cell on each line, which of course is not useful. Can anyone please suggest a better method?
Thanks,
Steve
<%# (((GridItem)Container).ItemIndex != 0)? "</td></tr></table>" : "" %>
This causes the interesting effect, as I guess it is a "hack" of sorts. If you take it out, though, you get one cell on each line, which of course is not useful. Can anyone please suggest a better method?
Thanks,
Steve
0
Accepted
Hello Mark,
Please add the code behind code of the demo in order to achieve the desired look:
However, I recommend the usage of the RadListView for displaying a custom layout.
I hope this helps.
Kind regards,
Mira
the Telerik team
Please add the code behind code of the demo in order to achieve the desired look:
protected void RadGrid1_PreRender(object sender, EventArgs e){ int itemCount = (sender as RadGrid).MasterTableView.GetItems(GridItemType.Item).Length + (sender as RadGrid).MasterTableView.GetItems(GridItemType.AlternatingItem).Length; foreach (GridItem item in (sender as RadGrid).Items) { if (item is GridDataItem && item.ItemIndex < itemCount - 1) { ((item as GridDataItem)["CustomerID"] as TableCell).Controls.Add(new LiteralControl("<table style='display:none;'><tr><td>")); } }}However, I recommend the usage of the RadListView for displaying a custom layout.
I hope this helps.
Kind regards,
Mira
the Telerik team
Do you want to have your say when we set our development plans?
Do you want to know when a feature you care about is added or when a bug fixed?
Explore the
Telerik Public Issue Tracking
system and vote to affect the priority of the items
0
Mark
Top achievements
Rank 1
Rank 1
answered on 07 Apr 2011, 06:08 PM
Thanks, Mira! Sorry, I obviously missed that part of the feature. And I am exploring the use of RadListView for this.
Steve Smith
Steve Smith