Grid Selection

In this demo multiple modes of grid selection are shown.

Multicheck select 

Drag a column header and drop it here to group by that column
Id
Person
Food
Price
Location
3675EvePizza45Home
3671PhilApple100Tavern
3667RichardCheesecake30University
3663ScottShepherd's pie30Home
3659MonicaBanana20Home
3655SylvainOat meal45Diner
3651TreyBig Salad79University
3647MeganBanana18Restaurant
3643LeonardPizza39Visit
3639GordonFrench toast21Home
...

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

Drag a column header and drop it here to group by that column
Id
Person
Food
Price
Location
3675EvePizza45Home
3671PhilApple100Tavern
3667RichardCheesecake30University
3663ScottShepherd's pie30Home
3659MonicaBanana20Home
3655SylvainOat meal45Diner
3651TreyBig Salad79University
3647MeganBanana18Restaurant
3643LeonardPizza39Visit
3639GordonFrench toast21Home
...

selection
show code
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

Drag a column header and drop it here to group by that column
Id
Person
Food
Price
Location
3675EvePizza45Home
3671PhilApple100Tavern
3667RichardCheesecake30University
3663ScottShepherd's pie30Home
3659MonicaBanana20Home
3655SylvainOat meal45Diner
3651TreyBig Salad79University
3647MeganBanana18Restaurant
3643LeonardPizza39Visit
3639GordonFrench toast21Home
...



selection
show code
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