Show TOC

Adding DataGridLocate this document in the navigation structure

Add DataGrid for Sales Order Header & Sales Order Item

Context

The first step to add custom tabs to display associated entities is to define in the UI to show the associated entities. In this section, we are designing the UI to show a header and line item. For example, Sales Order (header & item), Purchase order (header & item).

Procedure

  1. From the Solution Explorer window, navigate to Start of the navigation path Project folder  Next navigation step  Outlook  Next navigation step  Contact  Next navigation step  EPMAccounts  Next navigation step AssociatedEntitiesTab.cs End of the navigation path to open the UI Form designer for custom tabs.
    This designer view for the associated entity tabs opens.
  2. Click on the Toolbox and the Properties buttons from the toolbar to display the toolbox and properties region.
  3. In the Properties region, navigate toBehaviourTabPages.
  4. Click on the Tabpages button button in the TabPages row.Associated_Properties
    The TabPage Collection Editor window appears.
  5. Do the following in the TabPage Collection Editor window:
    1. Click Add to add a new TabPage.
      A new Tabpage will be added in the Members region.
    2. In the properties region (right pane) under Appearance, set the <Text> as EPM SalesOrder.
    3. Set the <Name> to EPM_SalesOrder under Design.
    4. Choose OK to confirm the settings and to exit the TabPages Collection Editor.
  6. In the designer view, click on the EPM SalesOrder tab to start designing it.
  7. From the ToolBox drag the TableLayoutPanel onto the EPMSalesOrder tab view.
  8. Do the following in the Properties region:
    1. Expand Design and set the Name to pnlMain
    2. Set the Dock property under AutoScrollMinSize to Fill.
    3. Set Margin to 0;0;0;0.
    4. Set Padding to 12;12;12;12.
  9. Click and drag the DataGridView control from Toolbox Data to show the associated sales order data,
  10. Set the following properties for DataGridView:
    1. Set the Name of the property to dgvSalesOrderHeader.
    2. Set the Margin to 0;0;0;12
    3. Set the Columnspan to 2.
    4. Set the Dock to Fill.
    5. Set the BackgroundColor to White.
    6. Set AllowUserToAddRows to false.
    7. Set AllowUsertoDeleteRows to false.
    8. Set EditMode to EditProgrammatically.
  11. Follow these steps to increase the size of the Data Grid :
    1. Right click on the grid, click Select AssociatedEntities Tab.
    2. Drag the tab page below to increase the size.Increase Data Grid Size
  12. Open the Properties view and set the following properties for the Data Grid under :
    1. Set MultiSelect to false.
    2. Set SelectionMode to FullRowSelect.
    3. Set RowHeader to false
  13. Copy the DataGrid and paste it below the exisiting one. NewRow
  14. Change the name of the copied grid to dgvSalesOrderItem in the Properties view.
  15. Save your changes by pressing Ctrl S or the multiple floppy icons from the toolbar.
  16. Continue with the next step to add colums to the Sales Order Header Grid by following the instructions in the Adding Columns to the Sales Order Header Grid section.