This is a migrated thread and some comments may be shown as answers.

Refresh Grid Not Working After OnCallbackUpdate event is fired

1 Answer 26 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Amit
Top achievements
Rank 1
Amit asked on 27 Nov 2013, 12:55 PM
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

1 Answer, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 02 Dec 2013, 12:38 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Tags
Grid
Asked by
Amit
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Share this question
or