How to add Grid inside a tab item?

<ej:Tab ID="Defaulttab" runat="server" Width="1000px">
        <Items>
            <ej:TabItem Id="tab1" Text="Tab 1">
                <ContentSection>
                     <div>
// Defining the grid control inside ContentSection
              <ej:Grid  runat="server" ID="GridControlDefault" Width="600px" AllowScrolling="true" AllowResizing="true" AllowPaging="true">
               <EditSettings AllowAdding="True" AllowEditing="True" AllowDeleting="True"></EditSettings>
               <Columns>
                 <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="True" TextAlign="Right" Width="65" />
                 <ej:Column Field="Canceled" HeaderText="Canceled" TextAlign="Right" Width="75" EditType="Boolean" />
                 <ej:Column Field="CustomerID" HeaderText="Customer ID" Width="80" />
                 <ej:Column Field="EmployeeID" HeaderText="Employee ID" TextAlign="Right" Width="85" />
                  <ej:Column Field="Freight" HeaderText="Freight" TextAlign="Right" Width="60" Format="{0:C}" />
                  <ej:Column Field="OrderDate" HeaderText="Order Date" TextAlign="Right" Width="80" Format="{0:MM/dd/yyyy}" />
                  <ej:Column Field="ShipCity" HeaderText="Ship City" Width="90" />                              
                </Columns>  
                 <ScrollSettings Height="380" Width="650" ></ScrollSettings>          
             </ej:Grid>
                    </div>
                </ContentSection>
            </ej:TabItem>
            <ej:TabItem Id="tab2" Text="Tab 2">
                <ContentSection>
                    <ej:DatePicker runat="server" ID="datepicker"></ej:DatePicker>
                </ContentSection>
            </ej:TabItem>
            <ej:TabItem Id="tab3" Text="Tab 3">
                <ContentSection>
                    <ej:NumericTextBox runat="server" ID="numeric"></ej:NumericTextBox>
                </ContentSection>
            </ej:TabItem>
        </Items>
    </ej:Tab>

 
    List<Orders> order = new List<Orders>();    
    protected void Page_Load(object sender, EventArgs e)
    {
      BindDataSource();
    }
 
    private void BindDataSource()
    {
      int code = 10000;
// Defining grid columns and populating the lists
      for (int i = 1; i < 10; i++)
      {
        order.Add(new Orders(code + 1, false, "ALFKI", i + 0, 2.3 * i, new DateTime(1991, 05, 15), "Berlin"));
        order.Add(new Orders(code + 2, false, "ANATR", i + 2, 3.3 * i, new DateTime(1990, 04, 04), "Madrid"));
        order.Add(new Orders(code + 3, false, "ANTON", i + 1, 4.3 * i, new DateTime(1957, 11, 30), "Cholchester"));
        order.Add(new Orders(code + 4, false, "BLONP", i + 3, 5.3 * i, new DateTime(1930, 10, 22), "Marseille"));
        order.Add(new Orders(code + 5, false, "BOLID", i + 4, 6.3 * i, new DateTime(1953, 02, 18), "Tsawassen"));
        code += 5;
      }
// Binding the datasource to Grid object
      this.GridControlDefault.DataSource = order;
      this.GridControlDefault.DataBind();
    }
// Class for binding grid columns        
       
public class Orders
  {
    public Orders()
    {
 
    }
    public Orders(long OrderId, bool Canceled, string CustomerId, int EmployeeId, double Freight, DateTime OrderDate, string ShipCity)
    {
      this.OrderID = OrderId;
      this.Canceled = Canceled;
      this.CustomerID = CustomerId;
      this.EmployeeID = EmployeeId;
      this.Freight = Freight;
      this.OrderDate = OrderDate;
      this.ShipCity = ShipCity;
    }
    public long OrderID { get; set; }
    public bool Canceled { get; set; }
    public string CustomerID { get; set; }
    public int EmployeeID { get; set; }
    public double Freight { get; set; }
    public DateTime OrderDate { get; set; }
    public string ShipCity { get; set; }
  }