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