Persist RadGrid settings in profile

[jfkrueger]

I have followed the example and knowledge base article on persisting the RadGrid settings to the user's profile however it is not working correctly. The issue is that in the example it states to call the SaveSettings function on the Render method. So I override the render method (vb.net) and call the function however this event only occurrs one time - when the page initially is loaded. It is not triggered when any settings in the grid change so no changes are ever persisted. I don't see how this example could possibly work by calling the SaveSettings function in the overridden Render method, what am I missing? The page_init event is triggered for every change but that is where the example states to load the settings, not save them so I am confused. Seems like it should be the other way around...

Thanks for any help!

[Maria Ilieva]

Hi Joe,

Please review the following help topic which elaborates on this matter. Test the provided approach and let us know if this helps.

Greetings,
Maria Ilieva
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[jfkrueger]

Yes, I have already reviewed that example and that is exactly what I am doing. However it states to call the save settings in the "render" method. In my vb.net code I override the "render" method, call the SaveSettings function as in the C# example, put a breakpoint on the "render" method and the only time it is ever fired is on the initial loading of the page, it never gets fired when the sorting changes, or the # of rows per page changes, or for that matter when anything changes so the SaveSettings is never getting called when it needs to (after a change in the grid). The grid is surrounded by an AjaxPanel, could that be causing the problem?

[Maria Ilieva]

Hello Joe,

Could you please try to remove the AjaxPanel or try to use regular asp UpdatePanel instead of it and verify if the problem still persists.

Kind regards,
Maria Ilieva
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[jfkrueger]

Sure, i'll give it a try. When it says to call the SaveSettings on the Render event it is talking about overriding the Page Render event, right? Not the Grid Render event (which I don't even think exists)..

[jfkrueger]

If i remove the RadAjaxPanel from around the grid it works fine but that is not an acceptable solution becuase I do not want the page doing full postbacks every time something in the grid changes (sort, page size, etc.). The full postbacks are annoying and non-professional looking to the users plus I lose the loading panel for longer operations in the grid. Is there a better way to "ajaxify" the grid without losing the functionality of saving the settings or should I be calling the SaveSettings in a different event and not the Render event?

[Maria Ilieva]

Hi Joe,

Will it be convenient for you to open a regular support ticket and send us sample runnable project which replicates the described behaviour? We will test it locally and advise you further.

Greetings,
Maria Ilieva
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[jfkrueger]

Hello,

It really wouldn't be all that convenient but I will if I have to. I think all you have to do to duplicate this is wrap a grid in an update panel or RadAjaxPanel. Let me know if you need me to open a formal support ticket and how to do it.

Thanks!

[Maria Ilieva]

Hi Joe,

I tried to replicate the issue using the mentioned help topic but to no avail. In order to send us a sample application you should open it through your Client.net account and attached the project that replicates the problem.

Best wishes,
Maria Ilieva
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[jfkrueger]

Before I go through the trouble of creating a sample project and opening a formal support ticket let me try this one more time. Please try the following, this is exactly how I have it setup.

Here is the hierarcy of my pages/controls:

Display.aspx --> Contains Web User Control with a RadPanelBar
     - WebUserControl with a RadPanelBar: Surround the RadPanelBar with a RadAjaxPanel - Inside each RadPanelItem is another WebUserControl with a RadGrid using the Google-Style Filtering.
         - WebUserControl with RadGrid using Google-Style Filtering: Surrounded by a RadAjaxPanel.

So I have an aspx page with a web user control (ascx) that contains other web user controls. The content in each web user control is surrounded by a RadAjaxPanel. 

Please try this approach and see if you can duplicate the issue. Code examples below.

1st Web User Control surrounded by AjaxPanel:

<telerik:RadAjaxPanel ID="rlpMain" runat="server" LoadingPanelID="rlpMain">

    <telerik:RadPanelBar
        ID="rpbCSRLists"
        runat="server"
        ExpandMode="SingleExpandedItem"
        AllowCollapseAllItems="true"
        Width="100%"
        PersistStateInCookie="true"
        OnClientItemExpand="OnClientItemExpand">

            <Items>

                <telerik:RadPanelItem Text="Alternative Words to Search In Plan Documents" Selected="true">

                    <Items>

                        <telerik:RadPanelItem>

                            <ItemTemplate>

                                <CSR:AlternativeWords ID="uctAlternativeWords" runat="server" />

                            </ItemTemplate>

                        </telerik:RadPanelItem>

                    </Items>

                </telerik:RadPanelItem>

            </Items>

        </telerik:RadPanelBar>

 </telerik:RadAjaxPanel>

2nd Web User Control (<CSR:AlternativeWords ID="uctAlternativeWords" runat="server" /> )

<telerik:RadAjaxPanel ID="rapMain" runat="server" LoadingPanelID="rlpMain">

    <telerik:RadGrid ID="rgAlternativeWords"
        AutoGenerateColumns="False"
        AllowPaging="True"
        AllowSorting="True"
        AllowFilteringByColumn="True"
        runat="server"
        GridLines="None" >

        <HeaderContextMenu EnableTheming="False">
            <CollapseAnimation Duration="200" Type="OutQuint" />
        </HeaderContextMenu>

        <PagerStyle Mode="NumericPages" PageButtonCount="5" AlwaysVisible="true" />

        <MasterTableView>

            <CommandItemTemplate>

                <tr>
                    <td colspan="3" style="padding-left:10px">

                        <asp:Button ID="AddNewRecordButton" Runat="server" Visible="false" CommandName="InitInsert" CssClass="rgAdd"></asp:Button>
                        <asp:LinkButton ID="InitInsertButton" runat="server" Visible="false" CommandName="InitInsert">Add New Record</asp:LinkButton>

                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <asp:LinkButton ID="lbClearFilters" runat="server" OnClick="lbClearFilters_Click">Clear Filters</asp:LinkButton>

                    </td>
                    <td style="text-align:right; padding-right:10px">
                        <asp:Button ID="RefreshButton" runat="server" CommandName="Re bindGrid" ToolTip="Refresh" CssClass="rgRefresh" />
                        <asp:LinkButton ID="RebindGridButton" runat="server" CommandName="Re bindGrid" ToolTip="Refresh">Refresh</asp:LinkButton>
                    </td>

                </tr>

            </CommandItemTemplate>
            <Columns>

                <telerik:GridEditCommandColumn ButtonType="ImageButton" Visible="false" UniqueName="EditCommandColumn"></telerik:GridEditCommandColumn>
                <telerik:GridButtonColumn ConfirmText="Delete this record?" Visible="false" ConfirmDialogType="RadWindow" ConfirmTitle="Delete" ButtonType="ImageButton"
                        CommandName="Delete" Text="Delete" UniqueName="DeleteColumn">
                        <ItemStyle HorizontalAlign="Center" CssClass="MyImageButton" />
                </telerik:GridButtonColumn>

            </Columns>
            <RowIndicatorColumn>
                <HeaderStyle Width="20px" />
            </RowIndicatorColumn>
            <ExpandCollapseColumn>
                <HeaderStyle Width="20px" />
            </ExpandCollapseColumn>
            <EditFormSettings EditFormType="Template">
                <EditColumn UniqueName="EditCommandColumn1">
                </EditColumn>
                <FormTemplate>
                    <br />
                    <div class="divCol">Original Word:</div>
                    <div class="divColLast"><telerik:RadTextBox ID="txtOriginalWordEdit" runat="server" Columns="25" MaxLength="50" Text='<%# Bind("BaseWord") %>' SelectionOnFocus="SelectAll"></telerik:RadTextBox></div>
                    <div class="clearer"></div>

                    <div class="divCol">Alternate Words:</div>
                    <div class="divColLast">
                        <telerik:RadTextBox ID="txtAlternateWords" runat="server" Columns="45" Rows="5" MaxLength="255" TextMode="MultiLine" Text='<%# Bind("AlternativeWords") %>' SelectionOnFocus="CaretToEnd"></telerik:RadTextBox>
                    </div>
                    <div class="clearer"></div>

                    <table style="width: 100%">
                        <tr>
                            <td align="center" colspan="2">
                                <asp:Button ID="btnSubmit" Text='<%# Iif (TypeOf Container is GridEditFormInsertItem, "Insert", "Update") %>'
                                    runat="server" CommandName='<%# Iif (TypeOf Container is GridEditFormInsertItem, "PerformInsert", "Update") %>'>
                                </asp:Button>&nbsp;
                                <asp:Button ID="btnCancel" Text="Cancel" runat="server" CausesValidation="False" CommandName="Cancel">
                                </asp:Button>
                            </td>
                        </tr>
                    </table>

                </FormTemplate>
           </EditFormSettings>
            <PagerTemplate>

                <asp:Panel ID="pnlAlternativeWordsPager" Style="padding: 6px;" runat="server">

                    <asp:Panel runat="server" ID="NumericPagerPlaceHolder" ></asp:Panel>

                    <span style="float: right;">Displaying page
                        <%#CType(DataBinder.Eval(Container, "Paging.CurrentPageIndex"), Int32) + 1%>
                        of
                        <%# DataBinder.Eval(Container, "Paging.PageCount")%>, items from
                        <%#CType(DataBinder.Eval(Container, "Paging.FirstIndexInPage"), Int32) + 1%>
                        to
                        <%#CType(DataBinder.Eval(Container, "Paging.LastIndexInPage"), Int32) + 1%>
                        of
                        <%# DataBinder.Eval(Container, "Paging.DataSourceCount")%>.
                    </span>

                    <br />

                    <div style="text-align:left">

                        <span style="margin-top: 2px; margin-right: 3px;">Page size:</span>

                        <telerik:RadComboBox ID="rcbAlternativeWordsPageSize" DataSource="<%# New Object(){10, 20, 30, 40, 50} %>"
                            Style="margin-top: 2px; margin-right: 20px;"
                            Width="40px" SelectedValue='<%# DataBinder.Eval(Container, "Paging.PageSize") %>'
                            runat="server" OnClientSelectedIndexChanged="rcbAlternativeWordsPageSize_SelectedIndexChanged">
                        </telerik:RadComboBox>

                        <asp:Button ID="btnAlternativeWordsFirstPage" runat="server" OnClientClick="changeAlternativeWordsPage('first'); return false;" CommandName="Page" CommandArgument="First" CssClass="rgPageFirst" />
                        <asp:Button ID="btnAlternativeWordsPrviousPage" runat="server" OnClientClick="changeAlternativeWordsPage('prev'); return false;" CommandName="Page" CommandArgument="Prev" CssClass="rgPagePrev" />

                        <span style="vertical-align: middle;">Page:</span>

                        <telerik:RadNumericTextBox ID="rntbAlternativeWordsCurrentPage" Width="25px" Value='<%# CType(DataBinder.Eval(Container, "Paging.CurrentPageIndex"), Int32) + 1 %>' runat="server">
                            <ClientEvents OnValueChanged="rntbAlternativeWordsCurrentPage_ValueChanged" />
                            <NumberFormat DecimalDigits="0" />
                        </telerik:RadNumericTextBox>

                        <span style="vertical-align: middle;">of
                            <%# DataBinder.Eval(Container, "Paging.PageCount")%>
                        </span>

                        <asp:Button ID="btnAlternativeWordsNextPage" runat="server" OnClientClick="changeAlternativeWordsPage('next'); return false;" CommandName="Page" CommandArgument="Next" CssClass="rgPageNext" />
                        <asp:Button ID="btnAlternativeWordsLastPage" runat="server" OnClientClick="changeAlternativeWordsPage('last'); return false;" CommandName="Page" CommandArgument="Last" CssClass="rgPageLast" />

                    </div>

                </asp:Panel>

            </PagerTemplate>

        </MasterTableView>
        <ClientSettings AllowColumnsReorder="True" ReorderColumnsOnClient="True">
        </ClientSettings>
        <FilterMenu>
            <CollapseAnimation Duration="200" Type="OutQuint" />
        </FilterMenu>

    </telerik:RadGrid>

</telerik:RadAjaxPanel>

        Protected Overrides Sub Render(writer As HtmlTextWriter)

            MyBase.Render(writer)
            Profile.AlternativeWordsGrid = New AlternativeWordsGrid()
            Profile.AlternativeWordsGrid.SaveGridSettings(rgAlternativeWords, "rgAlternativeWords")

        End Sub

If I remove the AjaxPanels from around the content in BOTH Web User Controls it does work as expected but I get the ugly full postbacks, otherwise the Render event is only fired one time on initial page load.

Thanks!

[jfkrueger]

In the code example above the ID of the RadAjaxPanel in the 1st Web User Control is "rapMain", not "rlpMain".

[Maria Ilieva]

Hi Joe,

Thank you for this clarification on your scenario.

Please note that it is not supported to wrap one RadAjaxPanel in another RadAjaxPanel as it is in your scenario. There are some known issues when using wrapped panels in some complex applications. This why in your application better approach is to use RadAjaxManager and RadAjaxManager proxy controls in your UserControl. Please review the follwoing help topics which elaborates on this matter:

RadAjax and WebUserControls
RadAjax and MasterPage
MasterPages: initiating requests from one ContentPlaceHolder and loading/updating controls in another




Regards,
Maria Ilieva
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[jfkrueger]

Ok, well we are getting closer but there are still issues. If I remove ALL Ajax from the outer web user control and just have a RadAjaxManager on the inner web user control, it works perfectly. However, If I add a RadAjaxManager to the outer web user control (with the RadPanelBar) and a RadAjaxManagerProxy to the inner web user control (with the grid) the Render method IS getting fired as expected but the following two problems still exist:

1) The RadPanelIItem that is selected loses it's "selected" CSS class and turns the same color as all of the de-selected RadPanelItems.
2) The GridEditCommandColumn and GridButtonColumn (used for deleting a record) dissapear. These two columns have visible=false set and are only displayed to users in a particular role. The code that makes these two columns visible IS being fired, but the two columns go away.

Now what?

[jfkrueger]

I tried to add the Edit & Delete columns programmatically like I am all of the other columns (I am using Google-Style filtering) and I am getting this JavaScript error upon any postback which kills all functionality in the grid:

"Sys.WebForms.PageRequestManagerServerErrorException: An error has occurred because a control with id 'ctl00$......$EditButton' could not be located or a different control is assigned to the same ID after postback. If the ID is not assigned, explicitly set the ID property of controls that raise postback events to avoid this error."

Here is the code i'm using to create and add the columns to the grid on the page_load event:
    

Protected Sub Page_Load(ByVal sender As Object, _
                        ByVal e As System.EventArgs) _
                        Handles Me.Load

    Dim strDataKeyNames() As String = {"RecordID"}

    If ((Page.IsPostBack _
             AndAlso (Request.Form("__EVENTARGUMENT") = "close" _
             And Request.Form("__EVENTTARGET").IndexOf("czMain") > -1)) _
         Or Not Page.IsPostBack) Then

        rgAlternativeWords.MasterTableView.Columns.Clear()

        Dim gridEditColumn As New Telerik.Web.UI.GridEditCommandColumn
        Dim gridButtonColumn As New Telerik.Web.UI.GridButtonColumn

        With gridEditColumn
            .ButtonType = GridButtonColumnType.ImageButton
            .UniqueName = "EditCommandColumn"
        End With

        With gridButtonColumn
            .ConfirmText = "Delete this record?"
            .ConfirmDialogType = GridConfirmDialogType.RadWindow
            .ConfirmTitle = "Delete"
            .ButtonType = GridButtonColumnType.ImageButton
            .CommandName = "Delete"
            .Text = "Delete"
            .UniqueName = "DeleteColumn"
            .ItemStyle.HorizontalAlign = HorizontalAlign.Center
            .ItemStyle.CssClass="MyImageButton"
        End With

        rgAlternativeWords.MasterTableView.Columns.Add(gridEditColumn)
        rgAlternativeWords.MasterTableView.Columns.Add(gridButtonColumn)

        gridDataSource = CSRInfoWCFWrapper.GetAllAlternativeWordRecords()
        rgAlternativeWords.MasterTableView.DataKeyNames = strDataKeyNames
        rgAlternativeWords.MasterTableView.EditMode = GridEditMode.PopUp
        rgAlternativeWords.MasterTableView.CommandItemDisplay = GridCommandItemDisplay.Top

        rgAlternativeWords.MasterTableView.EditFormSettings.CaptionDataField = "BaseWord"
        rgAlternativeWords.MasterTableView.EditFormSettings.CaptionFormatString = "Edit Alternative words for: {0}"

        For Each dataColumn As DataColumn In gridDataSource.Tables(0).Columns
            If DataColumn.ColumnName <> "RecordID" Then
                Dim gridColumn As New RGCustomColumn("AlternativeWords")
                Me.rgAlternativeWords.MasterTableView.Columns.Add(gridColumn)
                gridColumn.DataField = dataColumn.ColumnName
                gridColumn.SortExpression = dataColumn.ColumnName

                Select Case dataColumn.ColumnName
                    Case "BaseWord"
                        gridColumn.HeaderText = "Original Word"
                        gridColumn.ItemStyle.Width = Unit.Pixel(125)
                        gridColumn.ItemStyle.Wrap = False
                    Case "AlternativeWords"
                        gridColumn.HeaderText = "Alternative Words"
                        gridColumn.AllowFiltering = False
                        gridColumn.ItemStyle.Width = Unit.Pixel(300)
                        gridColumn.ItemStyle.Wrap = True
                End Select

            End If
        Next

    End If

End Sub

[jfkrueger]

I gave up on trying to create the edit & delete controls programmatically because I don't think that was the issue. If add them declaratively (as I originally had it), the two columns are NOT dissappearing, it is just that all of the images in my grid dissappear. The edit, delete, refresh, and add new record images all vanish after a postback. How can I fix this?

This only occurs when I use the RadAjaxManagerProxy on the inner web user control and have the RadAjaxManager on the outer web user control. If I remove the RadAjaxManager from the outer web user control entirely and add a RadAjaxManager (not proxy) to the inner control it works fine. Getting closer but I need Ajax both on the RadPanelBar (outer web user control) and around the Grid in the inner web user control.

[jfkrueger]

More info:

If i just wrap the RadPanelBar in a RadAjaxPanel and have no AjaxPanels or AjaxManagers in the inner web user controls everything works fine, however I want to have each grid (in the inner Web User Controls) to have their own loading panels - i don't want them all to share the same one that is associated with the RadPanelBar. If I use a RadAjaxManager on the outer control with the RadPanelBar instead of wrapping it in a RadAjaxPanel (and leave all of the Ajax stuff off of the inner web user controls) the images still all dissappear on any type of postback. It seems like if I get one thing to work, another breaks.

[jfkrueger]

Here's how I had to setup my controls in order for it to work, it was not working because of the multiple AjaxPanels (one inside the other).

<telerik:RadPanelBar
    ID="rpbCSRLists"
    runat="server"
    ExpandMode="SingleExpandedItem"
    AllowCollapseAllItems="true"
    Width="100%"
    PersistStateInCookie="true"
    OnClientItemExpand="OnClientItemExpand"
    OnClientItemCollapse="OnClientItemCollapse">

        <Items>

            <telerik:RadPanelItem Text="Alternative Words to Search In Plan Documents" Selected="true">

                <Items>

                    <telerik:RadPanelItem>

                        <ItemTemplate>

                            <telerik:RadAjaxLoadingPanel ID="rlpAlternateWords" runat="server" HorizontalAlign="Center" InitialDelayTime="2000">
                                <asp:Image ID="imgLoading" runat="server" ImageUrl="~/Images/loading.gif" style="border:0;" />
                            </telerik:RadAjaxLoadingPanel>

                            <telerik:RadAjaxPanel ID="rapAlternateWords" runat="server" LoadingPanelID="rlpAlternateWords">
                                <CSR:AlternativeWords ID="uctAlternativeWords" runat="server" />
                            </telerik:RadAjaxPanel>

                        </ItemTemplate>

                    </telerik:RadPanelItem>

                </Items>

            </telerik:RadPanelItem>

            <telerik:RadPanelItem Text="Benefit Code Descriptions" >

                <Items>

                    <telerik:RadPanelItem>

                        <ItemTemplate>

                            <telerik:RadAjaxLoadingPanel ID="rlpBenefitCodes" runat="server" HorizontalAlign="Center" InitialDelayTime="2000">
                                <asp:Image ID="imgLoading" runat="server" ImageUrl="~/Images/loading.gif" style="border:0;" />
                            </telerik:RadAjaxLoadingPanel>

                            <telerik:RadAjaxPanel ID="rapBenefitCodes" runat="server" LoadingPanelID="rlpBenefitCodes">
                                <CSR:BenefitCodes ID="uctBenefitCodes" runat="server" />
                            </telerik:RadAjaxPanel>

                        </ItemTemplate>

                    </telerik:RadPanelItem>

                </Items>

            </telerik:RadPanelItem>
        </Items>

    </telerik:RadPanelBar>

So now instead of wrapping the entire RadPanelBar inside an AjaxPanel and wrapping the grids inside the Web User Controls inside another AjaxPanel I just include a loading panel inside each item template and wrap the declaration of each Web User Control in an AjaxPanel. Seems to work fine now.