Pluralization

There may be cases where you want to display custom messages based on the item count. This is especially important in certain cultures such as Polish.

The format method supports that by accepting format strings that contain pluralization rules encoded as JSON objects.

For example, choose the number of items and see the formatted output below:

A single item is selected.

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
// This file locates: "Scripts/Lesson/C1Mvc/Pluralization.js".
c1.documentReady(function () {
    // build format string with pluralization
    var fmtPlural = {
        count: 'count',
        when: {
            0: 'No items selected.',
            1: 'A single item is selected.',
            2: 'A pair is selected.',
            3: 'A trio is selected.',
            4: 'A quartet is selected.',
            'other': '{count:n0} items are selected.'
        }
    }
    fmtPlural = JSON.stringify(fmtPlural);
 
    // let the user choose the number of items
    var theInputNumber = wijmo.Control.getControl('#theInputNumber');
    updateMessage();
    theInputNumber.valueChanged.addHandler(function (s, e) {
        updateMessage();
    });
 
    function updateMessage() {
        document.getElementById('msg').textContent = wijmo.format(fmtPlural, {
            count: theInputNumber.value
        });
    }
});
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: Pluralization
        public ActionResult Pluralization()
        {
            return View();
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<h1>
    @Html.Raw(Resources.C1Mvc.Pluralization_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1Mvc.Pluralization_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Mvc.Pluralization_Text2)
</p>
<p>
    @Html.Raw(Resources.C1Mvc.Pluralization_Text3)
</p>
 
@Html.C1().InputNumber().Id("theInputNumber").Step(1).Value(1)
<p id="msg"></p>