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

Grid with checkboxes 

Drag a column header and drop it here to group by that column
Person
Food
Location
MaryShepherd's pieDiner
JeremyPizzaTavern
JohnCheesecakeRestaurant
MichaelHot BeverageVisit
GabrielleFrench toastTavern
LucyBig SaladTavern
CheyenneBig SaladVisit
JonahShepherd's pieVisit
FernandoSoupUniversity
AudreyShepherd's pieUniversity

show code
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()).trigger('change');
}).on('aweload', function () {
$('#ChkAll').val('').trigger('change');
});
}
</script>

Grid with checkboxes that persist state when paging 

Drag a column header and drop it here to group by that column
Person
Food
Location
MaryShepherd's pieDiner
JeremyPizzaTavern
JohnCheesecakeRestaurant
MichaelHot BeverageVisit
GabrielleFrench toastTavern
LucyBig SaladTavern
CheyenneBig SaladVisit
JonahShepherd's pieVisit
FernandoSoupUniversity
AudreyShepherd's pieUniversity

show code
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 

Drag a column header and drop it here to group by that column
Person
Food
Location
MaryShepherd's pieDiner
JeremyPizzaTavern
JohnCheesecakeRestaurant
MichaelHot BeverageVisit
GabrielleFrench toastTavern
LucyBig SaladTavern
CheyenneBig SaladVisit
JonahShepherd's pieVisit
FernandoSoupUniversity
AudreyShepherd's pieUniversity

show code
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 

Name
Id
main node 39393939
Barley 3939 -> 39633963
node 3939 -> 39433943
Cauliflower 3943 -> 39613961
node 3943 -> 39553955
Hazelnuts 3955 -> 39593959
Tomato 3955 -> 39573957
node 3943 -> 39453945
node 3945 -> 39493949
node 3949 -> 39513951
Banana 3951 -> 39533953
Mongongo 3945 -> 39473947
Papaya 3939 -> 39413941
main node 39293929
Broccoli 3929 -> 39373937
node 3929 -> 39313931
node 3931 -> 39333933
Chestnuts 3933 -> 39353935
main node 39133913
node 3913 -> 39173917
Carrot 3917 -> 39273927
node 3917 -> 39193919
Onion 3919 -> 39253925
node 3919 -> 39213921
Wheat 3921 -> 39233923
Cherry 3913 -> 39153915

show code
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 

Drag a column header and drop it here to group by that column
 
Id
Person
 
3675Mary
 
3671Jeremy
 
3667John
 
3663Michael
 
3659Gabrielle
 
3655Lucy
 
3651Cheyenne
 
3647Jonah
 
3643Fernando
 
3639Audrey
show code
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