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

Ajax RadWindow Button Clicked

7 Answers 168 Views

Window

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

William asked on 25 Jul 2011, 03:27 PM

I have a RadWindow that is used to update values. When the button is clicked and the event is finished the whole page reloads. I would like to apply some Ajax to the RadWindow so that the whole page doesn't reload when the update is complete, just the RadWindow closes. Below is the code I have so far:

ASP.NET

<telerik:RadAjaxLoadingPanel ID="LocationsLoadingPanel" runat="server" Transparency="30" Skin="Vista"></telerik:RadAjaxLoadingPanel>

<telerik:RadAjaxPanel ID="LocationsPanel" runat="server" LoadingPanelID="LocationsLoadingPanel">

<telerik:RadTreeView ID="LocationsTreeView" runat="server" EnableDragAndDrop="true" MultipleSelect="true" EnableDragAndDropBetweenNodes="true"

AllowNodeEditing="true" OnContextMenuItemClick="LocationsTreeView_ContextMenuItemClick" OnClientContextMenuItemClicking="onClientContextMenuItemClicking"

OnClientContextMenuShowing="onClientContextMenuShowing" OnNodeEdit="LocationsTreeView_NodeEdit"

OnNodeDrop="LocationsTreeView_NodeDrop" OnClientNodeDropping="onNodeDropping" OnClientNodeDragging="onNodeDragging">

<ContextMenus>

<telerik:RadTreeViewContextMenu ID="MainContextMenu" runat="server">

<Items>

<telerik:RadMenuItem Value="Rename" Text="Rename ..." Enabled="true" ImageUrl="images/icons/edit_48.png"

PostBack="false">

</telerik:RadMenuItem>

<telerik:RadMenuItem IsSeparator="true">

</telerik:RadMenuItem>

<telerik:RadMenuItem Value="addLocation" Text="Add Location" ImageUrl="images/icons/add_16.png">

</telerik:RadMenuItem>

<telerik:RadMenuItem Value="editDetails" Text="Edit Details" PostBack="true" />

</Items>

<CollapseAnimation Type="none" />

</telerik:RadTreeViewContextMenu>

</ContextMenus>

</telerik:RadTreeView>

<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" Skin="Vista" DecoratedControls="All" />

<telerik:RadWindow ID="editDetails_RadWindow" runat="server" Modal="true" Behaviors="Close"

Width="300px" Height="150px" DestroyOnClose="true" VisibleStatusbar="false" >

<ContentTemplate>

<table>

<tr>

<td><asp:Label ID="editDetailsIDlbl" Text="ID: " runat="server" /></td>

<td><telerik:RadTextBox ID="editDetailsIDtxt" runat="server" Enabled="false"/>

<asp:Label ID="InjectScript" runat="server" /></td>

</tr>

<tr>

<td><asp:Label ID="editDetailsCostCtrLbl" Text="Cost Center:" runat="server" /></td>

<td><telerik:RadTextBox ID="editDetailsCostCtrTxt" runat="server" EmptyMessage="Enter Cost Center" />

</td>

</tr>

<tr>

<td><asp:Label ID="editDetailsAuxLocLbl" Text="Aux Location: " runat="server" /></td>

<td><telerik:RadTextBox ID="editDetailsAuxLocTxt" runat="server" EmptyMessage="Enter Aux Location" /></td>

</tr>

<tr>

<td colspan="2"><telerik:RadButton ID="editDetailsUpdateBtn" runat="server" Text="Update" CommandArgument="LocationID" OnClick="editDetailsUpdateBtn_Click" /></td>

</tr>

</table>

</ContentTemplate>

</telerik:RadWindow>

<telerik:RadWindowManager ID="locationRadWindow" runat="server" />

</telerik:RadAjaxPanel>

protected void LocationsTreeView_ContextMenuItemClick(object sender, RadTreeViewContextMenuEventArgs e)

{

RadTreeNode clickedNode = e.Node;

switch (e.MenuItem.Value)

{

case "addLocation":

RadTreeNode newLocation = new RadTreeNode(string.Format("New Location"));

newLocation.Selected = true;

newLocation.ImageUrl = clickedNode.ImageUrl;

clickedNode.Nodes.Add(newLocation);

clickedNode.Expanded = true;

//update the number in the brackets

if (Regex.IsMatch(clickedNode.Text, unreadPattern))

clickedNode.Text = Regex.Replace(clickedNode.Text, unreadPattern, "(" + clickedNode.Nodes.Count.ToString() + ")");

clickedNode.Font.Bold = true;

//set node's value so we can find it in startNodeInEditMode

// Add Location Record to Database

string ParentID = clickedNode.Value;

Guid ID = Guid.NewGuid();

string LocationID = ID.ToString();

// Used for naming the node after adding it

newLocation.Value = LocationID;

startNodeInEditMode(newLocation.Value);

string Name = newLocation.Text;

LocationsTreeView_AddLocation(ParentID, LocationID, Name);

break;

case "editDetails":

// Get the location of the item were editing

string LocID = clickedNode.Value;

string CostCtr = "";

string AuxLoc = "";

// Get Cost Center and Aux Location if it exists

SqlCommand locationDetailsCmd = new SqlCommand("SELECT CostCenter, AuxLocationID FROM dbo.Locations WHERE ID='" + LocID + "'", connection);

connection.Open();

SqlDataReader rdr = locationDetailsCmd.ExecuteReader();

while (rdr.Read())

{

if (!rdr.IsDBNull(0))

CostCtr = rdr.GetString(0).ToString();

if (!rdr.IsDBNull(1))

AuxLoc = rdr.GetString(1).ToString();

}

connection.Close();

editDetails_RadWindow.VisibleOnPageLoad = true;

// Set the RadWindow TextBox Values

editDetailsCostCtrTxt.Text = CostCtr;

editDetailsAuxLocTxt.Text = AuxLoc;

editDetailsIDtxt.Text = LocID;

locationRadWindow.Windows.Add(editDetails_RadWindow);

break;

}

protected void editDetailsUpdateBtn_Click(object sender, EventArgs e)

{

string AuxLocation = editDetailsAuxLocTxt.Text;

string CostCenter = editDetailsCostCtrTxt.Text;

string LocationID = editDetailsIDtxt.Text;

SqlCommand editDetailsUpdateCmd = new SqlCommand("UPDATE dbo.locations SET CostCenter='" + CostCenter + "', AuxLocationID='" + AuxLocation + "' WHERE ID ='" + LocationID + "'", connection);

connection.Open();

editDetailsUpdateCmd.ExecuteNonQuery();

connection.Close();

}

7 Answers, 1 is accepted

answered on 25 Jul 2011, 08:19 PM

Adding this bit of code makes it work the way I want it to (closes the RadWindow when update button is pressed without reloading the page). The only issues is that the RadTreeView stops working once the update button has been pushed.

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="editDetailsUpdateBtn">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="LocationsPanel" LoadingPanelID="LocationsLoadingPanel">

</telerik:AjaxUpdatedControl>

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

answered on 26 Jul 2011, 02:59 PM

Hi William,

I am glad that you discovered the RadAjaxManager control and you getting to know it. The issue here stems from the fact that you have ajaxified the controls twice - once with the RadAjaxPanel and once with the RadAjaxManager. I would advise replacing the RadAjaxPanel with a simple asp Panel and adding its id to the updated controls collection of the RadAjaxManager. Please examine the following help article for more information on the matter: http://www.telerik.com/help/aspnet-ajax/ajax-controls-in-ajaxpanel-and-ajaxsettings.html.

I would also recommend reviewing your logic to see if the RadWIndow and RadWindowManager actually need to be inside the update panel, as you can open the RadWindow by injecting a JavaScript function from the code-behind, instead of using the VisibleOnPageLoad property for that:

//editDetails_RadWindow.VisibleOnPageLoad = true;

string script = "function f(){$find('" + editDetails_RadWindow.ClientID + "').show(); Sys.Application.remove_load(f);}Sys.Application.add_load(f);";

ScriptManager.RegisterStartupScript(this, this.GetType(), "key", script, true);

Best wishes,
Marin
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!

answered on 26 Jul 2011, 03:33 PM

I have changed my RadAjaxPanel to an ASP Panel, and I have modified my RadAjaxManager to the following:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="editDetailsUpdateBtn">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="LocationsPanel" LoadingPanelID="LocationsLoadingPanel" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="LocationsPanel">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="LocationsPanel" LoadingPanelID="LocationsLoadingPanel" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

Although it's still reloading the whole page when I click the "Update" button within the RadWindow.

Also on another note; I added the javascript to the codebehind to open the RadWindow. The only issue I have is that I need to populate text boxes in the RadWindow. This doesn't seem to work when I use javascript to open the RadWindow.

Here is the full ASP code:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="editDetailsUpdateBtn">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="LocationsPanel" LoadingPanelID="LocationsLoadingPanel" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="LocationsPanel">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="LocationsPanel" LoadingPanelID="LocationsLoadingPanel" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="LocationsLoadingPanel" runat="server" Transparency="30" Skin="Vista"></telerik:RadAjaxLoadingPanel>

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

<telerik:RadTreeView ID="LocationsTreeView" runat="server" EnableDragAndDrop="true" MultipleSelect="true" EnableDragAndDropBetweenNodes="true"

AllowNodeEditing="true" OnContextMenuItemClick="LocationsTreeView_ContextMenuItemClick" OnClientContextMenuItemClicking="onClientContextMenuItemClicking"

OnClientContextMenuShowing="onClientContextMenuShowing" OnNodeEdit="LocationsTreeView_NodeEdit"

OnNodeDrop="LocationsTreeView_NodeDrop" OnClientNodeDropping="onNodeDropping" OnClientNodeDragging="onNodeDragging">

<ContextMenus>

<telerik:RadTreeViewContextMenu ID="MainContextMenu" runat="server">

<Items>

<telerik:RadMenuItem Value="Rename" Text="Rename ..." Enabled="true" ImageUrl="images/icons/edit_48.png"

PostBack="false">

</telerik:RadMenuItem>

<telerik:RadMenuItem IsSeparator="true">

</telerik:RadMenuItem>

<telerik:RadMenuItem Value="addLocation" Text="Add Location" ImageUrl="images/icons/add_16.png">

</telerik:RadMenuItem>

<telerik:RadMenuItem Value="editDetails" Text="Edit Details" PostBack="true" />

</Items>

<CollapseAnimation Type="none" />

</telerik:RadTreeViewContextMenu>

</ContextMenus>

</telerik:RadTreeView>

<telerik:RadWindow ID="editDetails_RadWindow" runat="server" Modal="true" Behaviors="Close"

Width="600px" Height="400px" DestroyOnClose="true" VisibleStatusbar="false" >

<ContentTemplate>

<table>

<tr>

<td><asp:Label ID="editDetailsIDlbl" Text="ID: " runat="server" /></td>

<td><telerik:RadTextBox ID="editDetailsIDtxt" runat="server" Enabled="false"/></td>

</tr>

<tr>

<td><asp:Label ID="editDetailsCostCtrLbl" Text="Cost Center:" runat="server" /></td>

<td><telerik:RadTextBox ID="editDetailsCostCtrTxt" runat="server" EmptyMessage="Enter Cost Center" />

</td>

</tr>

<tr>

<td><asp:Label ID="editDetailsAuxLocLbl" Text="Aux Location: " runat="server" /></td>

<td><telerik:RadTextBox ID="editDetailsAuxLocTxt" runat="server" EmptyMessage="Enter Aux Location" /></td>

</tr>

<tr>

<td colspan="2"><telerik:RadButton ID="editDetailsUpdateBtn" runat="server" Text="Update" OnClick="editDetailsUpdateBtn_Click" AutoPostBack="true" /></td>

</tr>

</table>

</ContentTemplate>

</telerik:RadWindow>

<telerik:RadWindowManager ID="locationRadWindow" runat="server" />

</asp:Panel>

answered on 27 Jul 2011, 01:03 PM

AjaxifyControls.zip

Hi William,

What I see is that you actually ajaxify the RadButton twice, which results in nested update panels. Therefore the first AJAX setting is not needed, since a postback from within the update panel (which the RadAjaxManager adds around the LocationsPanel Panel) will result in an AJAX request with only the second.

I tried this code and it works as expected on my end: http://screencast.com/t/NlOBcdQXSxp. I only had to remove the handlers for the treeview that I do not have. I also added a label that will be updated when the button is clicked, just for visual clarity. I also believe that it is not necessary to add the editDetails_RadWindow to the RadWindowManager. I have attached my test page a reference. Please compare it with yours and try to locate any other differences than the ones I pointed out (and the databinding, of course).

Best wishes,
Marin
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

answered on 27 Jul 2011, 03:36 PM

Thank you for the screencast, it was very helpful. By comparing code I was able to get the RadWindow to open without the window manager using javascript. This solves a few of my other issues. Although one issue still persists. The entire page will reload when I click the update button in the RadWindow. This also happens when I click a button on the RadGrid within the RadWindow. I can't seem to figure out why this is happening.

Here is a screencast demonstrating what I see:
http://www.screencast.com/t/i8pNijsZ

Below is the lastest version of my code:

ASP

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

            <AjaxSettings>

                <telerik:AjaxSetting AjaxControlID="LocationsPanel">

                    <UpdatedControls>

                        <telerik:AjaxUpdatedControl ControlID="LocationsPanel" LoadingPanelID="LocationsLoadingPanel" />

                    </UpdatedControls>

                </telerik:AjaxSetting>

            </AjaxSettings>

     </telerik:RadAjaxManager>

        <telerik:RadAjaxLoadingPanel ID="LocationsLoadingPanel" runat="server" Transparency="30" Skin="Vista"></telerik:RadAjaxLoadingPanel>

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



            <telerik:RadTreeView ID="LocationsTreeView" runat="server" EnableDragAndDrop="true" MultipleSelect="true" EnableDragAndDropBetweenNodes="true"

            AllowNodeEditing="true" OnContextMenuItemClick="LocationsTreeView_ContextMenuItemClick" OnClientContextMenuItemClicking="onClientContextMenuItemClicking"

            OnClientContextMenuShowing="onClientContextMenuShowing" OnNodeEdit="LocationsTreeView_NodeEdit"

            OnNodeDrop="LocationsTreeView_NodeDrop" OnClientNodeDropping="onNodeDropping" OnClientNodeDragging="onNodeDragging">

             <ContextMenus>

                    <telerik:RadTreeViewContextMenu ID="MainContextMenu" runat="server">

                        <Items>

                            <telerik:RadMenuItem Value="Rename" Text="Rename ..." Enabled="true" ImageUrl="images/icons/edit_48.png"

                                PostBack="false">

                            </telerik:RadMenuItem>

                            <telerik:RadMenuItem IsSeparator="true">

                            </telerik:RadMenuItem>

                            <telerik:RadMenuItem Value="addLocation" Text="Add Location" ImageUrl="images/icons/add_16.png">

                            </telerik:RadMenuItem>

                            <telerik:RadMenuItem Value="editDetails" Text="Edit Details" PostBack="true" />

                        </Items>

                        <CollapseAnimation Type="none" />

                    </telerik:RadTreeViewContextMenu>

                </ContextMenus>

            </telerik:RadTreeView>

            <telerik:RadWindow ID="editDetails_RadWindow" runat="server" Modal="true" Behaviors="Close, Move"

                Width="600px" Height="400px" DestroyOnClose="true" VisibleStatusbar="false" ShowContentDuringLoad="false">

                <ContentTemplate>

                    <table>

                        <tr>

                            <td><asp:Label ID="editDetailsCostCtrLbl" Text="Cost Center:" runat="server" /></td>

                            <td><telerik:RadTextBox ID="editDetailsCostCtrTxt" runat="server" EmptyMessage="Enter Cost Center" /></td>

                        </tr>

                        <tr>

                            <td><asp:Label ID="editDetailsAuxLocLbl" Text="Aux Location: " runat="server" /></td>

                            <td><telerik:RadTextBox ID="editDetailsAuxLocTxt" runat="server" EmptyMessage="Enter Aux Location" /></td>

                        </tr>

                        <tr>

                            

                            <td colspan="2">

                                <asp:Label ID="editDetailsParValueGridLbl" Text="Set Par Values" runat="server" />

                                <telerik:RadGrid ID="itemsParValueGrid" runat="server" AutoGenerateColumns="false" AllowPaging="true" Width="500px"

                                 OnItemCommand="itemsParValueGrid_ItemCommand">

                                    <MasterTableView CommandItemDisplay="Top" EnableNoRecordsTemplate="true" ShowHeadersWhenNoRecords="true" AllowAutomaticUpdates="true">

                                        <NoRecordsTemplate>

                                            <div>There are no records to display</div>

                                        </NoRecordsTemplate>

                                        <Columns>

                                            <telerik:GridEditCommandColumn />

                                            <telerik:GridBoundColumn DataField="Description" HeaderText="Description" />

                                            <telerik:GridBoundColumn DataField="PSNum" HeaderText="PS #" />

                                            <telerik:GridBoundColumn DataField="Min" HeaderText="Min" />

                                            <telerik:GridBoundColumn DataField="Max" HeaderText="Max" />

                                        </Columns>





                                        <CommandItemSettings ShowRefreshButton="false" />

                                    </MasterTableView>

                                </telerik:RadGrid>

                            </td>

                            

                        </tr>

                        <tr>

                            <td colspan="2"><telerik:RadButton ID="editDetailsUpdateBtn" runat="server" Text="Update" OnClick="editDetailsUpdateBtn_Click" AutoPostBack="true" /></td>

                        </tr>

                    </table>

                </ContentTemplate>

            </telerik:RadWindow>

        </asp:Panel>

C#

case "editDetails":

                    // Get the location of the item were editing

                    string LocID = clickedNode.Value;

                    string CostCtr = "";

                    string AuxLoc = "";

                    // SQL Commands

                    SqlCommand locationDetailsCmd = new SqlCommand("SELECT CostCenter, AuxLocationID FROM dbo.Locations WHERE ID='" + LocID + "'", connection);

                    connection.Open();

                        SqlDataReader rdr = locationDetailsCmd.ExecuteReader();

                        while (rdr.Read())

                        {

                            if (!rdr.IsDBNull(0))

                            CostCtr = rdr.GetString(0).ToString();

                            if (!rdr.IsDBNull(1))

                            AuxLoc = rdr.GetString(1).ToString();

                        }

                    connection.Close();



                    //editDetails_RadWindow.VisibleOnPageLoad = true;

                    // Set the RadWindow TextBox Values

                    editDetailsCostCtrTxt.Text = CostCtr;

                    editDetailsAuxLocTxt.Text = AuxLoc;

                    editDetailsLocationID = LocID;

                    // Bind the Location Par Value Grid

                    itemsParValueGrid.DataSource = GetDataTable("SELECT items.Description,items.CrossRefID as [PSNum],ItemParValues.Min,ItemParValues.Max FROM dbo.ItemParValues INNER JOIN dbo.items ON items.ID = ItemParValues.ItemID WHERE ItemParValues.LocationID = '" + LocID + "' ORDER BY [PSNum]");

                    itemsParValueGrid.DataBind();

                    // Add new instance

                    //locationRadWindow.Windows.Add(editDetails_RadWindow);

                    string script = "function f(){$find('" + editDetails_RadWindow.ClientID + "').show(); Sys.Application.remove_load(f);}Sys.Application.add_load(f);";

                    ScriptManager.RegisterStartupScript(this, this.GetType(), "key", script, true);

                    break;

Accepted

answered on 28 Jul 2011, 03:46 PM

ajaxifyRadWindow.zip

Hello William,

I am sorry for missing one fact in my previous reply. When the RadWindow is used with its ContentTemplate the content is actually a part of the page and when the RadWindow is shown this content is moved in the DOM (it has to be a direct child of the form for a number of reasons), so it no longer remains in the update panel where it is declared. This results in a full postback, as the update panels use the innerHTML property and cannot find the now missing content.

To work around this I would advise taking the RadWindow out of the first panel as it will not ajaxify it correctly anyway, so this will save some unnecessary data from being transferred. Then I would add a Panel in the ContentTemplate that shall be an initiator for an AJAX request in the RadAjaxManager.

I modified my test page to do this and to show the correct behavior I use two labels - one is an updated control, the other isn't. I update both in the code-behind, yet only one is sent to the client, as expected: http://screencast.com/t/MgjgF4YD. You can extend this logic further to update other controls and parts of the page as you need by adding more controls to the UpdatedControls collection for this setting.

Kind regards,
Marin
the Telerik team