@model IEnumerable<Sale>
@{
    var fields = new[] { "ID", "Start", "End", "Country", "Product", "Color", "Amount", "Amount2", "Discount", "Active" };
    var orders = new[] { "Ascending", "Descending" };
    ViewBag.DemoSettings = true;
    ViewBag.SettingsByMenu = false;
}

<c1-multi-row id="sortingMultiRow" class="multirow" is-read-only="true" order-by="ID">
    <c1-items-source read-action-url="@Url.Action("Sorting_Bind")"></c1-items-source>
    <c1-multi-row-cell-group>
        <c1-multi-row-cell binding="ID"></c1-multi-row-cell>
        <c1-multi-row-cell binding="Active"></c1-multi-row-cell>
    </c1-multi-row-cell-group>
    <c1-multi-row-cell-group>
        <c1-multi-row-cell binding="Start"></c1-multi-row-cell>
        <c1-multi-row-cell binding="End"></c1-multi-row-cell>
    </c1-multi-row-cell-group>
    <c1-multi-row-cell-group colspan="2">
        <c1-multi-row-cell binding="Country" colspan="2"></c1-multi-row-cell>
        <c1-multi-row-cell binding="Product"></c1-multi-row-cell>
        <c1-multi-row-cell binding="Color"></c1-multi-row-cell>
    </c1-multi-row-cell-group>
    <c1-multi-row-cell-group colspan="2">
        <c1-multi-row-cell binding="Amount"></c1-multi-row-cell>
        <c1-multi-row-cell binding="Amount2"></c1-multi-row-cell>
        <c1-multi-row-cell binding="Discount" colspan="2"></c1-multi-row-cell>
    </c1-multi-row-cell-group>
</c1-multi-row>

@section Scripts{
    <script>
    var field = "ID", order = "Ascending";
    function sortMultiRow(combo) {
        var multiRow, ascending, sd;
        if (combo.hostElement.id === "sortingfield")
            field = combo.selectedValue;
        if (combo.hostElement.id === "sortingorder")
            order = combo.selectedValue;

        if (!field || !order) {
            return;
        }

        multiRow = wijmo.Control.getControl("#sortingMultiRow");
        ascending = order === "Ascending";
        sd = multiRow.collectionView.sortDescriptions;
        sdNew = new wijmo.collections.SortDescription(field, ascending);

        // remove any old sort descriptors and add the new one
        sd.splice(0, sd.length, sdNew);
    }
    </script>
}

@section Settings {
    Sorting Field : <c1-combo-box id="sortingfield" selected-index="0" is-editable="false" selected-index-changed="sortMultiRow"><c1-items-source source-collection="@fields"></c1-items-source></c1-combo-box>
    Sorting Order : <c1-combo-box id="sortingorder" selected-index="0" is-editable="false" selected-index-changed="sortMultiRow"><c1-items-source source-collection="@orders"></c1-items-source></c1-combo-box>
}

@section Summary{
    This samples shows the sort features of the MultiRow control.
}

@section Description{
    In this sample, you can sort the collection based on the corresponding field value chosen in the first list. 
    You can also specify the sorting order in the second list.
}