Placing RadGrid in a dockable object

RELATED TO:

 

Article information

Article relates to

all versions of RadControls

Created by

Stephen, Telerik

Last modified

March 19, 2008

Last modified by

Sophy, Telerik





HOW-TO
Place RadGrid in a dockable object

SOLUTION
Generally, this is a simple task - you merely need to place your grid instance inside RadDockingZone -> RadDockableObject and configure the controls to work in the same way as if they work separately. Thus the user can relocate the grid on the page, thus "modeling" the appearance of the webform, per his/her requirements.

In the sample code below we enabled the sorting/client selection built-in features of RadGrid:

ASPX
 <raddk:RadDockingZone id="RadDockingZone1" runat="server" Height="300px" Width="380px">     
    <radDk:RadDockableObject id="RadDockableObject1" runat="server">     
       <ContentTemplate>    
          <radG:RadGrid id="RadGrid1" runat="server" OnNeedDataSource="RadGrid1_NeedDataSource">     
             <MasterTableView AutoGenerateColumns="False" AllowSorting="true">     
                <Columns>    
                   <radg:GridBoundColumn HeaderText="ContactName" DataField="ContactName" UniqueName="ContactName"></radg:GridBoundColumn>    
                   <radg:GridBoundColumn HeaderText="ContactTitle" DataField="ContactTitle" UniqueName="ContactTitle"></radg:GridBoundColumn>    
                   <radg:GridBoundColumn HeaderText="Address" DataField="Address" UniqueName="Address"></radg:GridBoundColumn>    
                </Columns>    
             </MasterTableView>    
             <ClientSettings>    
                <Selecting AllowRowSelect="true" />    
             </ClientSettings>    
             <SelectedItemStyle BackColor="#00ccff" />    
          </radG:RadGrid>    
       </ContentTemplate>    
    </radDk:RadDockableObject>    
 </raddk:RadDockingZone>    
 



C#
protected void RadGrid1_NeedDataSource(object source, Telerik.WebControls.GridNeedDataSourceEventArgs e)        
{        
    OleDbConnection MyOleDbConnection = new OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0; Data Source=" + Server.MapPath("~/Grid/Data/Access/Nwind.mdb"));        
    OleDbDataAdapter MyOleDbDataAdapter = new OleDbDataAdapter();        
    MyOleDbDataAdapter.SelectCommand = new OleDbCommand("SELECT TOP 5 ContactName, ContactTitle, Address FROM Customers", MyOleDbConnection);        
       
    DataTable myDataTable = new DataTable();        
    MyOleDbConnection.Open();        
    try       
    {        
        MyOleDbDataAdapter.Fill(myDataTable);        
    }        
    finally       
    {        
        MyOleDbConnection.Close();        
    }        
    (source as RadGrid).DataSource = myDataTable.DefaultView;        
}   
 


VB
Protected Sub RadGrid1_NeedDataSource([source] As Object, e As Telerik.WebControls.GridNeedDataSourceEventArgs)        
  Dim MyOleDbConnection As New OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0; Data Source=" + Server.MapPath("~/Grid/Data/Access/Nwind.mdb"))        
  Dim MyOleDbDataAdapter As New OleDbDataAdapter()        
  MyOleDbDataAdapter.SelectCommand = New OleDbCommand("SELECT TOP 5 ContactName, ContactTitle, Address FROM Customers", MyOleDbConnection)        
          
  Dim myDataTable As New DataTable()        
  MyOleDbConnection.Open()        
  Try       
   MyOleDbDataAdapter.Fill(myDataTable)        
  Finally       
   MyOleDbConnection.Close()        
  End Try       
  Dim myGrid = (TryCast(source, RadGrid))        
  myGrid.DataSource = myDataTable.DefaultView        
          
End Sub 'RadGrid1_NeedDataSource   
 




HOW-TO
Place RadGrid in a RadDock

SOLUTION
Generally, this is a simple task - you merely need to place your grid instance inside RadDockZone -> RadDock and configure the controls to work in the same way as if they work separately. Thus the user can relocate the grid on the page, thus "modeling" the appearance of the webform, per his/her requirements.

In the sample code below we enabled the sorting/client selection built-in features of RadGrid:

ASPX
<html xmlns="http://www.w3.org/1999/xhtml" >    
<head runat="server">     
    <title>Untitled Page</title>    
</head>    
<body>    
    <form id="form1" runat="server">     
        <asp:scriptmanager id="ScriptManager1" runat="server">     
        </asp:scriptmanager>    
         <telerik:raddockzone id="RadDockZone1" runat="server" Height="300px" Width="380px">     
            <telerik:RadDock id="RadDockObject1" runat="server">     
               <ContentTemplate>    
                  <telerik:RadGrid id="RadGrid1" runat="server" OnNeedDataSource="RadGrid1_NeedDataSource">     
                     <MasterTableView AutoGenerateColumns="False" AllowSorting="true">     
                        <Columns>    
                           <telerik:GridBoundColumn HeaderText="ContactName" DataField="ContactName" UniqueName="ContactName"></telerik:GridBoundColumn>    
                           <telerik:GridBoundColumn HeaderText="ContactTitle" DataField="ContactTitle" UniqueName="ContactTitle"></telerik:GridBoundColumn>    
                           <telerik:GridBoundColumn HeaderText="Address" DataField="Address" UniqueName="Address"></telerik:GridBoundColumn>    
                        </Columns>    
                     </MasterTableView>    
                     <ClientSettings>    
                        <Selecting AllowRowSelect="true" />    
                     </ClientSettings>    
                     <SelectedItemStyle BackColor="#00ccff" />    
                  </telerik:RadGrid>    
               </ContentTemplate>    
            </telerik:RadDock>    
         </telerik:raddockzone>    
    
    </form>    
</body>    
</html>   
 


C#
protected void RadGrid1_NeedDataSource(object source, GridNeedDataSourceEventArgs e)         
{        
    OleDbConnection MyOleDbConnection = new OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0; Data Source=" + Server.MapPath("~/App_Data/Access/Nwind.mdb"));        
    OleDbDataAdapter MyOleDbDataAdapter = new OleDbDataAdapter();        
    MyOleDbDataAdapter.SelectCommand = new OleDbCommand("SELECT TOP 5 ContactName, ContactTitle, Address FROM Customers", MyOleDbConnection);        
       
    DataTable myDataTable = new DataTable();        
    MyOleDbConnection.Open();        
    try       
    {        
        MyOleDbDataAdapter.Fill(myDataTable);        
    }        
    finally       
    {        
        MyOleDbConnection.Close();        
    }        
    (source as RadGrid).DataSource = myDataTable.DefaultView;        
}    
 

VB
Protected Sub RadGrid1_NeedDataSource(ByVal source As Object, ByVal e As GridNeedDataSourceEventArgs)     
    Dim MyOleDbConnection As New OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0; Data Source=" + Server.MapPath("~/App_Data/Access/Nwind.mdb"))     
    Dim MyOleDbDataAdapter As New OleDbDataAdapter()     
    MyOleDbDataAdapter.SelectCommand = New OleDbCommand("SELECT TOP 5 ContactName, ContactTitle, Address FROM Customers", MyOleDbConnection)     
    
    Dim myDataTable As New Data.DataTable()     
    MyOleDbConnection.Open()     
    Try    
        MyOleDbDataAdapter.Fill(myDataTable)     
    Finally    
        MyOleDbConnection.Close()     
    End Try    
    TryCast(source, RadGrid).DataSource = myDataTable.DefaultView     
End Sub    
 



         

Files

More Resources

  • Forums

    Find answers to thousands of questions or reach out to our active community.

  • Demos

    Browse 1,200+ demos with source code covering basic and advanced scenarios.

  • Sample Applications

    Learn how to integrate the controls in real-world examples.

  • Feedback Portal

    Vote and follow the features you want to see added to Telerik UI for ASP.NET AJAX.

  • User Voice

    Get answers directly from the people who build the product.

  • Documentation

    Benefit from detailed help articles and API references for all controls.

  • Knowledge Base

    Learn how to achieve common scenarios from a multitude of tutorials and working examples.

  • Code Library

    Browse sample projects submitted by Telerik staff and community members.

  • Blog

    Stay up-to-date with the latest functionality, how-to articles and industry trends.

  • Release History

    Up-to-date release notes for all new features and improvements.