Grid with checkboxes


GridCheckboxesDemo/Index.cshtml
@(Html.Awe().Grid("GridChk")
.PageSize(7)
.Columns(
new Column
{
Width = 40,
ClientFormat = Html.Awe().CheckBox("Id")
.Ochk()
.Prefix("c.(Id)")
.HtmlAttributes(null, new { data_val = ".(Id)" })
.ToString(),
Header = Html.Awe().CheckBox("ChkAll").Ochk().SyncScript().ToString()
},
new Column { Bind = "Person" },
new Column { Bind = "Food" },
new Column { Bind = "Location" })
.Url(Url.Action("GetItems", "LunchGrid")))
<br />
<button class="awe-btn" id='btnGetSelection1'>get selection</button>
<span id="log1"></span>
<script>
$(function () {
gridCheckboxes('GridChk');

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

$('#log1').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();
});
}
</script>

Grid with checkboxes that persist state when paging


GridCheckboxesDemo/Index.cshtml
@(Html.Awe().Grid("GridChkPersistent")
.Mod(o => o.Main())
.Height(350)
.Columns(
new Column
{
Width = 40,
ClientFormat = Html.Awe().CheckBox("Id")
.Ochk()
.Prefix("cpers.(Id)")
.SyncScript()
.HtmlAttributes(null, new { data_val = ".(Id)" })
.ToString(),
Header = Html.Awe().CheckBox("ChkAll").Ochk().Prefix("pers").SyncScript().ToString()
}.Mod(o => o.Nohide()),
new Column { Bind = "Person" }.Mod(o => o.Nohide()),
new Column { Bind = "Food" },
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("GridChkPersistent", "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")
.PageSize(5)
.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" },
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 })
.Persistence(Persistence.View)
.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>



Comments