Telerik DockZone、ListView、DataPagerで正しいAjax呼び出しを機能させる方法を正確に理解しようとすると、少し苦労します。誰かが少し助けてくれることを願っています。
コードビハインドでRadDockをゾーンに動的に追加しています。
これがメインページのコードです(IEとFirefoxでのレイアウトの問題がたくさんあるので、すぐに再構築する必要がありますが、それは私がここで求めていることの文脈から外れています!)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ClientView.aspx.cs" Inherits="News.UI.Form_ClientView" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<html>
<head>
<title></title>
<link href="Styles/ClientView.css" rel="stylesheet" type="text/css" />
<script src="Scripts/ClientView.js" type="text/javascript" ></script>
</head>
<body>
<form id="Form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div id="clientviewcontent">
<telerik:RadDockLayout runat="server" ID="RadDockLayout1" EnableEmbeddedSkins="true" Skin="Office2007" Visible="true">
<div id="clientviewlayout">
<table class="tbldoclayout">
<tr>
<td class="totop" colspan="3"><telerik:RadDockZone Width="100%" MinHeight="0" BorderStyle="None" runat="server" ID="RadDockZoneTop" Orientation="Vertical" Visible="true"></telerik:RadDockZone></td>
</tr>
<tr>
<td class="tdleft"><telerik:RadDockZone Width="100%" Height="100%" MinHeight="0" BorderStyle="None" BorderWidth="0" runat="server" ID="RadDockZoneV1" Orientation="Vertical"></telerik:RadDockZone></td>
<td class="tdmid"><telerik:RadDockZone Width="100%" Height="100%" MinHeight="0" BorderStyle="None" BorderWidth="0" runat="server" ID="RadDockZoneV2" Orientation="Vertical"></telerik:RadDockZone></td>
<td class="tdright"><telerik:RadDockZone Width="100%" Height="100%" MinHeight="0" BorderStyle="None" BorderWidth="0" runat="server" ID="RadDockZoneV3" Orientation="Vertical"></telerik:RadDockZone></td>
</tr>
</table>
</div>
</telerik:RadDockLayout>
</div>
</form>
</body>
</html>
ここから、背後のコードにRadDockを追加します。例は次のとおりです。
RadDock dockNews = new RadDock();
dockNews.DockMode = DockMode.Docked;
dockNews.ID = "dockNews";
dockNews.Tag = "dockNews";
dockNews.Title = "News";
dockNews.Skin = "Office2007";
dockNews.Width = Unit.Pixel(200);
dockNews.Style.Add("margin-bottom", "5px");
dockNews.DockHandle = DockHandle.TitleBar;
dockNews.DefaultCommands = Telerik.Web.UI.Dock.DefaultCommands.All;
Control ctrlNewsRoom = LoadControl("~/ClientView/ctlNewsRoom.ascx");
RadDockLayout1.Controls.Add(dockNews);
RadDockZoneV1.Controls.Add(dockNews);
dockNews.ContentContainer.Controls.Add(ctrlNewsRoom);
最後に、「ctlNewsRoom」にDataPagerを使用したListViewがあります。私がやりたいのは、ページの変更時に、1つのDockのみが更新されることです。現在、メインページのすべてのドックが更新されています。私は、すべてが一緒に接続されているわけではないと考えています(または期待しています)。
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ctlNewsRoom.ascx.cs" Inherits="News.UI.ctlNewsRoom_Control" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<telerik:RadAjaxManagerProxy ID="Proxy" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="dsNews" EventName="dsNews_Selecting">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="dsNews" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManagerProxy>
<asp:LinqDataSource ID="dsNews" runat="server" OnSelecting="dsNews_Selecting" />
<asp:ListView ID="lvNews" runat="server" DataKeyNames="RecordID" DataSourceID="dsNews">
<LayoutTemplate>
<div id="itemPlaceholderContainer" runat="server">
<div id="itemplaceholder" runat="server"></div>
</div>
<div style="clear: left; text-align:center; vertical-align: middle; float:none;">
<asp:DataPager ID="pageTopics" runat="server" PageSize="3" PagedControlID="lvNews">
<Fields>
<asp:NextPreviousPagerField ShowFirstPageButton="true" ButtonType="Image" ShowPreviousPageButton="false" ShowNextPageButton="false" FirstPageImageUrl="../Images/PagingFirst.gif" />
<asp:NextPreviousPagerField ShowFirstPageButton="false" ButtonType="Image" ShowPreviousPageButton="true" ShowNextPageButton="false" PreviousPageImageUrl="../Images/PagingPrev.gif" />
<asp:NumericPagerField ButtonCount="9" />
<asp:NextPreviousPagerField ShowFirstPageButton="false" ButtonType="Image" ShowPreviousPageButton="false" ShowNextPageButton="true" ShowLastPageButton="false" NextPageImageUrl="../Images/PagingNext.gif" />
<asp:NextPreviousPagerField ShowFirstPageButton="false" ButtonType="Image" ShowPreviousPageButton="false" ShowNextPageButton="false" ShowLastPageButton="true" LastPageImageUrl="../Images/PagingLast.gif" />
</Fields>
</asp:DataPager>
</LayoutTemplate>
<ItemTemplate>
<div>
<ul id="newsul">
<li id="newstitle"><%# Eval("Name")%></li>
<li id="newspub">
<div style="width:100%;margin:0;padding:0;">
<div style="text-align:left;float:left;">Published: <%# Eval("PublishDate")%></div>
<div style="text-align:right;"><asp:HyperLink runat="server" ID="newNav" ImageUrl="../Images/world_go.png" NavigateUrl='<%# Eval("URL")%>' Target="_blank" /></div>
</div>
</li>
<li id="newsdesc"><%# Eval("Description").ToString()%></li>
</ul>
</div>
</ItemTemplate>
<EmptyDataTemplate>No news found</EmptyDataTemplate>
</asp:ListView>
以下は、データをロードする単純なコードです。
using News.UI;
using News.DataModel;
using System.Linq;
using System.Xml.Linq;
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Collections.Generic;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Xml;
using System.Xml.XPath;
namespace News.UI
{
public partial class ctlNewsRoom_Control : System.Web.UI.UserControl
{
private SettingManager m_SettingManager;
private GBMDataContext m_Context;
protected void dsNews_Selecting(object sender, LinqDataSourceSelectEventArgs args)
{
args.Result = LoadData();
}
private IList LoadData()
{
m_SettingManager = new SettingManager();
m_Context = m_SettingManager.DataContext;
var q = from tmp in m_Context.NewsRooms where
(!(tmp.RecordExpiration.HasValue) || tmp.RecordExpiration.Value >= DateTime.UtcNow)
orderby tmp.PublishDate descending
select new { tmp.RecordID, Name=tmp.Name.Substring(0,75), PublishDate = tmp.PublishDate.ToShortDateString(), Description=tmp.Description.Substring(0,175), URL=tmp.URL };
return q.ToList();
}
}
}