How to Refresh a RadPanelItem Only?

[Mark]

I have a RadGrid inside of a RadPanelItem that is being bound via a DataSourceID in the markup. The Update and Delete functions are defined within an SQLDatasource object and are working fine. 

However, I have chosen to write my own markup to customize the look and feel by implementing my own design just above the RadGrid inside of a div with labels and buttons to perform addition of a record to the Grid.

When the Add button is clicked, an ajax call is made via javascript to a webservice PageMethod that performs the addition of a record and then rebinds the grid.

The problem I am having is after the RadGrid is rebound, the div above the RadGrid and all its content is gone and only the RadGrid remains on the page. The only way to have all the content displayed as it was before rebinding the Grid is to perform a PostBack of the entire page which isn't acceptable. I'd like the entire RadPanelItem to appear as it was before the Grid Rebind event. I don't know why Rebinding the Grid should affect all the content in the RadPanelItem.

I have attempted to resolve the issue by placing only the RadGrid inside of a RadAjaxPanel but the results are the same although the loading image clearly indicates that only the RadGrid should be affected.

How can I refresh the RadGrid content without loosing the layout of other items within the Panel Item? This behavior does not seem correct.

 

<telerik:RadPanelBar runat="server" ID="pnlAdminConsole" Height="680" Width="100%" ExpandAnimation-Type="InOutSine" ExpandMode="SingleExpandedItem"<Items>
<telerik:RadPanelItem Text="Other Tasks" Value="Other Tasks" HoveredImageUrl="../Images/folderopen.gif" SelectedImageUrl="../Images/folderopen.gif" ImageUrl="../Images/folderclose.gif" Expanded="false"
  <ContentTemplate>
    <div class="cssPanelItem"><img id="Img1" src="../Images/comingsoon.png" runat="server"/></div>
  </ContentTemplate>
 </telerik:RadPanelItem>

 

<telerik:RadPanelItem Text="Manage User Access" Value="Manage User Access" HoveredImageUrl="../Images/folderopen.gif" SelectedImageUrl="../Images/folderopen.gif" ImageUrl="../Images/folderclose.gif" Expanded="false">
 <ContentTemplate>
    <div class="cssPanelItem">
    <div class="container well" id="NewUserHeader"  style="height:175px;">
       <div class="row">
         <div class="col-sm-12">
            <h4><label>Create New User</label></h4>
         </div>
      </div>
      <div style="position:relative;margin-left:auto;margin-right:auto;height:50px;" class="row">
<div class="col-sm-3">
<label>First Name</label>
</div>
<div style="position:relative;left:-50px;" class="col-sm-2">
<label>Last Name</label>
</div>
<div style="position:relative;"class="col-sm-3">
<label>Email</label>
</div>
<div style="position:relative;left:-50px;" class="col-sm-2">
<label>Phone</label>
</div>
<div  style="position:relative;left:-40px;" class="col-sm-2">
<label>Enable Admin Access</label>
</div>
</div>
<div style="position:relative;top:-30px;left:10px;" class="row">
<div class="col-sm-3">
<input style="margin-left:5px;" type="text" id="txtUserFirstName" />
</div>
<div style="position:relative;left:-60px;" class="col-sm-2">
<input style="margin-left:5px;" type="text" id="txtUserLastName" />
</div>
<div style="position:relative;"class="col-sm-3">
<input style="position:relative;left:-7px;" type="text" id="txtUserEmail" />
</div>
<div style="position:relative;left:-69px;" class="col-sm-2">
<input type="text" id="txtUserPhone" style="margin-left:5px;" name="txtAdminPhone" maxlength="14"  />
</div>
<div  style="position:relative;left:-23px;top:5px;"class="col-sm-2">
<input type="checkbox" style="margin-left:5px;" id="chkEnableAdminAccess" />
</div>
</div>
<div style="position:relative;top:-20px;" class="row">
<div class="col-sm-12 col-sm-push-10">
<input onclick="ValidateNewUser();" type="button" class="btn-sm" value="Add New User" />
</div>
</div>
</div>
            <div class="container">
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"></telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
<div class="row">
<div id="gridAdminContainer" style="position:relative;left:-15px;top:-30px" class="col-sm-12">
<telerik:RadGrid ID="gridUsers" DataSourceID="AdminDataSet" ViewStateMode="Enabled"
 EnableViewState="true" OnDataBound="gridUsers_DataBound" AllowSorting="true" PagerStyle-Mode="Slider"
 runat="server" AllowAutomaticUpdates="true" AllowAutomaticDeletes="true" AutoGenerateColumns="true"
 MasterTableView-DataKeyNames="UserID, UserName, FirstName, LastName, Email, AllowAdminAccess">
<MasterTableView EditMode="InPlace" AllowPaging="true" PagerStyle-Mode="Slider" >
<PagerStyle AlwaysVisible="true" />
<Columns>
<telerik:GridEditCommandColumn ButtonType="FontIconButton" EditText="Edit" />
<telerik:GridButtonColumn Text="Delete" CommandName="Delete" ButtonType="FontIconButton" />
</Columns>
</MasterTableView>
<ClientSettings AllowKeyboardNavigation="true">
<Selecting AllowRowSelect="true" />
<Scrolling AllowScroll="true" ScrollHeight="500" />
</ClientSettings>
</telerik:RadGrid>
</div>
</div>
</telerik:RadAjaxPanel>
</div>
</div>
</ContentTemplate>
 </telerik:RadPanelItem>
    </Items>
 </telerik:RadPanelBar>

[Mark]

I managed to solve this problem by repositioning the custom content from above the RadGrid and placing it inside of a ContentItemTemplate area of the MasterTableView.