Placing RadGrid instances in RadMultipage page views

Article Info

Rating: 2

Article information
Article relates to	RadTabStrip v3.x "classic" RadTabStrip for ASP.NET AJAX (Telerik.Web.UI 2008.1.x) RadGrid v3.x "classic" RadGrid for ASP.NET AJAX (Telerik.Web.UI 2008.1.x)
Created by	Stephen, Telerik
Last modified	March 11, 2009
Last modified by	Paul, Telerik

HOW-TO
Place RadGrid instance inside RadMultipage page views (part of RadTabStrip 3.x)

SOLUTION
The solution is pretty much straight-forward. Just place RadGrid instance inside the corresponding page view of RadMultipage and hook the necessary events to execute custom logic.

In the example below there are two grids encapsulated in two page views (displayed on first/second tab click). You can select grid rows client-side (single and multi-row selection), use paging to navigate through the grid records, sort columns and edit/insert grid items (the real update/insert of records is not included, for more info you can see the grid online help). All operations are performed with asynchronous requests using RadAjaxManager.

ASPX:

    
                <form id="form1" runat="server">  
        
                    <asp:ScriptManager ID="ScriptManager1" runat="server">  
        
                    </asp:ScriptManager> 
        
                    <telerik:RadAjaxManager ID="RadAjaxManager2" runat="server">  
        
                        <AjaxSettings> 
        
                            <telerik:AjaxSetting AjaxControlID="RadTabStrip1">  
        
                                <UpdatedControls> 
        
                                    <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" /> 
        
                                    <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" /> 
        
                                </UpdatedControls> 
        
                            </telerik:AjaxSetting> 
        
                            <telerik:AjaxSetting AjaxControlID="RadMultiPage1">  
        
                                <UpdatedControls> 
        
                                    <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" /> 
        
                                    <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" /> 
        
                                </UpdatedControls> 
        
                            </telerik:AjaxSetting> 
        
                        </AjaxSettings> 
        
                    </telerik:RadAjaxManager> 
        
                    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1" 
        
                        AutoPostBack="True" SelectedIndex="0">  
        
                        <Tabs> 
        
                            <telerik:RadTab PageViewID="PageView1" Text="Display grid 1" runat="server">  
        
                            </telerik:RadTab> 
        
                            <telerik:RadTab PageViewID="PageView2" Text="Display grid 2" runat="server">  
        
                            </telerik:RadTab> 
        
                            <telerik:RadTab PageViewID="PageView3" Text="Other content" runat="server">  
        
                            </telerik:RadTab> 
        
                        </Tabs> 
        
                    </telerik:RadTabStrip> 
        
                    <telerik:RadMultiPage ID="RadMultiPage1" runat="server" RenderSelectedPageOnly="True" 
        
                        SelectedIndex="0">  
        
                        <telerik:RadPageView ID="PageView1" runat="server">  
        
                            <telerik:RadGrid ID="RadGrid1" runat="server" AllowMultiRowEdit="true" AllowMultiRowSelection="true" 
        
                                AllowPaging="true" PageSize="5" AllowSorting="true" OnNeedDataSource="RadGrid1_NeedDataSource1">  
        
                                <PagerStyle Mode="NumericPages" /> 
        
                                <MasterTableView AutoGenerateColumns="true" CommandItemDisplay="Top">  
        
                                    <Columns> 
        
                                        <telerik:GridEditCommandColumn UniqueName="EditCommandColumn" /> 
        
                                    </Columns> 
        
                                </MasterTableView> 
        
                                <ClientSettings> 
        
                                    <Selecting AllowRowSelect="true" EnableDragToSelectRows="true" /> 
        
                                </ClientSettings> 
        
                            </telerik:RadGrid> 
        
                        </telerik:RadPageView> 
        
                        <telerik:RadPageView ID="PageView2" runat="server">  
        
                            <telerik:RadGrid ID="RadGrid2" runat="server" AllowMultiRowEdit="true" AllowMultiRowSelection="true" 
        
                                AllowSorting="true" OnNeedDataSource="RadGrid2_NeedDataSource1">  
        
                                <MasterTableView AutoGenerateColumns="False" CommandItemDisplay="Top">  
        
                                    <Columns> 
        
                                        <telerik:GridEditCommandColumn UniqueName="EditCommandColumn" /> 
        
                                        <telerik:GridBoundColumn HeaderText="First name" DataField="FirstName" UniqueName="FirstName">  
        
                                        </telerik:GridBoundColumn> 
        
                                        <telerik:GridBoundColumn HeaderText="Last name" DataField="LastName" UniqueName="LastName">  
        
                                        </telerik:GridBoundColumn> 
        
                                        <telerik:GridBoundColumn HeaderText="Birth date" DataFormatString="{0:d}" DataField="BirthDate" 
        
                                            UniqueName="BirthDate">  
        
                                        </telerik:GridBoundColumn> 
        
                                        <telerik:GridBoundColumn HeaderText="Hire date" DataFormatString="{0:d}" DataField="HireDate" 
        
                                            UniqueName="HireDate">  
        
                                        </telerik:GridBoundColumn> 
        
                                    </Columns> 
        
                                </MasterTableView> 
        
                                <ClientSettings> 
        
                                    <Selecting AllowRowSelect="true" EnableDragToSelectRows="true" /> 
        
                                </ClientSettings> 
        
                            </telerik:RadGrid> 
        
                        </telerik:RadPageView> 
        
                        <telerik:RadPageView ID="PageView3" runat="server">  
        
                            Default text</telerik:RadPageView> 
        
                    </telerik:RadMultiPage> 
        
                </form>

Code-behind:

    
            using System;  
        
            using System.Data;  
        
            using System.Data.OleDb;  
        
            using System.Configuration;  
        
            using System.Collections;  
        
            using System.Web;  
        
            using System.Web.Security;  
        
            using System.Web.UI;  
        
            using System.Web.UI.WebControls;  
        
            using System.Web.UI.WebControls.WebParts;  
        
            using System.Web.UI.HtmlControls;  
        
            using Telerik.Web.UI;  
        
            public partial class _Default : System.Web.UI.Page  
        
            {  
        
                protected void Page_Load(object sender, EventArgs e)  
        
                {  
        
                }  
        
                protected void RadGrid1_NeedDataSource1(object source, Telerik.Web.UI.GridNeedDataSourceEventArgs e)  
        
                {  
        
                    OleDbConnection MyOleDbConnection = new OleDbConnection(("Provider=Microsoft.Jet.OLEDB.4.0; Data Source=" + Server.MapPath("~/Nwind.mdb")));  
        
                    OleDbDataAdapter MyOleDbDataAdapter = new OleDbDataAdapter();  
        
                    MyOleDbDataAdapter.SelectCommand = new OleDbCommand("SELECT TOP 10 CustomerID, ContactName, ContactTitle, Address, City FROM Customers", MyOleDbConnection);  
        
                    DataTable myDataTable = new DataTable();  
        
                    MyOleDbConnection.Open();  
        
                    try 
        
                    {  
        
                        MyOleDbDataAdapter.Fill(myDataTable);  
        
                    }  
        
                    finally 
        
                    {  
        
                        MyOleDbConnection.Close();  
        
                    }  
        
                    myDataTable.PrimaryKey = new DataColumn[] { myDataTable.Columns["CustomerID"] };  
        
                    (source as RadGrid).DataSource = myDataTable.DefaultView;  
        
                }  
        
                protected void RadGrid2_NeedDataSource1(object source, Telerik.Web.UI.GridNeedDataSourceEventArgs e)  
        
                {  
        
                    OleDbConnection MyOleDbConnection = new OleDbConnection(("Provider=Microsoft.Jet.OLEDB.4.0; Data Source=" + Server.MapPath("~/Nwind.mdb")));  
        
                    OleDbDataAdapter MyOleDbDataAdapter = new OleDbDataAdapter();  
        
                    MyOleDbDataAdapter.SelectCommand = new OleDbCommand("SELECT EmployeeID, FirstName, LastName, BirthDate, HireDate FROM Employees", MyOleDbConnection);  
        
                    DataTable myDataTable = new DataTable();  
        
                    MyOleDbConnection.Open();  
        
                    try 
        
                    {  
        
                        MyOleDbDataAdapter.Fill(myDataTable);  
        
                    }  
        
                    finally 
        
                    {  
        
                        MyOleDbConnection.Close();  
        
                    }  
        
                    myDataTable.PrimaryKey = new DataColumn[] { myDataTable.Columns["EmployeeID"] };  
        
                    (source as RadGrid).DataSource = myDataTable.DefaultView;  
        
                }  
        
            }

    
            <form id="form1" runat="server">  
        
                <rad:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1">  
        
                    <Tabs> 
        
                        <rad:Tab PageViewID="PageView1" Text="Display grid 1">  
        
                        </rad:Tab> 
        
                        <rad:Tab PageViewID="PageView2" Text="Display grid 2">  
        
                        </rad:Tab> 
        
                        <rad:Tab PageViewID="PageView3" Text="Other content">  
        
                        </rad:Tab> 
        
                    </Tabs> 
        
                </rad:RadTabStrip> 
        
                <rad:RadMultiPage ID="RadMultiPage1" runat="server">  
        
                    <rad:PageView ID="PageView1" runat="server">  
        
                        <rad:RadGrid ID="RadGrid1" runat="server" AllowMultiRowEdit="true" AllowMultiRowSelection="true" EnableAJAXLoadingTemplate="true" EnableAJAX="True" AllowPaging="true" PageSize="5" AllowSorting="true" OnNeedDataSource="RadGrid1_NeedDataSource1">  
        
                            <PagerStyle Mode="NumericPages" /> 
        
                            <MasterTableView AutoGenerateColumns="true" CommandItemDisplay="Top">  
        
                                <Columns> 
        
                                    <rad:GridEditCommandColumn UniqueName="EditCommandColumn" /> 
        
                                </Columns> 
        
                            </MasterTableView> 
        
                            <ClientSettings> 
        
                                <Selecting AllowRowSelect="true" EnableDragToSelectRows="true" /> 
        
                            </ClientSettings> 
        
                        </rad:RadGrid> 
        
                    </rad:PageView> 
        
                    <rad:PageView ID="PageView2" runat="server">  
        
                        <rad:RadGrid ID="RadGrid2" runat="server" AllowMultiRowEdit="true" AllowMultiRowSelection="true" EnableAJAXLoadingTemplate="true" EnableAJAX="True" AllowSorting="true" OnNeedDataSource="RadGrid2_NeedDataSource1">  
        
                            <MasterTableView AutoGenerateColumns="False" CommandItemDisplay="Top">  
        
                                <Columns> 
        
                                    <rad:GridEditCommandColumn UniqueName="EditCommandColumn" /> 
        
                                    <rad:GridBoundColumn HeaderText="First name" DataField="FirstName" UniqueName="FirstName">  
        
                                    </rad:GridBoundColumn> 
        
                                    <rad:GridBoundColumn HeaderText="Last name" DataField="LastName" UniqueName="LastName">  
        
                                    </rad:GridBoundColumn> 
        
                                    <rad:GridBoundColumn HeaderText="Birth date" DataFormatString="{0:d}" DataField="BirthDate" UniqueName="BirthDate">  
        
                                    </rad:GridBoundColumn> 
        
                                    <rad:GridBoundColumn HeaderText="Hire date" DataFormatString="{0:d}" DataField="HireDate" UniqueName="HireDate">  
        
                                    </rad:GridBoundColumn> 
        
                                </Columns> 
        
                            </MasterTableView> 
        
                            <ClientSettings> 
        
                                <Selecting AllowRowSelect="true" EnableDragToSelectRows="true" /> 
        
                            </ClientSettings> 
        
                        </rad:RadGrid> 
        
                    </rad:PageView> 
        
                    <rad:PageView ID="PageView3" runat="server">  
        
                        Default text</rad:PageView> 
        
                </rad:RadMultiPage> 
        
            </form>

Code-behind:

    
            using System;  
        
            using System.Data;  
        
            using System.Data.OleDb;  
        
            using System.Configuration;  
        
            using System.Collections;  
        
            using System.Web;  
        
            using System.Web.Security;  
        
            using System.Web.UI;  
        
            using System.Web.UI.WebControls;  
        
            using System.Web.UI.WebControls.WebParts;  
        
            using System.Web.UI.HtmlControls;  
        
            using Telerik.WebControls;  
        
            public partial class _Default : System.Web.UI.Page  
        
            {  
        
                protected void Page_Load(object sender, EventArgs e)  
        
                {  
        
                }  
        
                protected void RadGrid1_NeedDataSource1(object source, Telerik.WebControls.GridNeedDataSourceEventArgs e)  
        
                {  
        
                    OleDbConnection MyOleDbConnection = new OleDbConnection(("Provider=Microsoft.Jet.OLEDB.4.0; Data Source=" + Server.MapPath("~/Nwind.mdb")));  
        
                    OleDbDataAdapter MyOleDbDataAdapter = new OleDbDataAdapter();  
        
                    MyOleDbDataAdapter.SelectCommand = new OleDbCommand("SELECT TOP 10 CustomerID, ContactName, ContactTitle, Address, City FROM Customers", MyOleDbConnection);  
        
                    DataTable myDataTable = new DataTable();  
        
                    MyOleDbConnection.Open();  
        
                    try 
        
                    {  
        
                        MyOleDbDataAdapter.Fill(myDataTable);  
        
                    }  
        
                    finally 
        
                    {  
        
                        MyOleDbConnection.Close();  
        
                    }  
        
                    myDataTable.PrimaryKey = new DataColumn[] { myDataTable.Columns["CustomerID"] };  
        
                    (source as RadGrid).DataSource = myDataTable.DefaultView;  
        
                }  
        
                protected void RadGrid2_NeedDataSource1(object source, Telerik.WebControls.GridNeedDataSourceEventArgs e)  
        
                {  
        
                    OleDbConnection MyOleDbConnection = new OleDbConnection(("Provider=Microsoft.Jet.OLEDB.4.0; Data Source=" + Server.MapPath("~/Nwind.mdb")));  
        
                    OleDbDataAdapter MyOleDbDataAdapter = new OleDbDataAdapter();  
        
                    MyOleDbDataAdapter.SelectCommand = new OleDbCommand("SELECT EmployeeID, FirstName, LastName, BirthDate, HireDate FROM Employees", MyOleDbConnection);  
        
                    DataTable myDataTable = new DataTable();  
        
                    MyOleDbConnection.Open();  
        
                    try 
        
                    {  
        
                        MyOleDbDataAdapter.Fill(myDataTable);  
        
                    }  
        
                    finally 
        
                    {  
        
                        MyOleDbConnection.Close();  
        
                    }  
        
                    myDataTable.PrimaryKey = new DataColumn[] { myDataTable.Columns["EmployeeID"] };  
        
                    (source as RadGrid).DataSource = myDataTable.DefaultView;  
        
                }  
        
            }

Comments

There are no comments yet.
If you'd like to comment on this KB article, please, send us a Support Ticket.
Thank you!

Please Sign In to rate this article.

Placing RadGrid instances in RadMultipage page views

Article Info

Comments

Products

Consulting

Purchase

Support

Community

Company