AJAX Panel Not Working

[Mike]

I'm trying to prevent page refreshes on a page with a single grid so I've tried to implement the Ajax Manager, the Ajax Panel and the Ajax Loading Panel.  However, it is not working as I'd expect (or how the demo's work).

The code I have is as follows:

<telerik:RadAjaxManager runat="server" ID="radAjaxManager" EnableAJAX="True">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="radInspection">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="radInspection" LoadingPanelID="radlpInspection"/>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel runat="server" ID="radlpInspection"></telerik:RadAjaxLoadingPanel>
    <telerik:RadAjaxPanel runat="server" ID="radpnlInspection" LoadingPanelID="radlpInspection" EnableAJAX="True">
        <telerik:RadGrid runat="server" ID="radInspection" AllowPaging="True" AllowSorting="True" ShowHeader="True" GridLines="None" CellPadding="0" CellSpacing="0"
            PageSize="20" AllowFilteringByColumn="True" OnNeedDataSource="radInspection_OnNeedDataSource" OnItemCommand="radInspection_OnItemCommand">
            <ClientSettings AllowColumnsReorder="False" EnableRowHoverStyle="True" EnablePostBackOnRowClick="True">
                <Selecting AllowRowSelect="True"></Selecting>
                <Scrolling UseStaticHeaders="True"></Scrolling>
            </ClientSettings>
            <MasterTableView DataKeyNames="inspection_id" AutoGenerateColumns="False" AllowMultiColumnSorting="True" EnableHeaderContextMenu="True"
                AllowFilteringByColumn="True" CommandItemDisplay="TopAndBottom" Height="100%">
                <NoRecordsTemplate>No inspections.</NoRecordsTemplate>
                <CommandItemSettings ShowAddNewRecordButton="False" ShowCancelChangesButton="False" ShowSaveChangesButton="False" ShowRefreshButton="True"></CommandItemSettings>
                <Columns>
                    <telerik:GridBoundColumn DataField="inspection_id" HeaderText="ID" AllowFiltering="False">
                        <HeaderStyle Width="1%" VerticalAlign="Top" HorizontalAlign="Right"></HeaderStyle>
                        <ItemStyle Width="1%" VerticalAlign="Top" HorizontalAlign="Right"></ItemStyle>
                    </telerik:GridBoundColumn>
                    <telerik:GridDateTimeColumn DataField="inspection_datetime" HeaderText="Inspection Date" EnableTimeIndependentFiltering="True"
                        PickerType="DateTimePicker" DataFormatString="{0:MM/dd/yyyy HH:mm}" FilterControlWidth="85%">
                        <ItemStyle Width="5%" VerticalAlign="Top" HorizontalAlign="Left"></ItemStyle>
                        <HeaderStyle Width="5%"></HeaderStyle>
                    </telerik:GridDateTimeColumn>
                    <telerik:GridBoundColumn DataField="inspector" HeaderText="Inspector" FilterControlWidth="75%">
                        <HeaderStyle Width="5%"></HeaderStyle>
                        <ItemStyle Width="5%" VerticalAlign="Top" HorizontalAlign="Left"></ItemStyle>
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="division" HeaderText="Division" FilterControlWidth="75%">
                        <HeaderStyle Width="5%"></HeaderStyle>
                        <ItemStyle Width="5%" VerticalAlign="Top" HorizontalAlign="Left"></ItemStyle>
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="full_grade" HeaderText="Grade" FilterControlWidth="75%">
                        <HeaderStyle Width="5%"></HeaderStyle>
                        <ItemStyle Width="5%" VerticalAlign="Top" HorizontalAlign="Left"></ItemStyle>
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="length_description" HeaderText="Length" FilterControlWidth="75%">
                        <HeaderStyle Width="5%"></HeaderStyle>
                        <ItemStyle Width="5%" VerticalAlign="Top" HorizontalAlign="Left"></ItemStyle>
                    </telerik:GridBoundColumn>
                    <telerik:GridCheckBoxColumn DataField="complete" HeaderText="Completed" AllowFiltering="False">
                        <HeaderStyle Width="2%" HorizontalAlign="Right"></HeaderStyle>
                        <ItemStyle Width="2%" VerticalAlign="Top" HorizontalAlign="Right"></ItemStyle>
                    </telerik:GridCheckBoxColumn>
                </Columns>
            </MasterTableView>
        </telerik:RadGrid>
    </telerik:RadAjaxPanel>

Code Behind:

protected void Page_Load(object sender, EventArgs e)
    {
      if (Session["Key"] != null)
      {
        Session["Key"] = -1;
      }
      if (!IsPostBack)
      {
        LoadData();
      }
    }

    private void LoadData()
    {
      var inspections = dal.Inspection.GetVInspectionHeaders();
      radInspection.DataSource = inspections;
    }

    protected void radInspection_OnNeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
      LoadData();
    }

    protected void radNew_OnClick(object sender, EventArgs e)
    {
      Session["Key"] = -1;
      Response.Redirect("header.aspx");
    }

    protected void radInspection_OnItemCommand(object sender, GridCommandEventArgs e)
    {
      if (e.CommandName == "RowClick")
      {
        GridEditableItem item = e.Item as GridEditableItem;
        if (item == null)
        {
          return;
        }
        var key = item.GetDataKeyValue("inspection_id").ToString();
        Response.Redirect(string.Format("viewinspection.aspx?id={0}", key));
      }
    }
  }

Any ideas as to what I'm doing wrong?

[Maria Ilieva]

Hello Mike,

Note that it is not a supported scenario to use the RadAjaxManager and RadAjaxPanel to update the same  controls on the page. I would suggest you to replace the RadAjaxPanel with regular asp Panel control and add the asp panel into the RadAjaxManager settings.
Also please note that in order to have the RadAjaxManager properly ajaxifying controls you should place a ScriptManager control before the RadAjaxManager declaration on the very top f the page.

I hope this helps.

Regards,
Maria Ilieva
Telerik

 

 

[Mike]

Ok, so if I switch the RadAjaxPanel to an ASP Panel (named pnlInspection), where  would that fit in to the Rad Ajax Manager?  Do I set the Control ID property on the Ajax Setting or in the Ajax UpdatedControl?  Or both?

[Mike]

I should note, what I'm trying to accomplish is have the grid load after a filter/page instead of the whole page reload.

[Maria Ilieva]

Hi Mike,


The  modified code should look like this:

<telerik:RadAjaxManager runat="server" ID="radAjaxManager" EnableAJAX="True">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="pnlInspection">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="pnlInspection" LoadingPanelID="radlpInspection"/>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <asp:RadAjaxLoadingPanel runat="server" ID="radlpInspection"></telerik:RadAjaxLoadingPanel>
    <asp:Panel runat="server" ID="pnlInspection">
        <telerik:RadGrid runat="server" ID="radInspection" AllowPaging="True" AllowSorting="True" ShowHeader="True" ...............................>
       </telerik:RadGrid>
</asp:Panel>

Regards,
Maria Ilieva
Telerik

 

 

[Mike]

This still doesn't seem to solve my issue (or desired results?).  It seems that the first filter causes a full page refresh, and I'm assuming subsequent filters (but just too fast to see the refresh).  Thoughts?

[Maria Ilieva]

Hi Mike,

As the provided suggestions did not help, it will be best if you can open a regular support ticket and send us a sample runnable version your application that demonstrates the issue. Thus we will be able to test your application locally and advise you further.

Regards,
Maria Ilieva
Telerik