tree view + no postback + update panel

setup:

master page - content page layout

On my content page I want two update panels, one to contain a tree view dynamically generated from a database and the other to contain dynamically generated data (also pulled from a database) based on what is selected in the tree view. It is my understanding that tree view cannot be in an update panel. What is the best strategy for accomplishing this? I don't want a postback to be performed when an item is selected in the tree view. In other words, I don't want the entire page (form) refreshed just because an item in the tree view is selected.

Thanks in advance for any help.

If your treeview doesn't change the contents after the PageLoad, you may be able to have it in an update panel. We found that it doesn't work well if you add nodes to the treeview when you click a parent node, but if you load the full treeview it may be ok. If you need to dynamically add nodes as you click, you would probably need something like the TreeView that telerik has. We were looking at that one until we decided to do our page differently, and that control is not free, but seems to work nice.

The 2nd update panel would have a grid view in it. From the grid view I would add or edit content. If I added content the tree view would need to be refreshed without a full page postback to display the newly added item.

From the sounds of it, this isn't possible with strictly MS controls at the moment.

I just finished this very thing. The page starts with just a pulldown and then based on that value creates a Treeview dynamically without refreshing the page. Then clicking on a node causes another update panel to refresh with specific information.

Pretty convoluted with half Telerik and half MS. The full Telerik approach (Treeview and Update panel) looks easier, but we are using MS AJAX.

My older version of the Treeview (5.3) does not work with MS update panel, so I need to upgrade. I'm not too happy about it, but it seems to work well.

WISH LIST: A direct JavaScript method to postback to an MS update panel. As it is this seems to be the best approach:

http://forums.asp.net/thread/1541012.aspx

I followed the instructions on that thread and I have my update panel refreshing from javascript code. How do I call a javascript function when a tree node is clicked?

in the Telerik Treeview there is a property called "onBeforeNodeClick" and you can set that to the name of a javaScript function to fire when a node is clicked and before postback.

So, I did

myTreeNode.NavigateUrl ="javascript:postBackHiddenField('hardcodedhiddenfieldcontrol','" + uniqueIdentifierOfTreeNode +"')"function postBackHiddenField(hiddenFieldID, clickedID){alert("works");var hiddenField = $get(hiddenFieldID);__doPostBack(hiddenFieldID,'');}

I want to use the uniqueIdentifierOfTreeNode in order to modify the select paramter of a gridview in the update panel I'm refreshing from __doPostBack. I have no idea. Any help is appreciated. Is this the best approach to take even?

I forgot to mention the postback and refresh of the update panel is working as I have a label refreshed with the system time.
Nevermind, it looks like I came up with a reasonable solution that works.

Trigger full postback from the server during a partial postback.

Well, I have a dialog user control (ajax popup) which can again contain other user asp user controls as content. The content of the dialog is created inside an UpdatePanel, so that the dialog content can postback. All of that works OK.

On the web page I have now some information visible inside a GridView which is not in an UpdatePanel and should not be, because I need the browser forward/backward button to work. A link on that web page lets one of these dialog controls pop up. The dialog contains a user control which can manipulate the data which is visible inside the GridView. If the user presses a button inside the dialog, the dialog does an asynchronous postback as the user control/dialog content is inside an update panel and the dialog closes. That gives the user the impression that nothing happened as the data visible in the GridView did not change. I do already have the code to refresh the gridview, but how can I change the behavior during the postback from being an asynchronous postback to a full postback?

So just to clarify some pseudo code:

In the user control contained inside the dialog I would have some code like:

void OnOK(...)
{
// check if any data changed
if (textBox.Text != record.Text)
{
// do a database update
// and
// update cached data which the datagrid is bound to
// call a method on the page to rebind the datagrid only

// ? Force a full page refresh
}
else
{
// do nothing
// asynchronous postback is OK, no full page refresh needed
}
}

The force of a full page refresh is what I would need. In a fat environment like Windows Forms, I would just call Invalidate on the Form. Or IF the DataGrid would be inside an UpdatePanel I would search for it and call Update() on it, but then I would loose the browser caching during back and forward movements. So I was searching through all of the classes if there is something like ScriptManager.UpdatePage or something similar, but have found nothing so far.

So what is the solution here? How can inform the ajax client side script, that it should just go ahead and rerender the whole page instead of just extracting the update panel portions?

Thanks

In the <Triggers> collection of your updatepanel, just add whatever control you want to cause a full refresh as a PostBackTrigger instead of as a AsynchPostBackTrigger.

<asp:UpdatePanel ...>
<Triggers>
<asp:PostBackTrigger ControlID="whateverID" />
</Triggers>
<ContentTemplate>
...
</ContentTemplate>
</asp:UpdatePanel>

Well, that does not work:

a) the UserControl is designed separatly and does not have an update panel and vice versa the dialog is a generic control which just adds a UserControl as a content, so it cannot hardcode if there is any control ID inside which should trigger a full postback

b) I do not want a full postback to occur all the time when the button is pressed, the logic of the button on the server side should determine if a full postback is necessary or not, if not then a partial postback is OK.

I tried to work around now, kind of using your approach by doing this in the OnPreRender or OnChildControlsCreated of the UserControl:

System.Web.UI.WebControls.WebControl btnOK =this.Parent.Parent.FindControl("btnOK")as System.Web.UI.WebControls.WebControl;
if (btnOK !=null)
{
System.Web.UI.Control control = btnOK;
UpdatePanel updatePanel = control.ParentasUpdatePanel;
while ((updatePanel ==null) && (control !=null))
{
control = control.Parent;
updatePanel = controlasUpdatePanel;
}
if (updatePanel !=null)
{
PostBackTrigger pbTrigger =newPostBackTrigger();
pbTrigger.ControlID ="btnOK";
updatePanel.Triggers.Add(pbTrigger);
}
}

So I do find the OK button and I do find the UpdatePanel that contains the button, but it has no effect whatsoever.
The control ID must be right, otherwise I would not be able to find the button with it, but still no PostBack and the Dialog itself is not inside an UpdatePanel.

Triggering an Updatepanel (b) based on a gridview rowcommand which is inside a UpdatePanel

Hi there,

I have two sections on my aspx page which contain two grids on an aspx page. User and UserDetails.

User section has atab control which contains an update panelupUsers which contains the gridviewgvUsers. I have another grid in a different updatepanelupUserDetails this contains a grid toogvUserAccessKeys. I want to refresh the second updatepanelupUserDetails (basically trigger it) based on the RowCommand in the gvUsers which is in the first update panel. I was able to do this till I added the tab control.

Now it cannot find the gvUsers controlID when I write the trigger.

So is it possible to trigger a different UpdatePanel based on a gridview Control rowcommand event from inside a AjaxControlKit tab control.

Thanks in advance for any suggestions.

Rakesh Ajwani

following is the HTML snipped of the aspx page.

</td><tdstyle="width: 100px"valign="top"><cc1:TabContainerID="pTabs"runat="server"ActiveTabIndex="0"><cc1:TabPanelrunat="Server"ID="tabUsers"HeaderText="Users"Enabled="true"><ContentTemplate><asp:UpdatePanelID="upUsers"runat="server"><ContentTemplate><asp:GridViewID="gvUsers"runat="server"AutoGenerateColumns="False"Width="129px"OnRowDataBound="gvUsers_RowDataBound"OnRowCommand="gvUsers_RowCommand"><Columns><asp:TemplateFieldHeaderText="Users"><HeaderTemplate><tablewidth="100%"><tr><tdalign="left"><asp:Labelrunat="server"Text="Users"></asp:Label></td><tdalign="right"><asp:ImageButtonID="ibAddUser"OnClick="ibAddUser_Click"runat="server"ImageUrl="Images/plus-8.png"/></td></tr></table></HeaderTemplate><ItemTemplate><asp:LinkButtonrunat="server"ID="linkbUserSelect"Text='<%#((System.Data.DataRow)Container.DataItem)["LastName"] + " " + ((System.Data.DataRow)Container.DataItem)["FirstName"]%>'CommandName="ViewDetail"></asp:LinkButton></ItemTemplate></asp:TemplateField></Columns></asp:GridView></ContentTemplate><Triggers><asp:AsyncPostBackTriggerControlID="gvInstitutions"EventName="RowCommand"/></Triggers></asp:UpdatePanel></ContentTemplate></cc1:TabPanel></cc1:TabContainer></td></tr><tr><tdcolspan="2"width="100%"><asp:UpdatePanelID="upUserDetail"runat="server"><ContentTemplate><asp:LabelID="lblInstitution"runat="server"Width="132px"></asp:Label><br/><br/><asp:LabelID="lblLName"runat="server"Width="143px"></asp:Label><asp:TextBoxID="txtLName"runat="server"Width="143px"></asp:TextBox><asp:LabelID="lblFName"runat="server"Width="143px"></asp:Label><asp:TextBoxID="txtFName"runat="server"Width="143px"></asp:TextBox>

<br/><br/><asp:LabelID="lblEmailID"runat="server"Width="154px"></asp:Label><asp:TextBoxID="txtEmailID"runat="server"Width="143px"></asp:TextBox><br/><asp:GridViewID="gvAccessKeys"runat="server"AutoGenerateColumns="False"Width="689px"OnRowCreated="gvAccessKeys_RowCreated"OnRowDataBound="gvAccessKeys_RowDataBound"><Columns><asp:TemplateFieldHeaderText="Application"><ItemTemplate><asp:LabelID="lblApplication"runat="server"Visible="true"Text='<%#((System.Data.DataRow)Container.DataItem)["ApplicationCode"]%>'></asp:Label></ItemTemplate></asp:TemplateField><asp:TemplateFieldHeaderText="Institution"><ItemTemplate><asp:LabelID="lblCampus"runat="server"Visible="true"Text='<%#((System.Data.DataRow)Container.DataItem)["InstitutionName"]%>'></asp:Label></ItemTemplate></asp:TemplateField><asp:TemplateFieldHeaderText="Role"><ItemTemplate><asp:DropDownListID="ddRole"EnableViewState="true"runat="server"></asp:DropDownList></ItemTemplate></asp:TemplateField></columns><EmptyDataTemplate><tablewidth="100%"><tr><tdalign="left">Access Keys</td></tr><tr><tdcolspan="2"><asp:LabelID="lblNoUCARData"runat="server"Text="No Soup For You"Width="217px"></asp:Label></td></tr></table>

</EmptyDataTemplate></asp:GridView><asp:ButtonID="btnSave"runat="server"Text="Save & notify"OnClick="btnSave_Click"/></ContentTemplate><Triggers><asp:AsyncPostBackTriggerControlID="gvUsers"EventName="RowCommand"/></Triggers></asp:UpdatePanel></td></tr>

Hi,

I have a similar problem, except that I am loading UserControls with GridView dynamically into the TabPanels. The GridView have buttons that should fire RowCommand. The TabContainer is within an UpdatePanel. My RowCommand event is not firing, did you find any solutions to your problem?

Thanks.

Hook the gvUsers RowCreate Event, Find the Button using the FindControl. Once Found, create asyncpostbacktrigger programatically set the control id to the found button id and add the trigger in the second update panel trigger collection.

Triggering UpdatePanel with controls inside TabPanel

I have a TabContainer with several TabPanels inside, and several of the TabPanels contain Button controls.

<ajaxToolkit:TabContainer ID="InstructionTabs" runat="server" Height="300px">
<ajaxToolkit:TabPanel ID="XLSInstructions" runat="server" HeaderText="Excel">
<ContentTemplate>
<asp:Button ID="btnSubmit" runat="server" OnClick="btnSubmit_Click" Text="Submit" />
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>

Elsewhere on the page, I have an UpdatePanel (not contained inside theTabContainer or TabPanels), and I want to trigger this UpdatePanelusing one of the controls inside the TabPanels.

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
...
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSubmit" />
</Triggers>
</asp:UpdatePanel>

When I hardcode the Trigger, i get an error:

A control with ID 'btnSubmit' could not be found for the trigger in UpdatePanel 'UpdatePanel1'.

Also, using the designer to set the Triggers collection on he UpdatePanel, none of the controls inside the TabPanels are visible, just the TabContainer control itself. Any ideas how to get the UpdatePanel to trigger off a control in a TabPanel?

What you can do is, trigger your UpdatePanel with a javascript function or call UpdatePanel1.Update() inside your btnSubmit_Click() function.