Grid Demo - Mailbox messages

@{
    var chkformat = "<div class=\"o-chk\"><div class=\"o-chkc\"><div class=\"o-chkico\"></div></div></div>";
    var mchkformat = "<div id=\"mainCheck\" class=\"o-chk\"><div class=\"o-chkc\"><div class=\"o-chkico\"></div></div></div>";
}
<div class="bar">
    @(Html.Awe().AjaxRadioList("selectMenu")
        .CssClass("allChk")
        .DataFunc("selectMenuData")
        .MenuDropdown(o => o.Caption(mchkformat)))

    <div class="actbar awe-il">
        <button type="button" class="awe-btn" id="btnRefresh">Refresh</button>
        <div class="selActions awe-il" style="display: none;">
            <button type="button" id="btnDelete" class="awe-btn">Delete</button>
            <button type="button" id="btnMarkRead" class="awe-btn">Mark as read</button>
            <button type="button" id="btnMarkUnread" class="awe-btn">Mark as unread</button>
        </div>
    </div>
</div>

@(Html.Awe().Grid("MessagesGrid")
        .Url(Url.Action("GetItems", "MessagesGrid"))
        .Mod(o => o.MiniPager().PageInfo())
        .ShowHeader(false)
        .ShowGroupBar(false)
        .CssClass("mboxg")
        .Selectable(SelectionType.Multicheck, ".sel")
        .RowClassClientFormat(".(RowClass)")
        .Columns(
            new Column
            {
                ClientFormat = chkformat,
                Width = 50,
                CssClass = "sel"
            },
            new Column { Bind = "From", Width = 150, ClientFormat = ".(Subject)" },
            new Column { ClientFormat = ".(From) <span class='bodytext'>.(Body)</span>" }.Mod(o => o.Autohide()),
            new Column { Bind = "DateReceived", Sort = Sort.Desc, Width = 125 }))

@(Html.Awe().InitPopup(new PopupOpt
{
    Name = "ReadMessage",
    Url = Url.Action("ReadMessage"),
    Modal = true,
    OutClickClose = true
}))

@Html.Awe().InitCall("markRead").Url(Url.Action("MarkRead")).Success("mbox.reload")
@Html.Awe().InitCall("markUnread").Url(Url.Action("MarkUnread")).Success("mbox.reload")
@Html.Awe().InitCall("delete").Url(Url.Action("Delete")).Success("mbox.reload")

@section scripts
{
    <script type="text/javascript">
        var lastSelIds;
        var grid = $('#MessagesGrid');
        var sochked = 'o-chked';
        var spartselected = 'partselected';

        function selectMenuData() {
            return [
                { c: 'All', click: 'mbox.selectAll()' },
                { c: 'None', click: 'mbox.deselectAll()' },
                { c: 'Read', click: 'mbox.selectRead()' },
                { c: 'Unread', click: 'mbox.selectUnread()' }
            ];
        }

        var mbox = function (g) {
            var scls = 'awe-selected';
            return {
                selIds: function () {
                    return $.map(g.data('api').getSelection(), function (o) { return o.Id; });
                },

                reload: function () {
                    g.data('api').load();
                },

                selectAll: function () {
                    g.find('.awe-row').addClass(scls);
                    g.trigger('aweselect');
                },

                deselectAll: function () {
                    g.find('.awe-row').removeClass(scls);
                    g.trigger('aweselect');
                },

                selectRead: function () {
                    g.find('.awe-row').removeClass(scls).each(function (_, item) {
                        if (aweUtils.model($(item)).IsRead) {
                            $(item).addClass(scls);
                        }
                    });
                    g.trigger('aweselect');
                },

                selectUnread: function () {
                    g.find('.awe-row').removeClass(scls).each(function (_, item) {
                        if (!aweUtils.model($(item)).IsRead) {
                            $(item).addClass(scls);
                        }
                    }).trigger('aweselect');
                }
            };
        }(grid);


        $(function () {
            var $mainCheck = $('#mainCheck');

            $mainCheck.click(function () {
                if ($mainCheck.hasClass(sochked) || $mainCheck.hasClass(spartselected)) {
                    mbox.deselectAll();
                } else {
                    mbox.selectAll();
                }

                return false;
            });

            // buttons
            $('#btnMarkRead').click(function () {
                awe.oc('markRead', { params: { ids: mbox.selIds() } });
            });

            $('#btnMarkUnread').click(function () {
                awe.oc('markUnread', { params: { ids: mbox.selIds() } });
            });

            $('#btnDelete').click(function () {
                awe.oc('delete', { params: { ids: mbox.selIds() } });
            });

            $('#btnRefresh').click(mbox.reload);

            // grid row click open message
            grid.on('click', '.awe-row', function (e) {
                if (!$(e.target).closest('.sel').length) {
                    var $row = $(this).closest('.awe-row');
                    awe.open('ReadMessage', { params: { id: aweUtils.model($row).Id } });
                    if ($row.hasClass('notRead')) mbox.reload();
                }
            });

            grid.on('aweselect', function () {
                lastSelIds = mbox.selIds();
                $mainCheck.removeClass(sochked + ' ' + spartselected);
                $('.selActions').show();
                var cls = '';

                if (lastSelIds.length && grid.find('.awe-row').length == lastSelIds.length) {
                    cls = sochked;
                }
                else if (lastSelIds.length > 0) {
                    cls = spartselected;
                } else {
                    $('.selActions').hide();
                }

                $mainCheck.addClass(cls);

                // sync grid selection with o-chk
                grid.find('.awe-row .o-chk').removeClass(sochked);
                grid.find('.awe-row.awe-selected .o-chk').addClass(sochked);
            });

            // maintain selection on reload
            grid.on('aweload', function () {
                if (lastSelIds) {
                    grid.find('.awe-row')
                        .each(function (i, row) {
                            if ($.inArray(aweUtils.model($(row)).Id, lastSelIds) > -1) {
                                $(row).addClass('awe-selected');
                            }
                        });

                    grid.trigger('aweselect');
                }
            });
        });
    </script>
}

<style>
    .readItem {
        cursor: pointer;
    }

    .notRead {
        font-weight: bold;
    }

    .bodytext {
        color: gray;
        font-weight: normal;
    }

    .sel {
        cursor: default;
    }

    .mboxg .awe-row {
        cursor: pointer;
        font-family: arial, sans-serif;
    }

    .mboxg .awe-relbox {
        display: none;
    }

    .mboxg .awe-row td {
        border-right: none;
    }

    .mboxg .awe-footer {
        border: none;
    }

    .actbar {
        line-height: 2em;
        font-size: 0.9em;
    }

        .actbar .awe-btn {
            padding: .28em .7em;
        }

    .allChk {
        min-width: auto;
    }
</style>