RadWizard and RadAjaxLoadingPanel

[VikingCoder]

I have a RadWizard that I would like to have a "loading" function on, when user clicks on "Next" button. However, it only works on the first click. All subsequent clicks on "next" show no loading from the RadAjaxLoadingPanel.

[Rumen]

Hi Finn,

To show the loading panel, the wizard step should invoke postback which can be done by attaching to the OnActiveStepChanged server event of the control. Here is an example:

<telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel">
</telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxPanel runat="server" LoadingPanelID="RadAjaxLoadingPanel">
    <telerik:RadWizard runat="server" ID="RadWizard1" OnActiveStepChanged="RadWizard1_ActiveStepChanged">
        <WizardSteps>
            <telerik:RadWizardStep ID="RadWizardStep12" StepType="Start" >

                <telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" Width="800px" OnNeedDataSource="RadGrid1_NeedDataSource">
                    <ClientSettings>
                        <Scrolling AllowScroll="True" EnableVirtualScrollPaging="True" UseStaticHeaders="True"
                            SaveScrollPosition="True" />
                    </ClientSettings>
                    <MasterTableView AutoGenerateColumns="False" DataKeyNames="OrderID">
                        <Columns>
                            <telerik:GridBoundColumn DataField="OrderID" DataType="System.Int32"
                                FilterControlAltText="Filter OrderID column" HeaderText="OrderID"
                                ReadOnly="True" SortExpression="OrderID" UniqueName="OrderID">
                            </telerik:GridBoundColumn>
                            <telerik:GridDateTimeColumn DataField="OrderDate" DataType="System.DateTime"
                                FilterControlAltText="Filter OrderDate column" HeaderText="OrderDate"
                                SortExpression="OrderDate" UniqueName="OrderDate">
                            </telerik:GridDateTimeColumn>
                            <telerik:GridNumericColumn DataField="Freight" DataType="System.Decimal"
                                FilterControlAltText="Filter Freight column" HeaderText="Freight"
                                SortExpression="Freight" UniqueName="Freight">
                            </telerik:GridNumericColumn>
                            <telerik:GridBoundColumn DataField="ShipName"
                                FilterControlAltText="Filter ShipName column" HeaderText="ShipName"
                                SortExpression="ShipName" UniqueName="ShipName">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="ShipCountry"
                                FilterControlAltText="Filter ShipCountry column" HeaderText="ShipCountry"
                                SortExpression="ShipCountry" UniqueName="ShipCountry">
                            </telerik:GridBoundColumn>
                        </Columns>
                    </MasterTableView>
                </telerik:RadGrid>

            </telerik:RadWizardStep>
            <telerik:RadWizardStep ID="RadWizardStep13">
                                        <telerik:RadGrid ID="RadGrid2" runat="server" Skin="Black" AllowPaging="True" Width="800px" Height= OnNeedDataSource="RadGrid1_NeedDataSource">
                    <ClientSettings>
                        <Scrolling AllowScroll="True"  UseStaticHeaders="True"
                            SaveScrollPosition="True" />
                    </ClientSettings>
                    <MasterTableView AutoGenerateColumns="False" DataKeyNames="OrderID">
                        <Columns>
                            <telerik:GridBoundColumn DataField="OrderID" DataType="System.Int32"
                                FilterControlAltText="Filter OrderID column" HeaderText="OrderID"
                                ReadOnly="True" SortExpression="OrderID" UniqueName="OrderID">
                            </telerik:GridBoundColumn>
                            <telerik:GridDateTimeColumn DataField="OrderDate" DataType="System.DateTime"
                                FilterControlAltText="Filter OrderDate column" HeaderText="OrderDate"
                                SortExpression="OrderDate" UniqueName="OrderDate">
                            </telerik:GridDateTimeColumn>
                            <telerik:GridNumericColumn DataField="Freight" DataType="System.Decimal"
                                FilterControlAltText="Filter Freight column" HeaderText="Freight"
                                SortExpression="Freight" UniqueName="Freight">
                            </telerik:GridNumericColumn>
                            <telerik:GridBoundColumn DataField="ShipName"
                                FilterControlAltText="Filter ShipName column" HeaderText="ShipName"
                                SortExpression="ShipName" UniqueName="ShipName">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="ShipCountry"
                                FilterControlAltText="Filter ShipCountry column" HeaderText="ShipCountry"
                                SortExpression="ShipCountry" UniqueName="ShipCountry">
                            </telerik:GridBoundColumn>
                        </Columns>
                    </MasterTableView>
                </telerik:RadGrid>
            </telerik:RadWizardStep>
            <telerik:RadWizardStep ID="RadWizardStep14">
                                        <telerik:RadGrid ID="RadGrid3" runat="server" AllowPaging="True" Width="800px" OnNeedDataSource="RadGrid1_NeedDataSource">
                    <ClientSettings>
                        <Scrolling AllowScroll="True" EnableVirtualScrollPaging="True" UseStaticHeaders="True"
                            SaveScrollPosition="True" />
                    </ClientSettings>
                    <MasterTableView AutoGenerateColumns="False" DataKeyNames="OrderID">
                        <Columns>
                            <telerik:GridBoundColumn DataField="OrderID" DataType="System.Int32"
                                FilterControlAltText="Filter OrderID column" HeaderText="OrderID"
                                ReadOnly="True" SortExpression="OrderID" UniqueName="OrderID">
                            </telerik:GridBoundColumn>
                            <telerik:GridDateTimeColumn DataField="OrderDate" DataType="System.DateTime"
                                FilterControlAltText="Filter OrderDate column" HeaderText="OrderDate"
                                SortExpression="OrderDate" UniqueName="OrderDate">
                            </telerik:GridDateTimeColumn>
                            <telerik:GridNumericColumn DataField="Freight" DataType="System.Decimal"
                                FilterControlAltText="Filter Freight column" HeaderText="Freight"
                                SortExpression="Freight" UniqueName="Freight">
                            </telerik:GridNumericColumn>
                            <telerik:GridBoundColumn DataField="ShipName"
                                FilterControlAltText="Filter ShipName column" HeaderText="ShipName"
                                SortExpression="ShipName" UniqueName="ShipName">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="ShipCountry"
                                FilterControlAltText="Filter ShipCountry column" HeaderText="ShipCountry"
                                SortExpression="ShipCountry" UniqueName="ShipCountry">
                            </telerik:GridBoundColumn>
                        </Columns>
                    </MasterTableView>
                </telerik:RadGrid>
            </telerik:RadWizardStep>
        </WizardSteps>
    </telerik:RadWizard>
</telerik:RadAjaxPanel>

ASPX.CS

using System;
using System.Collections;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Drawing;
using System.Globalization;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;

namespace RadFilterDemo
{
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {



        }

        protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
        {
            RadGrid1.DataSource = OrdersTable();
            RadGrid2.DataSource = OrdersTable();
            RadGrid3.DataSource = OrdersTable();
        }

        private DataTable OrdersTable()
        {
            DataTable dt = new DataTable();

            dt.Columns.Add(new DataColumn("OrderID", typeof(int)));
            dt.Columns.Add(new DataColumn("OrderDate", typeof(DateTime)));
            dt.Columns.Add(new DataColumn("Freight", typeof(decimal)));
            dt.Columns.Add(new DataColumn("ShipName", typeof(string)));
            dt.Columns.Add(new DataColumn("ShipCountry", typeof(string)));

            dt.PrimaryKey = new DataColumn[] { dt.Columns["OrderID"] };

            for (int i = 0; i < 7000; i++)
            {
                int index = i + 1;

                DataRow row = dt.NewRow();

                row["OrderID"] = index;
                row["OrderDate"] = new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 0, 0, 0).AddHours(index);
                row["Freight"] = index * 0.1 + index * 0.01;
                row["ShipName"] = "Name " + index;
                row["ShipCountry"] = "Country " + index;

                dt.Rows.Add(row);
            }

            return dt;
        }

        protected void RadWizard1_ActiveStepChanged(object sender, EventArgs e)
        {

        }
    }
}

Regards,
Rumen
Progress Telerik

[VikingCoder]

Hi 

It certainly improved, but I still have an issue remaining. My Wizard has about 20 steps, and with the above changes, only every second click on "Next" shows the loading panel. Every other click does not. I do also have a OnNextButtonClick event; could that have something to do with it?

thanks

[Rumen]

Hi Finn,

On my side regardless of the steps count and that the OnNextButtonClick is set, the loading panel pops up every time. You can see the attached video and test my project.

Regards,
Rumen
Progress Telerik