Grid Demo - Mailbox messages

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



Comments