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

AJAX Panel Not Working

6 Answers 79 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
Mike
Top achievements
Rank 1
Mike asked on 17 Oct 2014, 09:15 PM
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?

6 Answers, 1 is accepted

Sort by
0
Maria Ilieva
Telerik team
answered on 22 Oct 2014, 08:12 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Mike
Top achievements
Rank 1
answered on 24 Oct 2014, 04:00 PM
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?
0
Mike
Top achievements
Rank 1
answered on 24 Oct 2014, 05:13 PM
I should note, what I'm trying to accomplish is have the grid load after a filter/page instead of the whole page reload.
0
Maria Ilieva
Telerik team
answered on 29 Oct 2014, 01:17 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Mike
Top achievements
Rank 1
answered on 29 Oct 2014, 03:39 PM
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?
0
Maria Ilieva
Telerik team
answered on 03 Nov 2014, 12:29 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Ajax
Asked by
Mike
Top achievements
Rank 1
Answers by
Maria Ilieva
Telerik team
Mike
Top achievements
Rank 1
Share this question
or