Exercise 5: Design Grid of AutoCount Accounting 1.8

Objectives: Add a new GridControl and apply Formatting on the grid.
Implement AutoCount Accounting 1.8 Visual Style requires DevExpress WinForms Components version 13.1.10.
Add Master and Detail tables relation to GridControl.

This exercise uses project from previous exercise.

1. Open Form "FormShowSalesInvoice" that was created in project "Tutorial.PRG201",

2. Go to source code of "FormShowSalesInvoice".

3. Add References of AutoCount Accounting

BCE.AutoCount.dll
BCE.AutoCount.CommandAccounting.dll
BCE.AutoCount.MainEntry.dll
BCE.Utils.dll
BCE.Utils.UI.dll
BCE.AutoCount.Invoicing.dll
BCE.AutoCount.Invoicing.Sales.dll

4. Add References of DevExpress WinForms.

DevExpress.Data.v13.1.dll
DevExpress.Design.v13.1.dll
DevExpress.Utils.v13.1.dll
DevExpress.Utils.v13.1.UI.dll
DevExpress.XtraEditors.v13.1.dll
DevExpress.XtraGrid.v13.1.dll

Create Grid Control in coding

From step 5 to step 7 can be done in Design Mode.
For exercise, you can copy and paste below coding.

5. Add below using directives, if it has not been added

using System.Data;
using DevExpress.XtraGrid;
using DevExpress.XtraEditors;
using DevExpress.XtraGrid.Views.Base;
using DevExpress.XtraGrid.Views.Grid;
using DevExpress.XtraGrid.Columns;

6. Declare variables and Instantiate object

• Declare DevExpress GridControl and GridView
• Declare DevExpress Controls
• Declare DataSet for 2 tables

[BCE.AutoCount.PlugIn.MenuItem("Show Sales Invoice", 30)]
[BCE.Application.SingleInstanceThreadForm]
public partial class FormShowSalesInvoice : DevExpress.XtraEditors.XtraForm
{
    private BCE.Data.DBSetting mydbset;
    private GridControl gridControlMain = new GridControl();
    private GridView gridViewMaster;
    private GridView gridViewDetail;
    private PanelControl pnlCommand = new PanelControl();
    private SimpleButton btnInquiry = new SimpleButton();

    private DataSet myDataSetInvoice;

    public FormShowSalesInvoice(BCE.Data.DBSetting dbSetting)
    {
        InitializeComponent();
        mydbset = dbSetting;

        new BCE.AutoCount.Controls.PanelHeader(this, "Show Sales Invoice", "");
    }
}

7. Add Configuration Coding in constructor

• Configure Controls
  • Panel Control: pnlCommand
  • Simple Button: btnInquiry
• Configure GridControl and GridView

public FormShowSalesInvoice(BCE.Data.DBSetting dbSetting)
{
    InitializeComponent();
    mydbset = dbSetting;
    //Create GridView of 'Master' & 'Detail' table
    gridViewMaster = new GridView(gridControlMain);
    gridViewDetail = new GridView(gridControlMain);

    new BCE.AutoCount.Controls.PanelHeader(this, "Show Sales Invoice", "");
    ConfigureControl();
    ConfigureGridView();
    ConfigureGridControl();
}

private void ConfigureControl()
{
    pnlCommand.Dock = DockStyle.Top;
    pnlCommand.Height = 200;

    btnInquiry.Text = "&Inquiry";
    btnInquiry.Size = new Size(200, 50);
    btnInquiry.Location = new Point(10, pnlCommand.Height - 60);
    btnInquiry.Click += BtnInquiry_Click; ;

    this.Controls.Add(pnlCommand);
    pnlCommand.Controls.AddRange(new Control[] { btnInquiry });
    pnlCommand.BringToFront();
}

private void ConfigureGridView()
{
    gridControlMain.MainView = gridViewMaster;
    gridViewMaster.OptionsBehavior.Editable = false;
    gridViewDetail.OptionsBehavior.Editable = false;

    AddMasterDetailColumnsToGridView();
}

private void ConfigureGridControl()
{
    gridControlMain.DataSource = myDataSetInvoice;

    this.Controls.Add(gridControlMain);
    gridControlMain.Dock = DockStyle.Fill;
    gridControlMain.BringToFront();
    gridControlMain.LevelTree.Nodes.Add("InvoiceDetail", gridViewDetail);
}

private void AddMasterDetailColumnsToGridView()
{
    gridViewMaster.Columns.AddRange(new GridColumn[]
    {
        NewGridColumn("DocKey", -1),
        NewGridColumn("DocNo", 0),
        NewGridColumn("DocDate", 1),
        NewGridColumn("DebtorName", 2),
        NewGridColumn("Description", 3),
        NewGridColumn("SalesAgent", 11),
        NewGridColumn("FinalTotal", 12),
        NewGridColumn("DebtorType", 21)
    });

    gridViewDetail.Columns.AddRange(new GridColumn[]
    {
        NewGridColumn("DocKey", -1),
        NewGridColumn("DtlKey", -1),
        NewGridColumn("ItemCode", 0),
        NewGridColumn("Location", 1),
        NewGridColumn("Qty", 11),
        NewGridColumn("UnitPrice", 12),
        NewGridColumn("DiscountAmt", 13),
        NewGridColumn("SubTotal", 14),
        NewGridColumn("ItemType", 21)
    });
}

private GridColumn NewGridColumn(string fieldName, int visibleIndex)
{
    GridColumn col = new GridColumn();
    col.FieldName = fieldName;
    col.Caption = fieldName;
    col.VisibleIndex = visibleIndex;
    return col;
}

private void BtnInquiry_Click(object sender, EventArgs e)
{
    throw new NotImplementedException();
}

Implement AutoCount Pop-up Menu on GridView

8. Insert CustomizeGridLayout(...) method,

after columns of the grid has been created at ConfigureGridView() method.

GridColumns in the GridView must be created before calling CustomizeGridLayout(...)
GridColumns of GridView can be either pre-created in design mode,
or
GridColumns can be auto-created by GridView during DataSource contains data, when OptionsBehavior.AutoPopulateColumns is true (default is true);

private void ConfigureGridView()
{
    gridControlMain.MainView = gridViewMaster;
    gridViewMaster.OptionsBehavior.Editable = false;
    gridViewDetail.OptionsBehavior.Editable = false;

    AddMasterDetailColumnsToGridView();
    //Enhance Gridview and Extend Pop-up menu on the GridView after GridColumns are pre-created.
    new BCE.AutoCount.XtraUtils.CustomizeGridLayout(mydbset, this.Name, gridViewMaster);
}

Load Data

9. Load Data with GetDataTable() method

• Load Master and Detail into DataTable
• Add DataTable to DataSet
• Set DataRelation of two tables

The name of DataRelation has to be the same as the GridControl node's Relation Name.

gridControlMain.LevelTree.Nodes.Add("InvoiceDetail", gridViewDetail);

DataRelation relation = new DataRelation("InvoiceDetail",
   dtMaster.Columns["DocKey"], dtDetail.Columns["DocKey"]);

private void BtnInquiry_Click(object sender, EventArgs e)
{
    LoadDataSetInvoice();
}

private void LoadDataSetInvoice()
{
    BeginDataUpdate();
    myDataSetInvoice = new DataSet("Invoice Dataset");
    DataTable dtMaster = GetMasterDataTable("Master");
    DataTable dtDetail = GetDetailDataTable("Detail");

    myDataSetInvoice.Tables.Add(dtMaster);
    myDataSetInvoice.Tables.Add(dtDetail);

    DataRelation relation = new DataRelation("InvoiceDetail",
        dtMaster.Columns["DocKey"], dtDetail.Columns["DocKey"]);
    myDataSetInvoice.Relations.Add(relation);
    gridControlMain.DataSource = dtMaster;

    EndDataUpdate();
}

private DataTable GetMasterDataTable(string tableName)
{
    string sqlSelect = "SELECT"
        + " A.DocKey, A.DocNo, A.DocDate, A.DebtorName, A.Description"
        + ",A.SalesAgent, A.FinalTotal"
        + ",D.DebtorType"
        + " FROM IV A JOIN DEBTOR D ON A.DebtorCode = D.AccNo";

    DataTable table = mydbset.GetDataTable(sqlSelect, false);
    table.TableName = tableName;
    return table;
}

private DataTable GetDetailDataTable(string tableName)
{
    string sqlSelect = "SELECT"
        + " B.DocKey, B.DtlKey, B.ItemCode, B.Location"
        + ",B.Qty, B.UnitPrice, B.DiscountAmt, B.SubTotal"
        + ",I.ItemType"
        + " FROM IV A JOIN IVDTL B ON A.DocKey = B.DocKey"
        + " LEFT JOIN Item I ON B.ItemCode = I.ItemCode";

    DataTable table = mydbset.GetDataTable(sqlSelect, false);
    table.TableName = tableName;
    return table;
}

private void BeginDataUpdate()
{
    gridControlMain.BeginUpdate();
    gridViewMaster.BeginDataUpdate();
    gridViewDetail.BeginDataUpdate();
}

private void EndDataUpdate()
{
    gridViewMaster.EndDataUpdate();
    gridViewDetail.EndDataUpdate();
    gridControlMain.EndUpdate();
}

Format Data in the Grid

10. Add a method, and name it InitFormControl()

11. Create an object of BCE.AutoCount.XtraUtils.FormControlUtil

12. Call InitControl(this) to begin,

• Font setting on the Form,
• and Formatting of Data display on the Grid

private void InitFormControl()
{
    //Create an object of BCE.AutoCount.XtraUtils.FormControlUtil
    BCE.AutoCount.XtraUtils.FormControlUtil formUtil = new BCE.AutoCount.XtraUtils.FormControlUtil(mydbset);


    formUtil.InitControls(this);
}

13. Add Fieldname of the GridView to BCE.AutoCount.XtraUtils.FormControlUtil

The fieldname must be already created in the GridView's Column

private void InitFormControl()
{
    BCE.AutoCount.XtraUtils.FormControlUtil formUtil = new BCE.AutoCount.XtraUtils.FormControlUtil(mydbset);

    //Add Field here for display formatting on Selected fields
    formUtil.AddField("DocDate", BCE.AutoCount.XtraUtils.FormControlUtil.DATE_FIELD);
    formUtil.AddField("FinalTotal", BCE.AutoCount.XtraUtils.FormControlUtil.CURRENCY_FIELD);
    formUtil.AddField("Qty", BCE.AutoCount.XtraUtils.FormControlUtil.QUANTITY_FIELD);
    formUtil.AddField("UnitPrice", BCE.AutoCount.XtraUtils.FormControlUtil.PRICE_FIELD);
    formUtil.AddField("SubTotal", BCE.AutoCount.XtraUtils.FormControlUtil.CURRENCY_FIELD);

    formUtil.InitControls(this);
}

14. Call InitFormControl() method at contructor, after the GridColumn has been created in GridView.

public FormShowSalesInvoice(BCE.Data.DBSetting dbSetting)
{
    InitializeComponent();
    mydbset = dbSetting;
    gridViewMaster = new GridView(gridControlMain);
    gridViewDetail = new GridView(gridControlMain);

    new BCE.AutoCount.Controls.PanelHeader(this, "Show Sales Invoice", "");
    ConfigureControl();
    ConfigureGridView();
    ConfigureGridControl();
    InitFormControl();
}

Master and Detail with data relation is displayed on a GridControl

See Also

• Plug-In 1.8 Getting Started
• Plug-In 1.8 User Control & Interface
• Exercise 1: Build My First Plug-In
• Exercise 2: Create Dialog Box
• Exercise 3: Create Form
• Exercise 4: Design Form of AutoCount Accounting 1.8
• Exercise 5: Design Grid of AutoCount Accounting 1.8

Go to menu

Go to top

Resources For AutoCount Software Developers