Grid Selection
In this demo multiple modes of grid selection are shown.
Multicheck select
selection:
Select multiple rows by clicking on them, you can also use Ctrl and Shift to select/deselect multiple rows.
Adding class 'awe-nonselect' to the row will make the row non selectable. You can also add this class to a tag inside the row, so that when you click inside that the tag the selection won't occur.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.Name" },
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.Name" },
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 (aweUtils.model($(item)).Price > 50) {
$(item).addClass('awe-selected');
}
});
$('#MultiselectGrid').trigger('aweselect');
});
});
</script>
Comments