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" }))

<fieldset>
<legend>selection</legend>
<div id="selection" class="wwrap"></div>
</fieldset>
<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" }))

<fieldset>
<legend>selection</legend>
<div id="selection1" class="wwrap"></div>
</fieldset>
<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>

<fieldset>
<legend>selection</legend>
<div id="selection2" class="wwrap"></div>
</fieldset>
<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

We use cookies to improve your online experience. By accessing this site, you agree to the use of cookies and other technologies to process your personal data (e.g. IP address) to enhance and personalise your experience across our websites. Additionally, third-party companies, may store cookies on your device and use similar technologies to collect and use certain information. For more information, refer to our privacy policy and cookie policy.