Unable to get value of the property 'paste'

3 posts, 1 answers
  1. Mark Gallucci
    Mark Gallucci avatar
    11 posts
    Member since:
    May 2010

    Posted 06 Jul 2011 Link to this post

    I've encountered another development issue, which I believe is AJAX-related.  I've several controls (views) that are loaded into a multipage upon page Load.  These controls are navigated via tabs in a tabstrip.  Each view is divided into two parts via ASP update panels:

    1. A toolbar (Toolbar_AjaxPanel)
    2. Content affected by the toolbar, which contain a series of web user controls  (Content_AjaxPanel)

    One of these web user controls is a catalog that lists programs.  A program in the list can be selected, and this raises the OnCatalogItemSelected event, a custom event which is triggered by the OnSelectedIndexChanged event of the RadGrid within the catalog web user control.  The OnCatalogItemSelected event runs a few checks and sets some visibility settings before updating the content panel via Content_AjaxPanel.Update().

    Everything appears to work as expected until I click a tab and switch to a different "view."  When I do, I receive this client-side error:

    Error: Unable to get value of the property 'paste': object is null or undefined

    The application does not appear to be adversely affected, otherwise, but this error might confuse users.  From what I can tell, it's the Update() call in the OnCatalogItemSelected event that causes this to happen.  When I remove or comment it out, I no longer receive the message, but I need that Update() call to refresh the content and display the appropriate controls.

    Here is the code that handles the OnCatalogItemSelected in the ProgramView.ascx view:
    protected void Program_Catalog_OnCatalogItemSelected(object sender, ProgramManagement.Controls.ProgramCatalog.CatalogItemSelectedEventArgs e)
            {
                HtmlControl catalogContainer = CatalogContainer_Panel;
                HtmlControl catalogItemContainer = CatalogItemContainer_Panel;
                 
                int selectedId = Program_Catalog.SelectedProgramID;
     
                if (!e.IsFullPlan)
                {
                    Program_ProgramManager.ViewMode = ProgramManagement.Controls.ProgramManager.View.Quick;
                    Program_OutcomeManager.Visible = true;
                    Program_OrganizerManager.Visible = true;
                    Program_AudienceManager.Visible = false;
                    Program_BudgetManager.Visible = false;
                }
                else
     
                {
                    Program_ProgramManager.ViewMode = ProgramManagement.Controls.ProgramManager.View.Full;
                    Program_OutcomeManager.Visible = true;
                    Program_OrganizerManager.Visible = true;
                    Program_AudienceManager.Visible = true;
                    Program_BudgetManager.Visible = true;
                }
                 
                Program_ProgramManager.Select(selectedId);
                Program_AudienceManager.Select(selectedId);
                Program_OutcomeManager.Select(selectedId);
                Program_OrganizerManager.Select(selectedId);
                Program_BudgetManager.Select(selectedId);
                 
                //Indicate that an item has been selected.
                ItemSelected = true;
     
                catalogContainer.Style["display"] = "none";
                catalogItemContainer.Style["display"] = "block";
     
                //Update the program content ajax panel
                Content_AjaxPanel.Update();
            }

    And if you need it, here is the interface markup:
    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ProgramView.ascx.cs" Inherits="AZ.SA.RL.App.ProgramManagement.ProgramView" %>
    <%@ Register Src="~/Controls/ProgramCatalog.ascx" TagName="ProgramCatalog" TagPrefix="pm"  %>
    <%@ Register Src="~/Controls/ProgramManager.ascx" TagName="ProgramManager" TagPrefix="pm" %>
    <%@ Register Src="~/Controls/OrganizerManager.ascx" TagName="OrganizerManager" TagPrefix="pm" %>
    <%@ Register Src="~/Controls/AudienceManager.ascx" TagName="AudienceManager" TagPrefix="pm" %>
    <%@ Register Src="~/Controls/OutcomeManager.ascx" TagName="OutcomeManager" TagPrefix="pm"  %>
    <%@ Register Src="~/Controls/BudgetManager.ascx" TagName="BudgetManager" TagPrefix="pm"  %>
     
    <telerik:RadScriptBlock ID="ProgramControlScripts" runat="server">
    <script language="javascript" type="text/javascript">
     
        var programToolbar;
        var programCatalogButton;
        var programNewButton;
        var programQuickButton;
        var programFullButton;
        var programSeperator1;
        var programQuickButton;
        var programFullButton;
        var programEvalButton;
        var programSeperator2;
        var programEditButton;
        var programCancelButton;
        var programSaveButton;
     
        function Program_OnClientLoad(sender, args) {
            programToolbar = sender;
            programCatalogButton = programToolbar.findButtonByCommandName("CATALOG");
            programNewButton = programToolbar.findItemByText("New Program");
            programQuickButton = programToolbar.findItemByValue("Quick");
            programFullButton = programToolbar.findItemByValue("Full");
            programSeperator1 = programToolbar.findItemByValue("Sep1");
            programQuickButton = programToolbar.findButtonByCommandName("QUICK");
            programFullButton = programToolbar.findButtonByCommandName("FULL");
            programEvalButton = programToolbar.findButtonByCommandName("EVAL");
            programSeperator2 = programToolbar.findItemByValue("Sep2");
            programEditButton = programToolbar.findButtonByCommandName("EDIT");
            programCancelButton = programToolbar.findButtonByCommandName("CANCEL");
            programSaveButton = programToolbar.findButtonByCommandName("SAVE");
        }
     
        function Program_OnClientButtonClicking(sender, args) {
            var programButton = args.get_item();
            var programCommand = programButton.get_commandName();
     
            if (programCommand == "CANCEL") {
                args.set_cancel(!confirm('Are you sure you want to discard any changes?'));
            }
        }
     
        function Program_OnClientButtonClicked(sender, args) {       
            var programButton = args.get_item();
            var programCommand = programButton.get_commandName();
     
            var programCatalogContainer = $('div[name="catalogContainer"]')
            var programCatalogItemContainer = $('div[name="catalogItemContainer"]')
     
            switch (programCommand) {
                case "CATALOG":
     
                    if (programCatalogButton != null) {
                        programCatalogButton.set_visible(false);
                    }
                    if (programNewButton != null) {
                        programNewButton.set_visible(true);
                    }
                    if (programSeperator1 != null) {
                        programSeperator1.set_visible(false);
                    }
                    if (programQuickButton != null) {
                        programQuickButton.set_visible(false);
                    }
                    if (programFullButton != null) {
                        programFullButton.set_visible(false);
                    }
                    if (programEvalButton != null) {
                        programEvalButton.set_visible(false);
                    }
                    if (programSeperator2 != null) {
                        programSeperator2.set_visible(false);
                    }
                    if (programEditButton != null) {
                        programEditButton.set_visible(false);
                    }
                    if (programCancelButton != null) {
                        programCancelButton.set_visible(false);
                    }
                    if (programSaveButton != null) {
                        programSaveButton.set_visible(false);
                    }
     
                    programCatalogContainer.fadeIn(500);
                    programCatalogContainer.css("display", "block");
                    programCatalogItemContainer.css("display", "none");
                    break;
            }       
        }
     
        function Program_OnCatalogItemClicked(sender, args) {
            var programCatalogContainer = $('div[name="catalogContainer"]');
            var programCatalogItemContainer = $('div[name="catalogItemContainer"]');
             
            if (programCatalogButton != null) {
                programCatalogButton.set_visible(true);
            }
            if (programNewButton != null) {
                programNewButton.set_visible(false);
            }
            if (programSeperator1 != null) {
                programSeperator1.set_visible(true);
            }
            if (programQuickButton != null) {
                programQuickButton.set_visible(true);
            }
            if (programFullButton != null) {
                programFullButton.set_visible(true);
            }
            if (programEvalButton != null) {
                programEvalButton.set_visible(true);
            }
            if (programSeperator2 != null) {
                programSeperator2.set_visible(true);
            }
            if (programEditButton != null) {
                programEditButton.set_visible(true);
            }
            if (programCancelButton != null) {
                programCancelButton.set_visible(false);
            }
            if (programSaveButton != null) {
                programSaveButton.set_visible(false);
            }
     
            programCatalogContainer.slideUp(500);
            programCatalogItemContainer.fadeIn(600).delay(800);
            programCatalogItemContainer.css("display", "block");
        }
    </script>
    </telerik:RadScriptBlock>
     
    <telerik:RadAjaxManagerProxy ID="Program_AjaxManager" runat="server" />
     
    <asp:UpdatePanel ID="Toolbar_AjaxPanel" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <telerik:RadToolBar ID="Program_Toolbar"
            runat="server"
            Skin="Black"
            OnClientButtonClicking="Program_OnClientButtonClicking"
            OnClientButtonClicked="Program_OnClientButtonClicked"
            OnButtonClick="Program_ToolBar_ButtonClick"   
            OnClientLoad="Program_OnClientLoad"
            BorderStyle="None"
            BorderWidth="0"
            Width="100%">
            <Items>
                <telerik:RadToolBarButton Text="View Catalog" Value="Catalog" CommandName="CATALOG" PostBack="false" />
                <telerik:RadToolBarDropDown Text="New Program" DropDownWidth="150px">
                    <Buttons>
                        <telerik:RadToolBarButton Text="Quick Plan" CommandName="NEW" Value="Quick" />
                        <telerik:RadToolBarButton Text="Full Plan" CommandName="NEW" Value="Full" />
                    </Buttons>
                </telerik:RadToolBarDropDown>
                <telerik:RadToolBarButton IsSeparator="true" Value="Sep1" />
                <telerik:RadToolBarButton Text="Quick Plan" CommandName="QUICK" Checked="true" CheckOnClick="true" Group="PlanType" />
                <telerik:RadToolBarButton Text="Full Plan" CommandName="FULL" Checked="false" CheckOnClick="true" Group="PlanType" />
                <telerik:RadToolBarButton Text="Evaluation" CommandName="EVAL" Checked="false" CheckOnClick="true" Group="PlanType" Enabled="false" Visible="false" />
                <telerik:RadToolBarButton IsSeparator="true" Value="Sep2" />
                <telerik:RadToolBarButton Text="Edit" CommandName="EDIT" />
                <telerik:RadToolBarButton Text="Cancel" CommandName="CANCEL" />
                <telerik:RadToolBarButton Text="Save" CommandName="SAVE" CausesValidation="true" ValidationGroup="ProgramValidation" PostBack="true" />       
            </Items>   
        </telerik:RadToolBar>
    </ContentTemplate>
    </asp:UpdatePanel>
     
    <asp:UpdatePanel ID="Content_AjaxPanel" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <div class="ContentContainer">
             
            <div id="CatalogContainer_Panel" runat="server" name="catalogContainer">
                <pm:ProgramCatalog ID="Program_Catalog"
                    runat="server"
                    Title="Program Catalog"               
                    OnCatalogItemSelected="Program_Catalog_OnCatalogItemSelected"
                    OnClientCatalogItemClicked="Program_OnCatalogItemClicked" />
            </div>
             
            <div id="CatalogItemContainer_Panel" runat="server" name="catalogItemContainer" style="display:none">
                <div class="LeftColumnContainer">
                    <pm:ProgramManager runat="server"
                        ID="Program_ProgramManager"
                        OnProgramLoaded="Program_Manager_OnProgramLoaded"                    
                        Title="Program Characteristics" />
                </div>
     
                <div class="RightColumnContainer">
                    <pm:OutcomeManager ID="Program_OutcomeManager"
                        runat="server"
                        Title="Goals"
                        ItemName="Goal" />
                    <pm:OrganizerManager ID="Program_OrganizerManager"
                        runat="server"
                        Title="Organizers"
                        ItemName="Organizer"
                        OrganizerType="Program" />
                    <pm:AudienceManager ID="Program_AudienceManager"
                        runat="server"
                        Title="Audiences"
                        ItemName="Audience" />               
                    <pm:BudgetManager ID="Program_BudgetManager"
                        runat="server" 
                        Title="Budget Items"
                        ItemName="Budget Item" />
                </div>
            </div>
        </div>
    </ContentTemplate>
    </asp:UpdatePanel>
     
    <div class="clear">
    </div>

    If you need anything more, please let me know.  Thanks.
  2. Answer
    Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 12 Jul 2011 Link to this post

    Hello Mark Gallucci,

    Could you please test the application by disabling the ajax on the page and verify of this makes any difference. Also please ensure that you do not use RadAjax and asp UpdatePanels for updating the same part of the page as using wrapped UpdatePanels is not supported scenario and may cause a lot of different issues. I would suggest you to review the following online demo which elaborates on dynamically loading UserControl with RadAjax.
    If non of this helps could I kindly ask you to open a regular support ticket and send us runnable version of your application as well as the exact steps for reproducing the error. Thus we will be able to debug the project locally and do our best to isolate the root cause of the issue and provide proper solution.

    Greetings,
    Maria Ilieva
    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Mark Gallucci
    Mark Gallucci avatar
    11 posts
    Member since:
    May 2010

    Posted 07 Aug 2011 Link to this post

    Forgot to update this thread.

    It appears that having a mix of asp:UpdatePanels and telerik:RadAjaxPanels was causing some sort of conflict.  Removing all the asp:UpdatePanels appears to have solved this issue.  Thank you.
Back to Top