Refresh Grid Not Working After OnCallbackUpdate event is fired

[Amit]

Hi Guys

I have taken one grid and one RadNotification control. And so, When new mail comes, notification works. But Code of refreshing the RadGrid doesn't work properly. I have the following code:

Design:
 

<telerik:RadPane runat="server" ID="RadPane1">
                <telerik:RadToolBar runat="server" ID="RadToolBar1" CssClass="inbox-search-toolbar"
                    OnClientButtonClicked="onButtonClicked" OnButtonClick="RadToolBar1_ButtonClick" EnableViewState="false">
                    <Items>
                        <telerik:RadToolBarButton ImageUrl="~/Images/print.gif" Enabled="false" />
                        <telerik:RadToolBarButton ImageUrl="~/Images/move.gif" Enabled="false" />
                        <telerik:RadToolBarButton ImageUrl="~/Images/delete_inbox.gif" Value="Delete" CommandName="delete" />
                        <telerik:RadToolBarButton IsSeparator="true" />
                        <telerik:RadToolBarButton Text="Reply" ImageUrl="~/Images/reply.gif" Value="Reply" CommandName="reply" />
                        <telerik:RadToolBarButton Value="searchTextBoxButton" CommandName="searchText">
                            <ItemTemplate>
                                <telerik:RadTextBox
                                    runat="server" ID="RadTextBox1"
                                    EmptyMessage="Search Inbox"
                                    CssClass="inbox-search-textbox" Width="300px"
                                    ClientEvents-OnKeyPress="onKeyPress" />
                            </ItemTemplate>
                        </telerik:RadToolBarButton>
                        <telerik:RadToolBarButton ImageUrl="~/Images/search.gif" Value="search" CommandName="doSearch" />
                        <telerik:RadToolBarButton ImageUrl="~/Images/icons/MailSettings.png" CommandName="settings" />
                    </Items>
                </telerik:RadToolBar>
                <telerik:RadGrid runat="server" ID="grdMessage" DataSourceID="LinqDataSource1" AutoGenerateColumns="false"
                    GridLines="None" Height="500px" BorderWidth="0" AllowSorting="true" Style="border: 0; outline: none;"
                    ShowGroupPanel="true" OnItemCommand="grdMessage_ItemCommand" AllowMultiRowSelection="true" OnRowDrop="grdMessage_RowDrop">
                    <ClientSettings EnablePostBackOnRowClick="true" AllowDragToGroup="true" EnableAlternatingItems="false" AllowRowsDragDrop="true">
                        <Selecting EnableDragToSelectRows="true" AllowRowSelect="true" />
                        <ClientEvents OnRowSelected="onGridRowSelected" OnCommand="function(){}"
                            OnRowDblClick="RemoveBold" OnRowClick="RemoveBold" OnRowContextMenu="GrdMessageRowContextMenu" OnRowDropping="onRowDropping" />
                        <Scrolling UseStaticHeaders="true" AllowScroll="true" />
                    </ClientSettings>
                    <MasterTableView TableLayout="Fixed" GroupLoadMode="Client" DataKeyNames="id" Width="100%"
                        AdditionalDataFieldNames="Date" ClientDataKeyNames="id">
                        <GroupByExpressions>
                            <telerik:GridGroupByExpression>
                                <GroupByFields>
                                    <telerik:GridGroupByField FieldName="DateResult" HeaderValueSeparator=":" SortOrder="Descending" />
                                </GroupByFields>
                                <SelectFields>
                                    <telerik:GridGroupByField FieldName="DateResult" HeaderText="Date" FormatString="{0:d}" />
                                </SelectFields>
                            </telerik:GridGroupByExpression>
                        </GroupByExpressions>
                        <Columns>
                            <telerik:GridTemplateColumn UniqueName="TemplateColumn2" GroupByExpression="From Group By From"
                                SortExpression="From" HeaderText="From / Subject" HeaderStyle-Width="150px">
                                <ItemStyle Height="35px"></ItemStyle>
                                <ItemTemplate>
                                    <%# (Convert.ToBoolean(DataBinder.Eval(Container.DataItem, "seen")) ? DataBinder.Eval(Container.DataItem, "from_msg").ToString() : "<b>" + DataBinder.Eval(Container.DataItem, "from_msg").ToString() + "</b>") %>
                                    <br />
                                    <div class="MailSubject">
                                        <%# (Convert.ToBoolean(DataBinder.Eval(Container.DataItem, "seen")) ? DataBinder.Eval(Container.DataItem, "subject").ToString() : "<b>" + DataBinder.Eval(Container.DataItem, "subject").ToString() + "</b>") %>
                                    </div>
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridBoundColumn DataField="msg_date" HeaderText="Date" HeaderStyle-Width="150px"
                                GroupByExpression="DateResult Date GROUP BY DateResult">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="size" HeaderText="Size" HeaderStyle-Width="50px">
                            </telerik:GridBoundColumn>
                            <telerik:GridCalculatedColumn UniqueName="Date" DataType="System.DateTime" DataFields="msg_date"
                                Expression="msg_date.Value.Date" HeaderText="Date" Visible="false">
                            </telerik:GridCalculatedColumn>
                            <telerik:GridCalculatedColumn UniqueName="Conversation" DataType="System.String"
                                DataFields="subject" Expression='subject.Replace("RE: ", "")' HeaderText="Conversation"
                                Visible="false">
                            </telerik:GridCalculatedColumn>

                            <telerik:GridTemplateColumn UniqueName="TemplateColumn3" Groupable="False">
                                <HeaderStyle Width="25px"></HeaderStyle>
                                <ItemStyle Height="35px"></ItemStyle>
                                <ItemTemplate>
                                    <asp:ImageButton ID="MailFlagImageButton" BorderWidth="0px" CommandName="ChangeFlag"
                                        ImageUrl='<%# Convert.ToBoolean(DataBinder.Eval(Container.DataItem, "flagged"))? "~/Images/MailFlagRed.png" : "~/Images/MailFlag.png" %>'
                                        AlternateText="Change Flag" Style="cursor: pointer;" runat="server"></asp:ImageButton>
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>

                        </Columns>
                    </MasterTableView>
                </telerik:RadGrid>
                <telerik:RadNotification ID="RadNotification1" runat="server" LoadContentOn="TimeInterval" Width="250"
                    Animation="Fade" EnableRoundedCorners="true" EnableShadow="true" Skin="Default" Height="100" OnClientUpdated="OnClientUpdated"
                    Text="<strong>You have received 1 new message!</strong>" OffsetX="-30" OffsetY="-30" UpdateInterval="5000" AutoCloseDelay="10000"
                    ShowTitleMenu="true" ShowCloseButton="true" OnCallbackUpdate="OnCallbackUpdate">
                    <NotificationMenu>
                        <Items>
                            <telerik:RadMenuItem Text="Open Item" ImageUrl="../../images/icons/open.png"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="Flag Item" ImageUrl="../../images/icons/Flagged.png"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="Delete Item" ImageUrl="../../images/icons/delete.gif"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="Mark As Read" ImageUrl="../../images/icons/MarkAsRead.png"></telerik:RadMenuItem>
                        </Items>
                    </NotificationMenu>
                </telerik:RadNotification>
            </telerik:RadPane>

Javascript:

var data = new Array();
       var openedMsgs = new Array();

       //use a flag to determine whether the item was selected by using the mouse or programmatically by the set_selected method
       var flag = true;
       function refreshGrid() {
           var grid = $find("<%=grdMessage.ClientID %>");
           var mtv = grid.get_masterTableView();
           mtv.set_dataSource(data);
           mtv.dataBind();
           var selectedItem = mtv.get_selectedItems()[0];
           if (selectedItem) {
               selectedItem.set_selected(false);
           }

           var items = mtv.get_dataItems();
           for (var i = 0; i < items.length; i++) {
               items[i].get_element().style.fontWeight = 'bold';
           }
           if (selectedItem) {
               var index = +selectedItem._itemIndexHierarchical;
               flag = false;

               if (items[index + 1] != null)
                   items[index + 1].set_selected(true);

           }
           for (var i = 0; i < openedMsgs.length; i++) {
               openedMsgs[i] = openedMsgs[i] + 1;
               items[openedMsgs[i]].get_element().style.fontWeight = 'normal';
           }
       }

       function OnClientUpdated(sender, args) {
           var record = sender.get_value();
           if (record != "") {
               data.unshift(eval(record));
               //refreshGrid();
               sender.show();
           }
           sender.set_value("");
       }

       function RemoveBold(sender, args) {
           var item = args.get_item();
           if (!Array.contains(openedMsgs, (+item._itemIndexHierarchical)) && flag) {
               openedMsgs.push(+item._itemIndexHierarchical);
               item.get_element().style.fontWeight = 'normal';
           }
           flag = true;
       }


       function OnRowCreated(sender, args) {
           var item = args.get_item();
           item.get_element().style.fontWeight = 'bold';
       }

Code:

protected void OnCallbackUpdate(object sender, RadNotificationEventArgs e)
    {
        CheckForNewMailsInHMailDB();

        //simulates cases when there are and there are not new messages
        if (_NewMessages)
        {
            RadNotification1.Value = GetRecord();
            grdMessage.Rebind();
            _NewMessages = false;
        }
        else
            RadNotification1.Value = "";
    }

Please help

Thanks ahead
Amit Jain

[Konstantin Dikov]

Hi Amit,

Please note that combining server-side and client-side binding is not supported.

For your requirement you could get reference to the client-side object of your grid and call the master table view "rebind()" method:

var grid = $find("<%=RadGrid1.ClientID%>");
grid.get_masterTableView().rebind();

I have tested this on my end with stripped version of your code and everything is working as expected. For your convenience I am attaching the sample page.

Hope that helps.


Regards,
Konstantin Dikov
Telerik