Friday 30 September 2011

sharepoint inputformtextbox not working updatepanel

side updatepanel






Recently I faced a weird issue while using Richtext or InputFormTextBox control of SharePoint. Actually there were many fields in the custom form, so to avoid postback I decided to use UpdatePanel for partial page update. Unfortunately my richtext contol was inside UpdatePanel and started showing weird behavior after asynchronous postback.

Before postback richtext control
Before Postback Richtext Control


After postback richtext control

After Postback Richtext Control

Actually SharePoint calls few JavaScript methods to maintain the toolbar and look of richtext control on page load. But while partial page update browser don't trigger window onload event. That is why, JavaScript methods associated with richtext control don't get triggered and control looks completely different after asynchronous postback.

It means, somehow we have to call these method after asynchronous postback complete. To solve this problem you can use client side endRequest event of asynchronous postback to call required javaScript methods richtext control.
Sample Code:

<script type="text/javascript">

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

function EndRequestHandler()

{

var richtextContolId = '<%= richtextControlId.ClientID %>';

if (browseris.ie5up && browseris.win32 && !IsAccessibilityFeatureEnabled()){

g_aToolBarButtons = null;

g_fRTEFirstTimeGenerateCalled=true;

RTE_ConvertTextAreaToRichEdit(richtextContolId, true, true, "", "1033",null, null, null, null, null,"FullHtml", "",null,null,null,null);

RTE_TextAreaWindow_OnLoad(richtextContolId);

}

else{

document.write("
Click for help about adding basic HTML formatting.
"
);

};

}

script>


That's all you need to do to fix the above issue. After each asynchronous postback "EndRequestHandler" method will get called and it will maintain the state of richtext control. Go through the following blog to get good idea about client side events:http://www.a2zmenu.com/Blogs/Ajax/Call-JavaScript-method-after-Ajax-call-complete.aspx .


Working with multiple Inputformtexboxes :

Problem with sharepoint inputformtextbox control with updatepanel

When using SharePoint:InputFormTextBox control in UpdatePanel I faced one issue. On my webpart part page I had one SharePoint:InputFormTextBox control with one asp:DropDown control with autopostback property true. On SelectedIndexChanged event of that dropdown, InputformTextBox control appears without toolbar. This behaviour was coming because the InputformTextBox is a TextArea control. It needs script to achieve the rich text box feature when loading the page and in update panel due to partial postback the script was not loading. To fix this issue we are required to load that script. I am giving you the steps to fix this issue:
Step 1: Put this script function in design code.
<script language="javascript" type="text/javascript">
function CreateRichEdit(elementid)
{
if (browseris.ie5up && browseris.win32 && !IsAccessibilityFeatureEnabled()){
g_aToolBarButtons = null;
g_fRTEFirstTimeGenerateCalled=true;
RTE_ConvertTextAreaToRichEdit(elementid, true, true, "", "1033", null, null, null, null, null,"FullHtml","\u002f",null,null,null,null);
RTE_TextAreaWindow_OnLoad(elementid);
RTE_DocEditor_AdjustHeight(elementid);
RTE_DocEditor_AdjustWidth(elementid);
}
else{
};
}
script>


Step 2: Put this code in code behind file

protected void Page_PreRender(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), "@@CreateRichEdit", "", false);
}

1 comment: