how to ajax a datagrid

[James]

hi there,
This is my first post!
Just wanted to say thanks for the great library although I am getting stuck with a simple telerik:radgrid.
Im trying to turn my datagrid into an ajax enabled version.
as you can see the markup is very simple which has a reference to a javascript function called myfunc.
This function opens a radwindow which has a button place on the popup.
I've been trying for hours now to get the button in the popup to refresh RadGrid1 after closing the popup.
I can make the popup close using the GetRadWindow functionality although I cant work out how to refresh the datagrid and how to refresh the datagrid asynchronously.  Can you please help me where I'm going wrong!??

many thanks,

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="" Inherits="" %>   
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<asp:PlaceHolder ID="xxx" runat="server" Visible="true">
        
    <telerik:RadGrid ID="RadGrid1" OnSortCommand="RadGrid1_SortCommand"
        OnPageIndexChanged="RadGrid1_PageIndexChanged" AllowSorting="True" PageSize="10" AllowPaging="True"
        AllowMultiRowSelection="True" runat="server" Gridlines="None">
        <MasterTableView Width="400" EnableNoRecordsTemplate="true" AutoGenerateColumns="false">
       
        <NoRecordsTemplate>
            ...
        </NoRecordsTemplate>
       
        <Columns>
            <telerik:GridTemplateColumn SortExpression="TrackName">
                <ItemTemplate>
                    ...
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn SortExpression="TrackName">
                <ItemTemplate>
                   
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn SortExpression="TrackName">
                <ItemTemplate>
                   <a href="javascript:void(0)" onclick="myfunc(<%# Eval("id") %> %>)"></a>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
        
        </MasterTableView>
        
    </telerik:RadGrid>
        
</asp:PlaceHolder>

<asp:PlaceHolder ID="PlaceHolderEmpty" runat="server" Visible="false">
    <div>
    <asp:Label ID="LabelEmpty" runat="server" resourcekey="LabelEmpty" />
    </div>
</asp:PlaceHolder>

[James]

this markup i have for the code above.

<script language="javascript">

            function myfunc(id) {
                var oManager = GetRadWindowManager();
                var oMailWnd = oManager.getWindowByName("Name");
                oMailWnd.SetUrl("http://localhost/popup.aspx");
                oMailWnd.show();
                oMailWnd.setActive(true);
                oMailWnd.center();
                return false;
            }

</script>

    <telerik:RadWindowManager EnableEmbeddedSkins="true" ID="RadWindowManager1" Behaviors="Close,Maximize,Minimize"
        VisibleStatusbar="false" runat="server" Skin="Default">
        <Windows>
          <telerik:RadWindow ID="Name" Modal="true" Title="..."
                VisibleStatusbar="false" Width="400px" Height="400px" runat="server">
            </telerik:RadWindow>

[Shinu]

Hi James,

I hope you are ajaxifying the RadGrid using RadAjaxManager. If so you can rebind the Grid while closing the the Window using AjaxManger. Call the refreshGrid function in the OnClientClose event of the RadWindow to rebind the Grid. Here is the code I tried on my end. You may alter the logic accordingly.

ASPX:

   <telerik:RadWindowManager ID="RadWindowManager1" runat="server">
         <Windows>
           <telerik:RadWindow ID="RadWindow1"  runat="server" OnClientClose="Close" >
           </telerik:RadWindow>
         </Windows>
        </telerik:RadWindowManager>

JS:

<script type="text/javascript" >

function myfunc(id)
 {
    var oManager = GetRadWindowManager();
    var oMailWnd = oManager.getWindowByName("RadWindow1");
    oMailWnd.SetUrl("http://localhost:2253/Telerik2009/Default.aspx");
    oMailWnd.show();
    oMailWnd.setActive(true);
    oMailWnd.center();
    return false;
}
 function Close()
 {
    refreshGrid();
 }

 function GetRadWindowManager()
 {
  var oManager = $find("<%= RadWindowManager1.ClientID %>");
  return oManager;
 }

   function refreshGrid()
    {

     $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("Rebind");
    }
</script>

CS:

 protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
    {
        if (e.Argument == "Rebind")
        {
            RadGrid1.Rebind();
        }

    }

Thanks
Shinu

[James]

thanks for the reply, i've added the following code although I get a runtime error.

can you suggest why this happens?
Many thanks,


<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="xx" Inherits="xx" %>   
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<asp:PlaceHolder ID="xx" runat="server" Visible="true">
        
   <telerik:RadWindowManager ID="RadWindowManager1" runat="server">
         <Windows>
           <telerik:RadWindow ID="RadWindow1"  runat="server" OnClientClose="Close" >
           </telerik:RadWindow>
         </Windows>
    </telerik:RadWindowManager>
    
    <telerik:RadCodeBlock ID="RadCodeBlock2" runat="server">
    
        <script type="text/javascript">

            function RemoveTrackFromPlayList(trackId, playlistId) {

                var oManager = GetRadWindowManager();
                var oMailWnd = oManager.getWindowByName("RadWindowRemoveTrackFromPlayList");
                oMailWnd.SetUrl("http://localhost/page.aspx");
                oMailWnd.show();
                oMailWnd.setActive(true);
                oMailWnd.center();

                return false;
            }


             function Close()
             {
                refreshGrid();
             }
              
             function GetRadWindowManager()
             {
              var oManager = $find("<%= RadGrid1.ClientID %>");   
              return oManager;
             }
              
               function refreshGrid()
                {
                 $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("Rebind");  
                }
            </script>
    
    </telerik:RadCodeBlock>
 
 
    <telerik:RadWindowManager EnableEmbeddedSkins="true" ID="RadWindowManager2" Behaviors="Close,Maximize,Minimize"
        VisibleStatusbar="false" runat="server" Skin="Default">
        <Windows>
          <telerik:RadWindow ID="RadWindowBecomeFan" Modal="true" Title="..."
                VisibleStatusbar="false" Width="400px" Height="400px" runat="server">
            </telerik:RadWindow>
          </Windows>
            </telerik:RadWindowManager>
 
 
 
    <telerik:RadGrid ID="RadGrid1" OnSortCommand="RadGrid1_SortCommand"
        OnPageIndexChanged="RadGrid1_PageIndexChanged" AllowSorting="True" PageSize="10" AllowPaging="True"
        AllowMultiRowSelection="True" runat="server" Gridlines="None">
        <MasterTableView Width="400" EnableNoRecordsTemplate="true" AutoGenerateColumns="false">
       
        <NoRecordsTemplate>
            No tracks added yet
        </NoRecordsTemplate>
       
        <Columns>
            <telerik:GridTemplateColumn SortExpression="TrackName">
                <ItemTemplate>
                    ..
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn SortExpression="TrackName">
                <ItemTemplate>
                    by
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn SortExpression="TrackName">
                <ItemTemplate>
                    ..
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn SortExpression="TrackName">
                <ItemTemplate>
                    <%# Eval("TrackId") %>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
        
        </MasterTableView>
        
    </telerik:RadGrid>
        
</asp:PlaceHolder>



// code behind


        protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
        {
            if (e.Argument == "Rebind")
            {
                RadGrid1.Rebind();
            }

        }

[James]

also, when you say "...I hope you're using RadAjaxManager.." I dont know to be honest, I have posted the entire code.

[James]

if I remove the following code the page runs, although obviously without all functionality..

<telerik:RadCodeBlock ID="RadCodeBlock2" runat="server">
...
</telerik:RadCodeBlock>

[James]

more accurately it this code that causes the page to fail


               function refreshGrid()
                {
                 $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("Rebind");  
                }

[Shinu]

Hi James,

I am sorry if I have misread  your post. Try rebinding the Grid in the OnClientClose event of the window as shown below and see if it helps.

JS:

 function Close()
 {
  var masterTable = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
  masterTable.rebind();
 }

Regards
Shinu.