Custom layouts
 Next   Menu    Previous 

Because the grid controls operate in isolation to the rest of the page they become easy to integrate into 3rd party layouts. In this example, linked grids are presented in a tabbed interface. The sample also demonstrates use of the client-side event RowSelected to set the tab label using the client-side columnValue method
Loading...
Loading...
Loading...
Razor code

var customerColumns = new List<GridColumn>
{
    new GridColumn("customerid", "CustomerID") {PrimaryKey = true },
    new GridColumn("firstname", "Forename"),
    new GridColumn("lastname", "Surname"),
    new GridColumn("email", "Email Address") {Format = FormatType.Email },
    new GridColumn("address", "Address"),
    new GridColumn("city", "City") { InitialSortOrder = SortOrder.Desc},
    new GridColumn("postalcode", "Post Code"),
};

var invoiceColumns = new List<GridColumn>
{
    new GridColumn("invoiceid", "Invoice ID") {PrimaryKey = true },
    new GridColumn("customerid", "Customer ID") {ForeignKey = true },
    new GridColumn("invoicedate", "Date"),
    new GridColumn("billingaddress", "Address"),
    new GridColumn("billingcity", "City"),
    new GridColumn("billingstate", "State"),
    new GridColumn("billingcountry", "Country"),
    new GridColumn("billingpostalcode", "Post Code"),
};

var invoiceItemColumns = new List<GridColumn>
{
    new GridColumn("invoicelineid", "Invoice Line ID"),
    new GridColumn("invoiceid", "Invoice ID") {ForeignKey = true },
    new GridColumn("trackid", "Track ID") {Lookup = new Lookup("tracks","trackid","name")},
    new GridColumn("unitprice", "Price"),
    new GridColumn("quantity", "Qty"),
};

var invoiceLineGrid = new GridModel("Invoice_items");
invoiceLineGrid.Columns = invoiceItemColumns;
invoiceLineGrid.Caption = "Invoice Lines";
invoiceLineGrid.PageSize = 10;
invoiceLineGrid.ToolbarPosition = ToolbarPosition.Hidden;

var invoiceGrid = new GridModel("Invoices");
invoiceGrid.Columns = invoiceColumns;
invoiceGrid.AddLinkedGrid(invoiceLineGrid);
invoiceGrid.Caption = "Invoices";
invoiceGrid.PageSize = 10;
invoiceGrid.ToolbarPosition = ToolbarPosition.Hidden;
invoiceGrid.ClientEvents[ClientEvent.RowSelected] = "setOrderDetailsTabLabel";

var customerGrid = new GridModel(DataSourceType.SQLite, "Chinook", "Customers");
customerGrid.Columns = customerColumns;
customerGrid.AddLinkedGrid(invoiceGrid);
customerGrid.PageSize = 10;
customerGrid.ClientEvents[ClientEvent.RowSelected] = "setOrderTabLabel";

<div class="source">
    <ul class="nav nav-tabs" id="myTab" role="tablist">
        
        
        
    </ul>
    <div class="tab-content" id="linkedGrids">
        <div class="tab-pane fade show active" id="customers" role="tabpanel" aria-labelledby="customers-tab">
            @(await new DbNetSuiteCore.GridControl(HttpContext).Render(customerGrid))
        </div>
        <div class="tab-pane fade" id="orders" role="tabpanel" aria-labelledby="orders-tab">
            @(await new DbNetSuiteCore.GridControl(HttpContext).Render(invoiceGrid))
        </div>
        <div class="tab-pane fade" id="orderdetails" role="tabpanel" aria-labelledby="orderdetails-tab">
            @(await new DbNetSuiteCore.GridControl(HttpContext).Render(invoiceLineGrid))
        </div>
    </div>
</div>