This is a migrated thread and some comments may be shown as answers.

Unable to get value of the property 'paste'

2 Answers 165 Views

Ajax

This is a migrated thread and some comments may be shown as answers.

Mark Gallucci asked on 06 Jul 2011, 06:07 PM

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>

</ContentTemplate>

</asp:UpdatePanel>

<div class="clear">

</div>

If you need anything more, please let me know. Thanks.

2 Answers, 1 is accepted

Accepted

answered on 12 Jul 2011, 09:13 AM

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!