@model IList<EnVisage.Models.SingleResQtiesOrCostByTimeModel.ExpenditureItem>
<script type="text/javascript">    
    function SelectAll(obj)
    {
        $.each($("input[type='checkbox'][id*='expCatCheckedId_']"), function (i, o)
        {
            o.checked = obj.checked;
            if (o.checked) {
                $(o).parent().parent().removeClass('unchecked');
            } else {
                $(o).parent().parent().addClass('unchecked');
            }
        });
        saveReportPagePreferences();
    }
</script>

<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="uom">
    <thead>
        <tr>
            <th style="width:30px;text-align: right;"><input type="checkbox" onclick="SelectAll(this);" /></th>
            <th>Select/Deselect All</th>
        </tr>
    </thead>
    <tbody>
        @{
            var GroupName = string.Empty;
            var i = 0;
        }
        @if (Model != null)
        {
            foreach( var SortedModel in Model.OrderBy(x => x.Group).ThenBy(z => z.Name))
            //for (var i = 0; i < SortedModel.Count; i++)
            {
                i=i+1;
                //if (GroupName != SortedModel[i].Group)
                  if (GroupName != SortedModel.Group)
                {
                    <tr class="text-bold">
                        <td colspan="2">@SortedModel.Group</td>
                    </tr>
                    {
                        GroupName = SortedModel.Group;
                    }
                }
                <tr>
                    <td style="text-align: right;">
                        <input type="checkbox" value="@SortedModel.Id" name="expCatCheckedId[@i]" id="expCatCheckedId_@SortedModel.Id" data-key="filterScenarioEC@(SortedModel.Id)" @SortedModel./>
                    </td>
                    <td>@SortedModel.Name</td>
                </tr>
            }
        }
    </tbody>
</table>