Problem refresh pane in ajax

2 posts, 0 answers
  1. Hans
    Hans avatar
    1 posts
    Member since:
    Jun 2006

    Posted 30 Mar 2015 Link to this post

    I have a page with vertical splitter, in the left pane, i have 2 treeviews, the fisrt is Gmail folder, the seconf is googledrive folder. when i select a node in gmail folder treeview, i must show email grid with is own toolbar in the right pane and when i select a node in Google drive folder, i must show Google drive grid with is own toolbar. To do this i create in right pane (ContentPane), 3 div. What i want to do is to refresh all right pane if i select a node in gmail or Google drive folders treeview. How i can do this ?

    <%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/MainPage.master" CodeBehind="ManageGoogle.aspx.vb" Inherits=".ManageGoogle" %>

    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

    <asp:Content ID="Content1" ContentPlaceHolderID="centerPlaceHolder" runat="server">
    <telerik:radcodeblock id="RadCodeBlock" runat="server">
    <script type="text/javascript" language="javascript">

    var toolbar;
    var searchButton;

    function onButtonClicked(sender, args) {
    var commandName = args.get_item().get_commandName();
    if (commandName == "doSearch") {
    var searchTextBox = sender.findButtonByCommandName("searchText").findControl("txtSearch");
    if (searchButton.get_value() == "clear") {
    searchTextBox.set_value("");
    searchButton.set_imageUrl("images/search.gif");
    searchButton.set_value("search");
    }

    performSearch(searchTextBox.get_value());
    }
    }

    function onKeyPress(sender, args) {
    if (args.get_keyCode() == 13) {
    performSearch(sender.get_textBoxValue());
    }
    }

    function performSearch(searchText) {
    if (searchText) {
    searchButton.set_imageUrl("~/images/clear.gif");
    searchButton.set_value("clear");
    }
    ajaxManager.ajaxRequest(searchText);
    }

    function GMail_onButtonClicked(sender, args) {
    var commandName = args.get_item().get_commandName();
    if (commandName == "doSearch") {
    }
    }

    function GoogleDrive_onButtonClicked(sender, args) {
    var commandName = args.get_item().get_commandName();
    if (commandName == "doSearch") {
    }
    }

    function GMail_onGridRowSelected(sender, args) {
    }

    function GoogleDrive_onGridRowSelected(sender, args) {
    }

    function onGMailNodeClicking(sender, args) {

    }

    function onGoogleDriveNodeClicking(sender, args) {

    }

    function onClientPanelItemExpand(sender, eventArgs) {
    var item = eventArgs.get_item();
    if (item.get_text() == "GMail") {
    initiateAjaxRequest("LoadTreeviewGMailFolders", null, null, null, null); return false;
    }
    else {
    initiateAjaxRequest("LoadTreeviewGoogleDriveFolders", null, null, null, null); return false;
    }
    }


    </script>
    </telerik:radcodeblock>

    <telerik:radajaxmanagerproxy runat="server" id="RadAjaxManagerProxy">
    <ajaxsettings>

    <telerik:AjaxSetting AjaxControlID="RadAjaxManagerProxy">
    <UpdatedControls>
    <telerik:AjaxUpdatedControl ControlID="pnlGoogle" />
    </UpdatedControls>
    </telerik:AjaxSetting>

    <telerik:AjaxSetting AjaxControlID="trvGMailFolders">
    <UpdatedControls>
    <telerik:AjaxUpdatedControl ControlID="Panel1" />
    </UpdatedControls>
    </telerik:AjaxSetting>

    <telerik:AjaxSetting AjaxControlID="trvGoogleDriveFolders">
    <UpdatedControls>

    </UpdatedControls>
    </telerik:AjaxSetting>

    </ajaxsettings>
    </telerik:radajaxmanagerproxy>

    <telerik:radajaxloadingpanel runat="server" id="RadAjaxLoadingPanel" skin="Office2010Blue">
    </telerik:radajaxloadingpanel>

    <div style="width: 100%; height: 100%; min-height: 100%; overflow: hidden;">

    <telerik:RadSplitter ID="mainSplitter" runat="server" Height="100%" Width="100%" visibleduringinit="false" bordersize="1" borderstyle="Solid"
    panesbordersize="0" skin="Office2010Blue">
    <telerik:RadPane ID="navigationPane" runat="server" Width="220px">
    <telerik:RadToolBar runat="server" ID="RadToolBarSearch" OnClientButtonClicked="onButtonClicked" EnableViewState="false" Skin="Office2010Blue" Height="30px" width="100%">
    <items>
    <telerik:RadToolBarButton Value="searchTextBoxButton" CommandName="searchText">
    <ItemTemplate>
    <telerik:RadTextBox runat="server" ID="txtSearch" EmptyMessage="Rechercher" CssClass="inbox-search-textbox" Width="100%" ClientEvents-OnKeyPress="onKeyPress" />
    </ItemTemplate>
    </telerik:RadToolBarButton>
    <telerik:RadToolBarButton ImageUrl="~/Images/search.gif" Value="search" CommandName="doSearch" width="24px"/>
    </items>
    </telerik:RadToolBar>



    <telerik:RadPanelBar runat="server" ID="pnlGoogle" Width="100%" Skin="Office2010Blue" OnClientItemExpand="onClientPanelItemExpand">
    <Items>
    <telerik:RadPanelItem Value="pnlGMail" Expanded="False" Text="GMail" ImageUrl="~/Images/GMail.gif" >
    <Items>
    <telerik:RadPanelItem Value="GMail">
    <ItemTemplate>
    <telerik:RadTreeView runat="Server" ID="trvGMailFolders" OnNodeClick="trvGMailFolders_NodeClick" OnClientNodeClicking="onGMailNodeClicking" Skin="Office2010Blue">
    </telerik:RadTreeView>
    </ItemTemplate>
    </telerik:RadPanelItem>
    </Items>
    </telerik:RadPanelItem>


    <telerik:RadPanelItem Value="pnlGoogleDrive" Expanded="False" Text="Google Drive" ImageUrl="~/Images/GoogleDrive.gif">
    <Items>
    <telerik:RadPanelItem Value="GoogleDrive">
    <ItemTemplate>
    <telerik:RadTreeView runat="Server" ID="trvGoogleDriveFolders" OnNodeClick="trvGoogleDriveFolders_NodeClick" OnClientNodeClicking="onGoogleDriveNodeClicking" Skin="Office2010Blue">
    </telerik:RadTreeView>
    </ItemTemplate>
    </telerik:RadPanelItem>
    </Items>
    </telerik:RadPanelItem>

    </Items>
    </telerik:RadPanelBar>



    </telerik:RadPane>

    <telerik:RadSplitBar ID="RadSplitbar" runat="server" CollapseMode="Forward">
    </telerik:RadSplitBar>

    <telerik:RadPane ID="ContentPane" runat="server" visible="false">

    <asp:Panel ID="Panel1" runat="server">

    <div id="divSearchContent" runat="server">
    Search
    </div>
    <div id="divGMailContent" runat="server">
    <telerik:RadToolBar runat="server" ID="RadToolBarGMail" OnClientButtonClicked="GMail_onButtonClicked" EnableViewState="false" Skin="Office2010Blue" Height="30px">
    <items>
    <telerik:RadToolBarButton Value="filterByDate" CommandName="filterByDate">
    <ItemTemplate>
    <asp:Label ID="lblFromDate" runat="server" Text="<%$Resources:lblFromDate%>" SkinID="Office2010Blue" style="padding-right:5px;"></asp:Label>
    <telerik:RadDatePicker ID="rdpFromDate" runat="server" Width="110px" AutoPostBack="false" DateInput-EmptyMessage="MinDate" MinDate="01/01/1000" MaxDate="01/01/3000" Skin="Office2010Blue">
    <Calendar>
    <SpecialDays>
    <telerik:RadCalendarDay Repeatable="Today" ItemStyle-CssClass="rcToday">
    </telerik:RadCalendarDay>
    </SpecialDays>
    </Calendar>
    </telerik:RadDatePicker>
    <asp:Label ID="lblToDate" runat="server" Text="<%$Resources:lblToDate%>" SkinID="Office2010Blue" style="padding-right:5px" ></asp:Label>
    <telerik:RadDatePicker ID="rdpToDate" runat="server" Width="110px" AutoPostBack="false" DateInput-EmptyMessage="MaxDate" MinDate="01/01/1000" MaxDate="01/01/3000" Skin="Office2010Blue">
    <Calendar>
    <SpecialDays>
    <telerik:RadCalendarDay Repeatable="Today" ItemStyle-CssClass="rcToday">
    </telerik:RadCalendarDay>
    </SpecialDays>
    </Calendar>
    </telerik:RadDatePicker>
    </ItemTemplate>
    </telerik:RadToolBarButton>
    <telerik:RadToolBarButton ImageUrl="~/Images/filter.png" ToolTip="<%$Resources:btnApplyMailFilter%>" CommandName="ApplyMailFilter" Text="<%$Resources:btnApplyMailFilter%>" />
    <telerik:RadToolBarButton IsSeparator="true" />
    <telerik:RadToolBarButton ImageUrl="~/Images/move.gif" Enabled="false" ToolTip="<%$Resources:btnTransferToSyGED%>" CommandName="TransferToSyGED" Text="<%$Resources:btnTransferToSyGED%>" />
    <telerik:RadToolBarButton IsSeparator="true" />
    <telerik:RadToolBarButton ImageUrl="~/Images/move.gif" Enabled="false" ToolTip="<%$Resources:btnTransferAttachmentsToSyGED%>" CommandName="TransferAttachmentsToSyGED" Text="<%$Resources:btnTransferAttachmentsToSyGED%>" />
    </items>
    </telerik:RadToolBar>


    <telerik:RadGrid runat="server" ID="grdGMail" AutoGenerateColumns="false" GridLines="None" BorderWidth="0" AllowSorting="true" Style="outline: none" Skin="Office2010Blue">
    <clientsettings>
    <Selecting AllowRowSelect="true" />
    <Scrolling UseStaticHeaders="true" AllowScroll="true" ScrollHeight="100%" />
    <ClientEvents OnRowSelected="GMail_onGridRowSelected"/>
    </clientsettings>
    <mastertableview tablelayout="Fixed" grouploadmode="Client" ClientDataKeyNames="MessageID" width="100%" nomasterrecordstext="<%$Resources:GMail_grdNoRecordMessage%>">
    <SortExpressions>
    <telerik:GridSortExpression FieldName="Received" SortOrder="Descending" />
    </SortExpressions>
    <Columns>
    <telerik:GridBoundColumn DataField="From" HeaderText="<%$Resources:GMail_grdFromHeader%>" HeaderStyle-Width="240px">
    </telerik:GridBoundColumn>
    <telerik:GridBoundColumn DataField="Subject" HeaderText="<%$Resources:GMail_grdSubjectHeader%>" >
    </telerik:GridBoundColumn>
    <telerik:GridBoundColumn DataField="Received" HeaderText="<%$Resources:GMail_grdDateHeader%>" HeaderStyle-Width="150px">
    </telerik:GridBoundColumn>
    <telerik:GridBoundColumn DataField="MessageID" Display="False">
    </telerik:GridBoundColumn>
    </Columns>
    </mastertableview>
    </telerik:RadGrid>
    </div>

    <div id="divGoogleDriveContent" runat="server" visible="false">
    <telerik:RadToolBar runat="server" ID="RadToolBarGoogleDrive" OnClientButtonClicked="GoogleDrive_onButtonClicked" EnableViewState="false" Skin="Office2010Blue" Height="30px">
    <items>
    <telerik:RadToolBarButton ImageUrl="~/Images/move.gif" Enabled="false" ToolTip="<%$Resources:btnTransferFolderToSyGED%>" CommandName="TransferFolderToSyGED" Text="<%$Resources:btnTransferFolderToSyGED%>" />
    <telerik:RadToolBarButton IsSeparator="true" />
    <telerik:RadToolBarButton ImageUrl="~/Images/move.gif" Enabled="false" ToolTip="<%$Resources:btnTransferDocumentsToSyGED%>" CommandName="TransferDocumentsToSyGED" Text="<%$Resources:btnTransferDocumentsToSyGED%>" />
    </items>
    </telerik:RadToolBar>

    <telerik:RadGrid runat="server" ID="grdGoogleDrive" AutoGenerateColumns="false" GridLines="None" BorderWidth="0" AllowSorting="true" Style="outline: none" Skin="Office2010Blue">
    <clientsettings>
    <Selecting AllowRowSelect="true" />
    <Scrolling UseStaticHeaders="true" AllowScroll="true" ScrollHeight="100%" />
    <ClientEvents OnRowSelected="GoogleDrive_onGridRowSelected"/>
    </clientsettings>
    <mastertableview tablelayout="Fixed" grouploadmode="Client" ClientDataKeyNames="MessageID" width="100%" nomasterrecordstext="<%$Resources:GMail_grdNoRecordMessage%>">
    <SortExpressions>
    <telerik:GridSortExpression FieldName="Received" SortOrder="Descending" />
    </SortExpressions>
    <Columns>
    <telerik:GridBoundColumn DataField="From" HeaderText="<%$Resources:GMail_grdFromHeader%>" HeaderStyle-Width="240px">
    </telerik:GridBoundColumn>
    <telerik:GridBoundColumn DataField="Subject" HeaderText="<%$Resources:GMail_grdSubjectHeader%>" >
    </telerik:GridBoundColumn>
    <telerik:GridBoundColumn DataField="Received" HeaderText="<%$Resources:GMail_grdDateHeader%>" HeaderStyle-Width="150px">
    </telerik:GridBoundColumn>
    <telerik:GridBoundColumn DataField="MessageID" Display="False">
    </telerik:GridBoundColumn>
    </Columns>
    </mastertableview>
    </telerik:RadGrid>

    </div>

    </asp:Panel>

    </telerik:RadPane>

    </telerik:RadSplitter>

    </asp:Content>
  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    837 posts

    Posted 02 Apr 2015 Link to this post

    Hello,

    One possible approach would be to set the ContentUrl property of the the RadPane you want the RadGrid controls to be displayed in:
    protected void RadTreeView2_NodeClick(object sender, RadTreeNodeEventArgs e)
    {
        RightPane.ContentUrl = "Default.aspx";
    }
     
    protected void RadTreeView1_NodeClick(object sender, RadTreeNodeEventArgs e)
    {
        RightPane.ContentUrl = "Default2.aspx";
    }
    This would allow to load different pages containing the corresponding RadGrid on RadTreeViewNode click.

    Regards,
    Ivan Danchev
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

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