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