Refresh a WCF-bound grid

[Nathan J Pledger]

Hi,

I have a WCF-bound grid that works fine. I have the user select one or more items, click a button, which opens a Window for editing. All this is fine. 

I have an event handler on closing of the window and in this I want to be able to update the grid with the changes. This, however, runs the code but does not retrieve the changes by calling the WCF service.

My JavaScript:

var grid = $find('<%=radGridDataGroups.ClientID %>');
var selItems = grid.get_masterTableView().get_selectedItems();
if (selItems.length == 0) {
    radalert('Please select an item to edit and then try again.', 300, 100, 'Edit Data Group');
} else {
    for (var i = 0; i < selItems.length; i++) {
        var w=migOpenDialog('~/secure/dialogs/system/EditDataGroup.aspx?dataGroupID=' + selItems[i].getDataKeyValue("DataGroupID"), 600, 600);
        if (w) {
            w.setActive(true);
            w.set_modal(true);
            w.add_close(function() {
                alert('hello');
                var masterTable = $find("<%=radGridDataGroups.ClientID %>").get_masterTableView();
                masterTable.rebind();
            });
            w.show();
        }
    }
}

So the 'hello' message is displayed (I have also put breakpoints in there). I have stepped through the $find call, which gets the grid and the rebind method appears to run, but nothing happens.

So how can I refresh a WCF grid based on changes?

Note: migOpenDialog is just a wrapper for your openWindow function.

Many thanks

[Nathan J Pledger]

I take it back, it does update, it's just a bit slow.

Excellent!

BUT ... I would like to visually indicate on the grid that a WCF request is in process. Any ideas how I could best do this?

[Sebastian]

Hi Nathan,

You may consider displaying a RadAjaxLoadingPanel explicitly while the WCF service is processed. See the implementation from this demo for details (the OnCommand client event handler and updateGrid javascript method in particular).

Best regards,
Sebastian
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Nathan J Pledger]

Hi and Thanks, Sebastian,

I've come up with my grid as:

        <telerik:RadGrid ID="radGridDataGroups" runat="server"
                         AllowAutomaticDeletes="false"
                         AllowAutomaticInserts="false"
                         AllowAutomaticUpdates="false"
                         AllowCustomPaging="false"
                         AllowMultiRowSelection="true"
                         AllowPaging="true"
                         AllowSorting="true"
                         AutoGenerateColumns="false"
                         AutoGenerateDeleteColumn="false"
                         AutoGenerateEditColumn="false"
                         GroupingEnabled="false"
                         PageSize="17"
                         ShowFooter="true"
                         ShowGroupPanel="false"
                         ShowHeader="true"
                         ShowStatusBar="false"
                         Height="433"
                          >

                        <StatusBarSettings LoadingText="Loading ..." ReadyText="Ready." />
                        <ClientSettings AllowColumnHide="false" AllowColumnsReorder="false" AllowDragToGroup="false" AllowExpandCollapse="false" AllowRowHide="false" AllowRowsDragDrop="false" EnablePostBackOnRowClick="false" EnableRowHoverStyle="true" ReorderColumnsOnClient="true">
                            <ClientEvents OnRowDblClick="radGridDataGroups_OnRowDblClick" OnCommand="radGridDataGroups_OnCommand"  OnDataBound="radGridDataGroups_OnDataBound" />
                            <ClientMessages />
                            <Selecting AllowRowSelect="true" EnableDragToSelectRows="true" />
                            <Resizing AllowColumnResize="true" AllowRowResize="false" ClipCellContentOnResize="true" EnableRealTimeResize="false" ResizeGridOnColumnResize="true" />
                            <Scrolling AllowScroll="true" EnableVirtualScrollPaging="false" UseStaticHeaders="true" />
                            <DataBinding SelectMethod="GetDataGroupsAndCount" Location="../api/wcf/RadControlsHelpers/DatagroupEditorHelper.svc" SortParameterType="Linq" FilterParameterType="Linq">
                            </DataBinding>
                        </ClientSettings>
                        <MasterTableView ClientDataKeyNames="DataGroupID" EnableNoRecordsTemplate="true">
                            <NoRecordsTemplate>
                                <p class="alignCentre darkGrey"><br /><br /><strong class="alignCentre">No Data Groups have been defined.</strong></p>
                            </NoRecordsTemplate>
                             <PagerStyle Mode="NextPrevAndNumeric" />
                            <Columns>
                                <telerik:GridClientSelectColumn CommandName="Select" DataType="System.Boolean">
                                    <HeaderStyle Width="30" />
                                    <ItemStyle Width="30" HorizontalAlign="Center" />
                                </telerik:GridClientSelectColumn>
                                <telerik:GridBoundColumn DataField="DataGroupName" AllowSorting="true" AllowFiltering="false"
                                    DataType="System.String" Display="true" HeaderText="Name" ReadOnly="true" Resizable="true" ShowSortIcon="true" UniqueName="DataGroupName"></telerik:GridBoundColumn>
                                <telerik:GridBoundColumn DataField="DataGroupDescription" AllowSorting="true" AllowFiltering="false"
                                    DataType="System.String" Display="true" HeaderText="Description" ReadOnly="true" Resizable="true" ShowSortIcon="true" UniqueName="DataGroupDescription"></telerik:GridBoundColumn>
                                <telerik:GridBoundColumn DataField="NumberOfSubscribers" AllowSorting="true" AllowFiltering="false"
                                    DataType="System.Int32" Display="true" HeaderText="Subscribers" ReadOnly="true" Resizable="true" ShowSortIcon="true" UniqueName="NumberOfSubscribers">
                                    <ItemStyle HorizontalAlign="Center" />
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn DataField="NumberOfItems" AllowSorting="true" AllowFiltering="false"
                                    DataType="System.Int32" Display="true" HeaderText="Items" ReadOnly="true" Resizable="true" ShowSortIcon="true" UniqueName="NumberOfItems">
                                    <ItemStyle HorizontalAlign="Center" />
                                </telerik:GridBoundColumn>
                            </Columns>
                             <PagerStyle Mode="NumericPages" />
                        </MasterTableView>
                    </telerik:RadGrid>

And my client script as:

        function radGridDataGroups_OnDataBound(sender, args) {
            var ajaxLoadingPanel = $find("<%= MIGTurboPage.RadAjaxLoadingPanel.ClientID %>");
            if (ajaxLoadingPanel) {
                ajaxLoadingPanel.hide("<%= radGridDataGroups.ClientID %>");
            }
        }

        function radGridDataGroups_OnCommand(sender, args) {
            var ajaxLoadingPanel=$find("<%= MIGTurboPage.RadAjaxLoadingPanel.ClientID %>");
            if (ajaxLoadingPanel) {
                ajaxLoadingPanel.show("<%= radGridDataGroups.ClientID %>");
            }
        }

This works when clicking sorting, etc. but not on Page_Load. I'd like a loading screen to appear while the intiial data is loaded, then hide when the WCF is complete. I can see that OnDataBound maybe used to hide the AjaxLoadingPanel, but what about when the page is first loaded? OnCommand does not fire at this point.

(Note also I am keen not to reproduce script to perform the WCF job as the provided example appears to do - this grid system will be reproduced a number of times in the application)

[Sebastian]

Hi Nathan,

To display the loading panel on initial load, invoke its show method from within the pageLoaded handler of the PageRequestManager instance. This is done on the online demo pointed in my previous reply. Note, however, that the loading panel will be displayed in case there is enough time for that during the data loading.
 
Kind regards,
Sebastian
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Nathan J Pledger]

Got it sorted.

Thanks a lot, Sebastian