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
>