Infragistics(R) IgniteUI
Enabling Column Summaries
E-mail your feedback on this topic.

Glossary Item Box

Topic Overview

Purpose

This demonstrates how to programmatically enable the column summaries widget of igGrid™ control.

In This Topic

This topic contains the following sections:

Introduction

The column summaries widget allows the igGrid to display a summary row for the data in the columns of the grid. There are predefined summary functions, but you can create custom function to calculate custom summaries.

The column summaries functionality is managed by the name property of the igGrid’s features option: just pointing the name property to name: ‘Summaries’ enables columnSummaires feature.

The example below configures an igGrid with the summaries feature enabled.

Preview

Following is a preview of the final result.

Requirements

General requirements

Scripting requirements

The following code sample demonstrates the scripts as added to the header code of the HTML file.

In HTML:

<script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery-ui.min.js"></script> <script type="text/javascript" src="infragistics.core.js"></script>

<script type="text/javascript" src="infragistics.lob.js"></script>

Database requirements

For the purpose of this example only:

Enabling Column Summaries in JQuery

  1. Set up the data source.

    The data source used in the following code snipped is for the purpose of this example.

    In HTML:

    <script type="text/javascript">
    source = [
             { "ProductID": 1, "Name": "Adjustable Race", "SafetyStockLevel": 1000, "ReorderPoint": 750, "StandardCost": 0.0000 }, 
             { "ProductID": 2, "Name": "Bearing Ball", "SafetyStockLevel": 1000, "ReorderPoint": 750, "StandardCost": 0.0000 }, 
             { "ProductID": 3, "Name": "BB Ball Bearing", "SafetyStockLevel": 800, "ReorderPoint": 600, "StandardCost": 0.0000 },
             { "ProductID": 4, "Name": "Headset Ball Bearings", "SafetyStockLevel": 800, "ReorderPoint": 600, "StandardCost": 0.0000 }]
    
    </script>
    
    
  1. Create an igGrid and call its summaries feature.

    Inside the $(document).ready() event handler, you first create an igGrid and then call its summaries feature.

    In Javascript:

    $("#grid").igGrid({
        autoGenerateColumns: true,
        dataSource: source,
        features: [
                   {
                     name: 'Summaries'
                   }
              ]
    });
    
  2. Save the file.
  3. (Optional) Verify the result.

    To verify the result, open the file. The result should look as shown in the Preview above.

Enabling Column Summaries in MVC

  1. Create an MVC Controller method.

    Create an MVC Controller method to get data from the Model and will call the View.

    In MVC:

    public ActionResult Default()
    {
        var ds = this.DataRepository.GetDataContext().Products.Take(4);
        return View(ds);
    }
    
    
  2. Instantiate the igGrid.

    Instantiate the igGrid with the columnSummaries feature enabled.

    In ASPX:

    <%= Html.Infragistics().Grid(Model)
            .AutoGenerateColumns(true)
            .Features(feature =>{
                feature.Summaries();
                }).DataBind()
            .Render()
    %>
    
    

    In Razor:

    @( Html.Infragistics().Grid(Model)
            .AutoGenerateColumns(true)
            .Features(feature =>{
                feature.Summaries();
                }).DataBind()
            .Render()
        )
    
    
  3. Save the file.
  4. (Optional) Verify the result.

    To verify the result, run the MVC project and open the file. The result should look as shown in the Preview above.

Related Topics

Following are some other topics you may find useful.

Configuring Column Summaries

Using JavaScript Resources in Ignite UI

Styling and Theming Ignite UI

Related Samples