AJAX Panel Not Working

7 posts, 0 answers
  1. Mike
    Mike avatar
    74 posts
    Member since:
    Mar 2013

    Posted 17 Oct 2014 Link to this post

    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?
  2. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 22 Oct 2014 Link to this post

    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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Mike
    Mike avatar
    74 posts
    Member since:
    Mar 2013

    Posted 24 Oct 2014 in reply to Maria Ilieva Link to this post

    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?
  5. Mike
    Mike avatar
    74 posts
    Member since:
    Mar 2013

    Posted 24 Oct 2014 in reply to Mike Link to this post

    I should note, what I'm trying to accomplish is have the grid load after a filter/page instead of the whole page reload.
  6. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 29 Oct 2014 Link to this post

    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.

     
  7. Mike
    Mike avatar
    74 posts
    Member since:
    Mar 2013

    Posted 29 Oct 2014 in reply to Maria Ilieva Link to this post

    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?
  8. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 03 Nov 2014 Link to this post

    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.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017