Grid with checkboxes on each row, and in the header to check/uncheck all

Grid with checkboxes


Shared/Demos/GridCheckboxes.cshtml
@{
var gridId = "GridCheckboxes";
var rowCheckbox = Html.Awe().CheckBox(new CheckBoxOpt
{
Name = "Id",
Prefix = "c.(Id)", // add prefix get unique id on each row
InputAttr = new { data_val = ".(Id)" }
}).ToString();

var headerCheckbox = Html.Awe().CheckBox(new CheckBoxOpt
{
Name = "ChkAll",
SyncScript = true
}).ToString();
}

@(Html.Awe().Grid(gridId)
.Height(350)
.Url(Url.Action("GetItems", "LunchGrid"))
.Columns(
new Column
{
Width = 50,
ClientFormat = rowCheckbox,
Header = headerCheckbox
},
new Column { Bind = "Person" },
new Column { Bind = "Food.Name" },
new Column { Bind = "Location" }))
<br />
<button class="awe-btn" id='btnGetSelection1'>get selection</button>
<span id="gridChkLog1"></span>
<script>
$(function () {
var gridId = '@gridId';

gridCheckboxes(gridId);

// get selection
$('#btnGetSelection1').click(function () {
var arr = $('#'+gridId+' [name=Id]').filter(function () {
return $(this).val() == 'true';
}).map(function () {
return $(this).data('val');
}).get();

$('#gridChkLog1').html(JSON.stringify(arr));
});
});

function gridCheckboxes(gridId) {
// select/unselect all
var $grid = $('#' + gridId);
$grid.on('change', '#ChkAll', function () {
$grid.find('[name=Id]').val($(this).val()).change();
}).on('aweload', function () {
$('#ChkAll').val('').change();
});
}
</script>

Grid with checkboxes that persist state when paging


GridCheckboxesDemo/Index.cshtml
@{
var gridId = "GridChkPersistent";

var gridRowChk1 = Html.Awe().CheckBox(new CheckBoxOpt
{
Name = "Id",
Prefix = gridId + ".(Id)",
InputAttr = new { data_val = ".(Id)" },
SyncScript = true
}).ToString();

var headerChk1 = Html.Awe().CheckBox(new CheckBoxOpt
{
Name = "ChkAll",
SyncScript = true,
Prefix = gridId
}).ToString();
}

@(Html.Awe().Grid(gridId)
.Mod(o => o.Main())
.Height(350)
.Columns(
new Column
{
Width = 50,
ClientFormat = gridRowChk1,
Header = headerChk1

}.Mod(o => o.Nohide()),
new Column { Bind = "Person" }.Mod(o => o.Nohide()),
new Column { Bind = "Food.Name" },
new Column { Bind = "Location" })
.Url(Url.Action("GetItems", "LunchGrid")))

<br />
<button class="awe-btn" id='btnGetAllSelection'>get selection (all pages)</button>
<button class="awe-btn" id="btnClearAll">clear all</button>
<span id="log"></span>

<script>
$(function () {
var gChk = gridPersistentCheckboxes('@(gridId)', "Id");

// get all selection (including checkboxes on other pages)
$('#btnGetAllSelection').click(function () {
$('#log').html(JSON.stringify(gChk.getAll()));
});

$('#btnClearAll').click(function () {
gChk.clear();
});
});

function gridPersistentCheckboxes(gid, chkName) {
var chkSel = '[name=' + chkName + ']';
var chkAllSel = '[name=ChkAll]';
var vals = {};
var grid = $('#' + gid);
var rowsel = '.awe-row:not(.o-frow)';
grid.on('awerender', function () {
var allChecked = true;
grid.find(rowsel).each(function () {
var row = $(this);
if (vals[row.data('k')]) {
row.find(chkSel).val(true).data('api').render();
} else {
allChecked = false;
}
});

grid.find(chkAllSel).val(allChecked).data('api').render();
});

// check/uncheck all
grid.on('change', chkAllSel, function () {
var val = $(this).val();
var isChecked = val === 'true';

grid.find(rowsel).each(function () {
var $row = $(this);
$row.find(chkSel).val(val).data('api').render();
var key = $row.data('k');
if (isChecked) vals[key] = 1;
else delete vals[key];
});
});

// check single row
grid.on('change', chkSel, function () {
var chk = $(this);
var isChecked = chk.val() === 'true';
var key = chk.closest(rowsel).data('k');
if (isChecked) vals[key] = 1;
else delete vals[key];
});

return {
getAll: function () {
var keys = [];
for (var k in vals) {
keys.push(k);
}
return keys;
},
clear: function () {
vals = {};
grid.data('api').load();
}
};
}
</script>

Grid with checkboxes, native checkbox


GridCheckboxesDemo/Index.cshtml
@(Html.Awe().Grid("GridChkNatv")
.Height(350)
.Columns(
new Column
{
Width = 40,
ClientFormat = "<input type='checkbox' name='id' value='.(Id)'/>",
Header = "<input type='checkbox' name='chkAll' />"
},
new Column { Bind = "Person" },
new Column { Bind = "Food.Name" },
new Column { Bind = "Location" })
.Url(Url.Action("GetItems", "LunchGrid")))

<br />
<button class="awe-btn" id='btnGetSelection1sc'>get selection</button>
<span id="log1sc"></span>

<script>
$(function () {
gridCheckboxesSc('GridChkNatv');

// get selection
$('#btnGetSelection1sc').click(function () {
var arr = $('#GridChkNatv [name=id]:checked').map(function () {
return $(this).val();
}).get();

$('#log1sc').html(JSON.stringify(arr));
});
});

function gridCheckboxesSc(gridId) {
// select/unselect all
var $grid = $('#' + gridId);
$grid.on('click', '[name=chkAll]', function () {
var isChecked = $(this).prop('checked');
$grid.find('[name=id]').prop('checked', isChecked);
});
}
</script>
<style>
input[type=checkbox] {
zoom: 1.3;
margin: 0;
vertical-align: middle;
}
</style>

Tree grid with checkboxes


GridCheckboxesDemo/Index.cshtml
@(Html.Awe().Grid("TreeGrid1")
.Url(Url.Action("SimpleTree", "TreeGrid"))
.Columns(
// awe-nonceb class stops the collapse expand node/group action
new Column { Bind = "Name", ClientFormat = "<input class='awe-nonceb' type='checkbox' name='id' value='.(Id)'/> .(Name)" },
new Column { Bind = "Id", Width = 100 })
.Groupable(false)
.PageSize(3)
.Height(400))

<br />
<button class="awe-btn" id='btnGetSelectionTree'>get selection</button>
<span id="logtree"></span>

<script>
$(function () {
// get selection
$('#btnGetSelectionTree')
.click(function () {
var arr = $('#TreeGrid1 [name=id]:checked')
.map(function () {
return $(this).val();
})
.get();

$('#logtree').html(JSON.stringify(arr));
});
});
</script>

Conditional Grid Checkbox

GridCheckboxesDemo/Index.cshtml
@{
var grid3Id = "GridCondChk";

var gridRowChk3 = Html.Awe().CheckBox(new CheckBoxOpt
{
Name = "Id",
Prefix = grid3Id + ".(Id)",
InputAttr = new { data_val = ".(Id)" },
SyncScript = true
}).ToString();
}
<script>
var frmt = @Html.Raw(DemoUtils.Encode(gridRowChk3));
function condChkFunc(model) {
if (model.Id % 2) return '';
var res = frmt.split('.(Id)').join(model.Id);
return res;
}
</script>

@(Html.Awe().Grid(grid3Id)
.Height(350)
.Url(Url.Action("GetItems", "LunchGrid"))
.Columns(
new Column { ClientFormatFunc = "condChkFunc", Width = 70 },
new Column { Bind = "Id", Width = 100 },
new Column { Bind = "Person" }))



Comments