MVC Controls provide an advanced client-side API, which include methods, events and properties that allow you to update or modify your control at client-side. This enables the user to develop coherent web applications by combining server-side and client-side processing. The events, methods and properties works similar to the way .NET Framework handles events, methods and properties. The client-side API provided with the product is implemented using JavaScript. JavaScript code that implements the client API is embedded in the view file or embedded as a resource file.

• Client-Side Methods
• Client-Side Events

Client-Side Methods

Client-side API provides a variety of client-side methods to control the behavior and appearance of a control. To use a client-side API method in your application, you need to add a JavaScript code after the control declaration. In the JavaScript code, you can define or set methods, events and properties of any specific control.

Scenario

We want to display the sales data (Country, Product, and Amount) using the FlexGrid control. However, we also want to display the value of corresponding columns (Amount 2, Active, and Discount) in labels, based on the current row selected in the FlexGrid. This scenario can be implemented using the client-side methods. For more information about client-side methods, see Client-Side API Reference.

Before we even begin implementing the scenario, we need to first identify a suitable method in the FlexGrid client-side API section. In the FlexGrid class, we find the OnSelectionChanged method that helps us to process the selection changes. Once we select the OnSelectionChanged method, it further provides us details on the argument type, which in this case is CellRangeEventArgs. The CellRangeEventArgs provide row, column, data, range and panel arguments for the method. Now that we have selected the correct method for our scenario, we can now proceed to the implementation in the FlexGrid control.

In the code example below, we are using the OnSelectionChanged() method in the razor code that raises the selectionChanged event. We create a JavaScript function gridSelectionChange(s, e) to fetch the details of each row using CollectionView class. In the gridSelectionChange function, s stands for the sender(FlexGrid), and e is type of CellRangeEventArgs class. Moving further, we declare reference variables for the three label items, Amount2, Active and Discount respectively. CollectionView class provides currentItem property that returns the current item that is currently selected in the grid. We finally use this property to fetch the value of the three columns and assign them to the labels.

The following code example fetches the details of each row and display it in the labels using the OnClientSelectionChanged() method at client-side. This example uses the Sale.cs model created in the FlexGrid: Quick Start topic.

@using FlexGridClientSide.Models
@using C1.Web.Mvc.Grid

@model IEnumerable<Sale>
<script>
    function gridSelectionChange(s, e)
        {
            var cv =s.collectionView;

            var amt2 = document.getElementById('lblAmt2');
            var active = document.getElementById('lblActive');
            var discount = document.getElementById('lblDisc');
            if (cv.currentItem)
            {
                amt2.innerText = cv.currentItem.Amount2;
                active.innerText = cv.currentItem.Active;
                discount.innerText = cv.currentItem.Discount;
            }
    }
</script>
// Instantiate FlexGrid and set its properties
@(Html.C1().FlexGrid().Id("fg").Bind(Model).AutoGenerateColumns(false).Height("440px")
        .OnClientSelectionChanged("gridSelectionChange")
        .Columns(c => c.Add(cb => cb.Header("Country").Binding("Country"))
        .Add(cb => cb.Binding("Product").Header("Product"))
        .Add(cb => cb.Binding("Amount").Header("Amount")))
)
<div class="col-sm-4">
    <label>Amount2:</label>
    <label id="lblAmt2"></label>
    <br />
    <label>Active:</label>
    <label id="lblActive"></label>
    <br />
    <label>Discount:</label>
    <label id="lblDisc"></label>
</div>

@using C1.Web.Mvc.Grid
@model IEnumerable<Sale>

<script>
    function gridSelectionChange(s, e)
        {
            var cv =s.collectionView;

            var amt2 = document.getElementById('lblAmt2');
            var active = document.getElementById('lblActive');
            var discount = document.getElementById('lblDisc');
            if (cv.currentItem)
            {
                amt2.innerText = cv.currentItem.Amount2;
                active.innerText = cv.currentItem.Active;
                discount.innerText = cv.currentItem.Discount;
            }
    }
</script>
<c1-flex-grid auto-generate-columns="false" class="grid" id="fg" height="440px"
             selection-changed="gridSelectionChange">
    <c1-items-source source-collection="Model"></c1-items-source>
    <c1-flex-grid-column binding="Country" header="Country"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Product" header="Product"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Amount" format="c" header="Amount"></c1-flex-grid-column>
</c1-flex-grid>

<div class="col-sm-4">
    <label>Amount2:</label>
    <label id="lblAmt2"></label>
    <br />
    <label>Active:</label>
    <label id="lblActive"></label>
    <br />
    <label>Discount:</label>
    <label id="lblDisc"></label>
</div>

Client-Side Events

Client-side event handlers and callbacks are implemented using a JavaScript code. To handle a client-side event, the control provides a property that accepts either event handling code directly or the name of a handling function. The function must be initialized in the view code or in a separate js file.

Scenario

We want to display the sales data (Country, Product, and Amount) and show the amount column data in red color, if the Amount value is less than 1,000 dollars. This scenario can be implemented using the client-side events. For more information about client-side events, see Client-Side API Reference.

Before we even begin implementing the scenario, we need to first identify a suitable event in the FlexGrid client-side API section. For the following scenario, we will use the formatItem event in the FlexGrid class, as the requirement in our case is to format the cells in a grid. Once we select the formatItem event, it will provide us details on the argument type, which in this case is FormatItemEventArgs. The FormatItemEventArgs provide row, column, data, range and panel arguments for the event. Now that we have selected the correct event for our scenario, we can now proceed to the implementation in the FlexGrid control.

In the code example below, we subscribe the OnClientFormatItem event by assigning the JavaScript function name in the razor code. In the <Script> section, we declare the formatItem function to check, if the cell to be formatted is of type cell and column to be formatted is Amount. Moving further, we get the cell data using the getCellData method, and then check the value of Amount column to apply the color using cell.style.color property. Once you execute the code, notice that the cells containing amount less than 1,000 dollars are displayed in red color.

The following code example shows how to use OnClientFormatItem event in the FlexGrid control. This example uses the Sale.cs model created in the FlexGrid: Quick Start topic.

@using C1.Web.Mvc.Grid
@model IEnumerable<Sale>
<script>
    function formatItem(s, e) {
        if (e.panel.cellType == wijmo.grid.CellType.Cell && e.panel.columns[e.col].binding == "Amount") {
            var val = e.panel.grid.getCellData(e.row, e.col, false);
            if (val < 1000) {
                e.cell.style.color = 'red';
            }
        }
    }
</script>
// Instantiate FlexGrid and set its properties
@(Html.C1().FlexGrid().Id("fg").Bind(Model).AutoGenerateColumns(false).Height("440px")
        .OnClientFormatItem("formatItem")
        .Columns(c => c.Add(cb => cb.Header("Country").Binding("Country"))
        .Add(cb => cb.Binding("Product").Header("Product"))
        .Add(cb => cb.Binding("Amount").Header("Amount")))
)

@using C1.Web.Mvc.Grid
@model IEnumerable<Sale>

<script>
    function formatItem(s, e) {
        if (e.panel.cellType == wijmo.grid.CellType.Cell && e.panel.columns[e.col].binding == "Amount") {
            var val = e.panel.grid.getCellData(e.row, e.col, false);
            if (val < 1000) {
                e.cell.style.color = 'red';
            }
        }
    }
</script>
<c1-flex-grid auto-generate-columns="false" class="grid" id="fg" height="440px"
             format-item="formatItem">
    <c1-items-source source-collection="Model"></c1-items-source>
    <c1-flex-grid-column binding="Country" header="Country"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Product" header="Product"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Amount" format="c" header="Amount"></c1-flex-grid-column>
</c1-flex-grid>

Event handling using addHandler()

Another way of handling events is by using the addHandler method, just like the .NET events. The events can be subscribed using addHandler method and unsubscribed using the removeHandler method. The addHandler statement allows you to specify an event handler. However, addHandler when used with removeHandler, provides greater flexibility, allowing you to dynamically add, remove, and change the event handler associated with an event.

In the code example below, we are using the addHandler method to define a function for the formatItem event.

@model IEnumerable<Sale>
<script>
    var fg;
    c1.documentReady(function () {
        fg = wijmo.Control.getControl("#fg");
        fg.formatItem.addHandler(function (s,e) {
            if (e.panel.cellType == wijmo.grid.CellType.Cell && e.panel.columns[e.col].binding == "Amount") {
                var val = e.panel.grid.getCellData(e.row, e.col, false);
                if (val < 1000)
                    e.cell.style.color = 'red';
            }
        })
    });
</script>
// Instantiate FlexGrid and set its properties
@(Html.C1().FlexGrid().Id("fg").Bind(Model).AutoGenerateColumns(false).Height("440px")
        .Columns(c => c.Add(cb => cb.Header("Country").Binding("Country"))
        .Add(cb => cb.Binding("Product").Header("Product"))
        .Add(cb => cb.Binding("Amount").Header("Amount"))))

@using C1.Web.Mvc.Grid
@model IEnumerable<Sale>

<script>
    var fg;
    c1.documentReady(function () {
        fg = wijmo.Control.getControl("#fg");
        fg.formatItem.addHandler(function (s,e) {
        if (e.panel.cellType == wijmo.grid.CellType.Cell && e.panel.columns[e.col].binding == "Amount")            {
                var val = e.panel.grid.getCellData(e.row, e.col, false);
                if (val < 1000)
                    e.cell.style.color = 'red';
            }
        })
    });
</script>
<c1-flex-grid auto-generate-columns="false" class="grid" id="fg">
    <c1-items-source source-collection="Model"></c1-items-source>
    <c1-flex-grid-column binding="Country" header="Country"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Product" header="Product"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Amount" format="c" header="Amount"></c1-flex-grid-column>
</c1-flex-grid>

Copyright © GrapeCity, inc. All rights reserved.