Update ListView inside RadWindow

[Shawn]

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.

 

 

 

 

[Shawn]

I figured out the solution myself.  Just in case someone else is having this issue here's my solution.  The problem was ajax caching.  I had to set it to 'false' in order for $getJSON to get the new values.  Now, everything works like it should.

$.ajaxSetup({
    cache: false
});

[Maria Ilieva]

Hello Shawn,

I'm glad that you have managed to fix the issue on your end. Thank you for sharing your solution with the community.

Regards,
Maria Ilieva
Telerik