Help with Ajax, DockZone and ListView, DataPager

2 posts, 0 answers
  1. Sugar
    Sugar avatar
    10 posts
    Member since:
    Jan 2009

    Posted 26 Jan 2010 Link to this post

    I'm having a bit of a difficult time trying to figure out exactly how to make a correct Ajax call work with the Telerik DockZone, ListView and DataPager. I'm hoping someone can help out a bit.

    I am dynamically adding RadDock in code behind to the Zones.

    Here is code for main page (which I have to restructure soon b/c of lots and lots of layout issues wiht IE and Firefox, but, that's out of context of what I'm asking here!)

    <%@ 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> 


    From here, in the code behind I will add RadDock, example like this:

    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); 
    Finally, in the "ctlNewsRoom" I have a ListView using a DataPager. What I would like to do is, on the change of pages is that only the one Dock be updated. Right now what is happening is that all Docks on the main page are being updated. I'm thinking (or hoping) that I just don't have everything hooked up gogether.

    <%@ 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(); 
     
            } 
     
        } 




  2. Sugar
    Sugar avatar
    10 posts
    Member since:
    Jan 2009

    Posted 26 Jan 2010 Link to this post

    For anyone that is interested, a user from StackOverflow helped me out which solved my problem. See below.

    Your current implementation is too complex and I don't think you need to use the RadAjaxManager control. What you are describing - being able to update a single dock without affecting the rest of the page - can happen by simply wrapping the dock content (the user control) in a RadAjaxPanel. For example:

    telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server"
        <asp:LinqDataSource ID="dsNews" runat="server" OnSelecting="dsNews_Selecting" /> 
        <asp:ListView ID="lvNews" runat="server" DataKeyNames="RecordID"   DataSourceID="dsNews">    
            ... 
        </asp:ListView> 
    </telerik:RadAjaxPanel> 
     
    This way you can be sure that interacting with the content of one dock will not affect the others.

    Thanks so much lingvomir!




  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top