Awesome ASP.net Core and MVC Controls
Grid Selection
In this demo multiple modes of grid selection are shown.
Multicheck select
select multiple rows by clicking on them, you can also use Shift to select/deselect multiple rows
selection:
GridDemo/Selection.cshtml
@(Html.Awe().Grid("MultiCheckSelectGrid")
.Url(Url.Action("GetItems", "LunchGrid"))
.Height(350)
.Selectable()
.Columns(
new Column { Bind = "Id", Width = 75 },
new Column { Bind = "Person" },
new Column { Bind = "Food" },
new Column { Bind = "Price", Width = 100 },
new Column { Bind = "Location" }))
<br/>
<div class="expl">
<span>selection:</span>
<span id="selection" class="wwrap"></span>
</div>
<script>
$(function () {
$('#MultiCheckSelectGrid')
.on('aweselect', function () {
var selectedItems = $('#MultiCheckSelectGrid').data('api').getSelection();
$('#selection').html(JSON.stringify(selectedItems));
})
.on('aweload', function () {
$('#selection').empty();
});
});
</script>
Single select
select one row by clicking on it
selection
GridDemo/Selection.cshtml
@(Html.Awe().Grid("SingleSelectGrid")
.Url(Url.Action("GetItems", "LunchGrid"))
.Height(350)
.Selectable(SelectionType.Single)
.Columns(
new Column { Bind = "Id", Width = 75 },
new Column { Bind = "Person" },
new Column { Bind = "Food" },
new Column { Bind = "Price", Width = 100 },
new Column { Bind = "Location" }))
<br/>
<div>
<span>selection</span>
<span id="selection1" class="wwrap"></span>
</div>
<script>
$(function () {
$('#SingleSelectGrid')
.on('aweselect', function () {
var selectedItems = $('#SingleSelectGrid').data('api').getSelection();
$('#selection1').html(JSON.stringify(selectedItems));
})
.on('aweload', function () {
$('#selection1').empty();
});
});
</script>
Multiselect
use click, ctrl+click, shift+click, ctrl+shift+click to select multiple rows
selection
GridDemo/Selection.cshtml
@(Html.Awe().Grid("MultiselectGrid")
.CssClass("keynav")
.Url(Url.Action("GetItems", "LunchGrid"))
.Height(400)
.Selectable(SelectionType.Multiple)
.Columns(
new Column { Bind = "Id", Width = 75 },
new Column { Bind = "Person"},
new Column { Bind = "Food" },
new Column { Bind = "Price", Width = 100 },
new Column { Bind = "Location" }))
<br/>
<button id="btnSelectAll" class="awe-btn">select all</button>
<button id="btnDeselectAll" class="awe-btn">deselect all</button>
<button id="btnSelectByPrice" class="awe-btn">select where price > 50</button>
<br/>
<br/>
<div>
<span>selection</span>
<span id="selection2" class="wwrap"></span>
</div>
<script>
$(function () {
$('#MultiselectGrid')
.on('aweselect', function () {
var selectedItems = $('#MultiselectGrid').data('api').getSelection();
$('#selection2').html(JSON.stringify(selectedItems));
})
.on('aweload', function () {
$('#selection2').empty();
});
$('#btnSelectAll').click(function () {
$('#MultiselectGrid .awe-row').addClass('awe-selected');
$('#MultiselectGrid').trigger('aweselect');
});
$('#btnDeselectAll').click(function () {
$('#MultiselectGrid .awe-row').removeClass('awe-selected');
$('#MultiselectGrid').trigger('aweselect');
});
$('#btnSelectByPrice').click(function () {
$('#MultiselectGrid .awe-row').removeClass('awe-selected').each(function (ix, item) {
if (utils.model($(item)).Price > 50) {
$(item).addClass('awe-selected');
}
});
$('#MultiselectGrid').trigger('aweselect');
});
});
</script>
Comments