CollectionView Currency

The CollectionView has a currentItem property that identifies the item that is currently active.

This property is used by controls that support binding to lists and selection (including FlexGrid, FlexChart, ListBox, ComboBox, etc).

The example below implements a simple master/detail screen. Select a country from the ComboBox to change the current item. This raises the currentChanged event which is used to update the elements that show details of the current item.

Country
Downloads 17,587
Sales $796.26
Expenses $3,890.39
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
// This file locates: "Scripts/Lesson/C1Mvc/CVCurrency.js".
c1.documentReady(function () {
    // create some random data
    var countries = 'US,Germany,UK,Japan,Italy,Greece,Spain,Portugal,Australia'.split(',');
    var data = [];
    for (var i = 0; i < countries.length; i++) {
        data.push({
            id: i,
            country: countries[i],
            downloads: Math.round(Math.random() * 20000),
            sales: Math.random() * 10000,
            expenses: Math.random() * 5000
        });
    }
 
    // create a CollectionView
    var view = new wijmo.collections.CollectionView(data, {
        currentChanged: updateDetails,
        sortDescriptions: ['country']
    });
 
    // country combo
    var cmbCountry = wijmo.Control.getControl('#cmbCountry');
    cmbCountry.itemsSource = view;
    cmbCountry.displayMemberPath = 'country';
 
    // update details
    updateDetails();
    function updateDetails() {
        updateDetail('downloads', 'n0');
        updateDetail('sales', 'c');
        updateDetail('expenses', 'c');
    }
    function updateDetail(prop, fmt) {
        var text = '';
        if (view.currentItem) {
            text = wijmo.Globalize.format(view.currentItem[prop], fmt);
        }
        document.getElementById(prop).textContent = text;
    }
});
1
2
3
4
// This file locates: "Content/css/Lesson/C1Mvc/CVCurrency.css".
.demo-control td {
  border: none !important;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1MvcController : Controller
    {
        // GET: CVCurrency
        public ActionResult CVCurrency()
        {
            return View();
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<h1>
    @Html.Raw(Resources.C1Mvc.CVCurrency_Title)
</h1>
<p>
    @Html.Raw(Resources.C1Mvc.CVCurrency_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Mvc.CVCurrency_Text2)
</p>
<p>
    @Html.Raw(Resources.C1Mvc.CVCurrency_Text3)
</p>
 
<table class="table table-condensed">
    <tr>
        <td>@Html.Raw(Resources.C1Mvc.CVCurrency_Text4)</td>
        <td>
            @Html.C1().ComboBox().Id("cmbCountry")
        </td>
    </tr>
    <tr>
        <td>@Html.Raw(Resources.C1Mvc.CVCurrency_Text5)</td>
        <td id="downloads"></td>
    </tr>
    <tr>
        <td>@Html.Raw(Resources.C1Mvc.CVCurrency_Text6)</td>
        <td id="sales"></td>
    </tr>
    <tr>
        <td>@Html.Raw(Resources.C1Mvc.CVCurrency_Text7)</td>
        <td id="expenses"></td>
    </tr>
</table>