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