Hello,
I have the following scenario: I have a RadGrid (parent) that has a nested RadGrid within it. Inside the nested grid I have a GridTemplateColumn that contains a RadButton.
<
telerik:RadGrid
ID
=
"grdListEvents"
runat
=
"server"
CssClass
=
"RadGridEvents"
AutoGenerateColumns
=
"false"
Skin
=
"Default"
EnableEmbeddedSkins
=
"true"
ShowGroupPanel
=
"false"
ShowHeader
=
"false"
OnNeedDataSource
=
"grdListEvents_NeedDataSource"
>
<
MasterTableView
DataKeyNames
=
"EventYear"
Width
=
"100%"
HierarchyLoadMode
=
"Client"
>
<
Columns
>
<
telerik:GridBoundColumn
DataField
=
"EventYear"
ReadOnly
=
"True"
UniqueName
=
"EventYear"
>
<
ItemStyle
CssClass
=
"BOLD_Labels"
/>
</
telerik:GridBoundColumn
>
</
Columns
>
<
NestedViewTemplate
>
<
telerik:RadGrid
ID
=
"grdNestedEvents"
runat
=
"server"
Skin
=
"Default"
EnableEmbeddedSkins
=
"true"
CssClass
=
"NestedGridEvents"
AutoGenerateColumns
=
"false"
Width
=
"99.5%"
OnNeedDataSource
=
"grdNestedEvents_NeedDataSource"
OnItemCommand
=
"grdNestedEvents_ItemCommand"
OnItemDataBound
=
"grdNestedEvents_ItemDataBound"
OnItemCreated
=
"grdNestedEvents_ItemCreated"
>
<
MasterTableView
EnableNoRecordsTemplate
=
"true"
ShowHeadersWhenNoRecords
=
"true"
TableLayout
=
"Fixed"
ShowGroupFooter
=
"true"
DataKeyNames
=
"tEventID"
ClientDataKeyNames
=
"tEventID"
>
<
Columns
>
<
telerik:GridTemplateColumn
UniqueName
=
"EditEvent"
HeaderText
=
"Event Details"
>
<
HeaderStyle
HorizontalAlign
=
"Center"
/>
<
ItemStyle
HorizontalAlign
=
"Center"
/>
<
ItemTemplate
>
<
telerik:RadButton
runat
=
"server"
ID
=
"lnkEditEvent"
Text
=
"Edit"
AutoPostBack
=
"false"
EnableEmbeddedSkins
=
"false"
EnableEmbeddedBaseStylesheet
=
"false"
ButtonType
=
"LinkButton"
CssClass
=
"rbClearButton rbHyperlinkButton"
>
</
telerik:RadButton
>
</
ItemTemplate
>
</
telerik:GridTemplateColumn
>
</
Columns
>
</
MasterTableView
>
</
telerik:RadGrid
>
</
NestedViewTemplate
>
</
MasterTableView
>
</
telerik:RadGrid
>
The OnClick client-event of the RadButton is set in the Nested grid's ItemCreated event. This is done this way so that I can pass some needed parameters to the JavaScript function:
if
(e.Item
is
GridDataItem)
{
GridDataItem item = (GridDataItem)e.Item;
RadGrid grid = (RadGrid)sender;
RadButton lnkEditEvent = (RadButton)item.FindControl(
"lnkEditEvent"
);
int
index = item.ItemIndex;
int
datakeyValue = Convert.ToInt32(item.GetDataKeyValue(
"tEventID"
));
string
cssSelector =
"RadWindow_EditEvent"
;
string
radWindow =
"rdwEditEvent"
;
string
radWidth =
"610"
;
string
radHeight =
"610"
;
lnkEditEvent.Attributes.Add(
"OnClick"
,
"btnEdit_OnClientClick('"
+ lnkEditEvent.ClientID
+
"', '"
+ index +
"', '"
+ grid.ClientID +
"', '"
+ datakeyValue
+
"', '"
+ cssSelector +
"', '"
+ radWindow +
"', '"
+ radWidth +
"', '"
+ radHeight +
"')"
);
}
The JavaScript function opens a RadWindow that contains a RadListView. The RadListView is populated via a $.getJSON JQuery function that executes a WCF service that returns a JSON list that populates the RadListView.
function
btnEdit_OnClientClick(btnId, itemIndex, gridId, dataKeyValue, cssSelector, radWindow, radWidth, radHeight) {
var
url =
""
;
//Open RadWindow
var
oManager = GetRadWindowManager();
var
oWnd = oManager.getWindowByName(radWindow);
var
width = getWidth(
'#'
+ cssSelector +
''
, radWidth);
var
height = getHeight(
'#'
+ cssSelector +
''
, radHeight);
if
(oWnd) {
oWnd.show();
oWnd.setSize(width, height);
oWnd.center();
oWnd.setSize(width, height);
oWnd.set_modal(
true
);
oWnd.set_behaviors(Telerik.Web.UI.WindowBehaviors.none);
}
urlEventPhotos =
'<%=strAppSettingEditEvents %>'
+
'GetEventPhotos?EventID='
+ dataKeyValue;
strTrainingPhotos =
'<%=(String.Format(strTrainingPhotosPath).ToString()).Replace("\\", "\\\\")%>'
;
var
lstEventPhotosEdit = $find(
'<%=lstEventPhotosEdit.ClientID%>'
);
$.getJSON(urlEventPhotos,
function
(result) {
//if (result) {
$.each(result,
function
(a, item) {
tEvent_photo_name = item.tEvent_photo_name;
tEvent_photoPath = item.tEvent_photoPath;
});
//}
lstEventPhotosEdit.set_dataSource(result);
lstEventPhotosEdit.dataBind();
});
}
This all works fine. When the user clicks on the RadButton the Radwindow opens and the RadListView is loaded with values obtained from the WCF service.
Here's the markup for my RadWindow that resides inside a RadWindowManager:
<telerik:RadWindowManager ID=
"rwmEvents"
runat=
"server"
EnableEmbeddedSkins=
"true"
Skin=
"Metro"
PreserveClientState=
"true"
EnableViewState=
"false"
ReloadOnShow=
"true"
VisibleOnPageLoad=
"false"
ShowContentDuringLoad=
"false"
>
<Windows>
<telerik:RadWindow ID=
"rdwEditEvent"
runat=
"server"
Title=
"Edit Event"
Modal=
"true"
CenterIfModal=
"true"
VisibleStatusbar=
"false"
>
<ContentTemplate>
<asp:UpdatePanel ID=
"pnlEditEvent"
runat=
"server"
UpdateMode=
"Conditional"
>
<ContentTemplate>
<div runat=
"server"
id=
"divEditEvent"
>
<div id=
"EditEventDiv"
runat=
"server"
class=
"EVENT_Div Shadow"
>
<div class=
"DIV_One DIV_PhotoList"
>
<asp:Label ID=
"lblEventPhotos"
runat=
"server"
Text=
"Event Photos: "
CssClass=
"BOLD_Labels"
></asp:Label>
<telerik:RadListView ID=
"lstEventPhotosEdit"
runat=
"server"
ItemPlaceholderID=
"pnlPhotos"
>
<LayoutTemplate>
<div id=
"pnlPhotos"
></div>
</LayoutTemplate>
<ClientSettings>
<DataBinding ItemPlaceHolderID=
"pnlPhotos"
>
<ItemTemplate>
<a href=
"#= strTrainingPhotos ##= tEvent_photoPath #"
target=
"_blank"
class=
"GeneralFont"
>#= tEvent_photo_name #</a>
</ItemTemplate>
<EmptyDataTemplate><div class=
"GeneralFont"
>No photos have been uploaded.</div></EmptyDataTemplate>
</DataBinding>
</ClientSettings>
</telerik:RadListView>
</div>
<div>
<div id=
"divFileUpload"
runat=
"server"
class=
"DIV_PhotoUpload"
>
<div style=
"padding-bottom: 5px;"
>
<asp:Label ID=
"lblFileUpload"
runat=
"server"
AssociatedControlID=
"rauPhotoUpload"
Text=
"Select a Photo for Uploading:"
CssClass=
"GeneralFont"
></asp:Label>
</div>
<script type=
"text/javascript"
>
Telerik.Web.UI.RadAsyncUpload.Modules.Flash.isAvailable =
function
() {
return
false
; }
Telerik.Web.UI.RadAsyncUpload.Modules.FileApi.isAvailable =
function
() {
return
false
; }
//Telerik.Web.UI.RadAsyncUpload.Modules.IFrame.isAvailable = function () { return false; };
//Telerik.Web.UI.RadAsyncUpload.Modules.Silverlight.isAvailable = function () { return false; }
</script>
<telerik:RadAsyncUpload ID=
"rauPhotoUpload"
runat=
"server"
HideFileInput=
"true"
UploadedFilesRendering=
"BelowFileInput"
MaxFileInputsCount=
"1"
AllowedFileExtensions=
"jpeg,jpg,gif,tif,tiff,png"
MultipleFileSelection=
"Automatic"
UseApplicationPoolImpersonation=
"true"
OnFileUploaded=
"rauPhotoUpload_FileUploaded"
Skin=
"Default"
EnableEmbeddedSkins=
"true"
Localization-Select=
"Browse"
OnClientValidationFailed=
"validationFailed"
>
<FileFilters>
<telerik:FileFilter Description=
"Images(jpeg,jpg,gif,tif,tiff,png)"
Extensions=
"jpeg,jpg,gif,tif,tiff,png"
/>
</FileFilters>
</telerik:RadAsyncUpload>
</div>
<div id=
"divFileUploadTitle"
class=
"DIV_PhotoUploadTitle"
>
<div style=
"padding-bottom: 5px; padding-left: 5px;"
>
<asp:Label ID=
"lblPhotoTitle"
runat=
"server"
AssociatedControlID=
""
Text=
"Class Photo Title: "
CssClass=
"GeneralFont"
></asp:Label><br />
<telerik:RadTextBox ID=
"txtPhotoTitle"
runat=
"server"
Width=
"90%"
Style=
"margin-top: 5px;"
></telerik:RadTextBox>
</div>
</div>
</div>
</div>
<div class=
"DIV_One_Buttons"
>
<div class=
"DIV_One_Buttons_LFloat"
>
<telerik:RadButton ID=
"btnSaveEditEvent"
runat=
"server"
CommandName=
"SaveEditEvent"
Text=
"Save Event"
OnClick=
"btnSaveEditEvent_Click"
OnClientClicking=
"btnSaveEditEvent_OnClientClicking"
ValidationGroup=
"vgpEditEvent"
CssClass=
"RB_Save_Close"
>
</telerik:RadButton>
</div>
<div class=
"DIV_One_Buttons_LFloat DIV_One_Buttons_LFloat_Padding"
>
<telerik:RadButton ID=
"btnCloseEditEvent"
runat=
"server"
AutoPostBack=
"false"
Text=
"Cancel"
OnClientClicked=
"function(sender, args){closeRadWindow(sender, args, 'rdwEditEvent');}"
OnClientClicking=
"OnClientClicking"
CssClass=
"RB_Save_Close"
>
</telerik:RadButton>
</div>
<div>
<asp:Label ID=
"lblEditEventMessage"
runat=
"server"
CssClass=
"LBL_AHU_Add_Message"
></asp:Label>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate>
</telerik:RadWindow>
</Windows>
</telerik:RadWindowManager>
I have the following RadAjaxManagerProxy settings:
<
telerik:RadAjaxManagerProxy
ID
=
"rampAddEditFilters"
runat
=
"server"
>
<
AjaxSettings
>
<
telerik:AjaxSetting
AjaxControlID
=
"grdListEvents"
>
<
UpdatedControls
>
<
telerik:AjaxUpdatedControl
ControlID
=
"grdListEvents"
/>
</
UpdatedControls
>
</
telerik:AjaxSetting
>
<
telerik:AjaxSetting
AjaxControlID
=
"pnlEditEvent"
>
<
UpdatedControls
>
<
telerik:AjaxUpdatedControl
ControlID
=
"pnlEditEvent"
/>
</
UpdatedControls
>
</
telerik:AjaxSetting
>
</
AjaxSettings
>
</
telerik:RadAjaxManagerProxy
>
I also Ajaxify some of the controls during PageLoad event:
protected
void
Page_Load(
object
sender, EventArgs e)
{
Ajaxify();
}
private
void
Ajaxify()
{
AjaxSetting ajaxSetting =
new
AjaxSetting();
ajaxSetting.AjaxControlID = rauPhotoUpload.ID;
ajaxSetting.UpdatedControls.Add(
new
AjaxUpdatedControl { ControlID = grdListEvents.ID, LoadingPanelID = alpAddEditEvents.ID });
ajaxSetting.UpdatedControls.Add(
new
AjaxUpdatedControl { ControlID = lstEventPhotosEdit.ID, LoadingPanelID =
null
});
rampAddEditFilters.AjaxSettings.Add(ajaxSetting);
ajaxSetting =
new
AjaxSetting();
ajaxSetting.AjaxControlID = btnSaveEditEvent.ID;
ajaxSetting.UpdatedControls.Add(
new
AjaxUpdatedControl { ControlID = grdListEvents.ID, LoadingPanelID = alpAddEditEvents.ID });
ajaxSetting.UpdatedControls.Add(
new
AjaxUpdatedControl { ControlID = lstEventPhotosEdit.ID, LoadingPanelID =
null
});
rampAddEditFilters.AjaxSettings.Add(ajaxSetting);
}
I use a RadAsyncUpload control to upload a single file to a location on the server and then I save the name of the file within our database. That name is then displayed within the RadListView. This is done when the user clicks on the RadButton "btnSaveEditEvent". This mechanism also works. The file is uploaded, and the file name is saved within the database, and then the RadWindow is closed.
The problem is that if the user click on the "Edit" button within the Nested RadGrid again to open the RadWindow (for example, to add another file later on) the RadWindow opens, but does not display the previously added file name within the RadListView. The WCF service does not get invoked. I have looked all over the Telerik forums and I searched the Internet for an answer, but I have been unsuccessful. What am I doing wrong? I'd really appreciate any help.