MailboxDemo/Index.cshtml
src
@{ 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>