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")
.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()
},
new Column { Bind = "Person" },
new Column { Bind = "Food" },
new Column { Bind = "Location" })
.PageSize(7)
.Url(Url.Action("GetItems", "LunchGrid")))

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

<script>
$(function () {
gridPersistentCheckboxes("GridChkPersistent", "Id");

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

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

// get all selection (including checkboxes on other pages)
$('#btnGetAllSelection').click(function () {
var checks = $('#GridChkPersistent').data('checks');
var keys = [];
for (var k in checks) {
keys.push(k);
}

$('#log').html(JSON.stringify(keys));
});
});

function gridPersistentCheckboxes(gridId, chkName) {
var sel = '[name=' + chkName + ']';
var allSel = '[name=ChkAll]';
$(document).on('aweload', '#' + gridId, function () {
var $grid = $(this);
var checks = $grid.data('checks');
var allChecked = false;
if (checks) {
allChecked = true;
$grid.find('.awe-row').each(function () {
if (checks[$(this).data('k')]) {
$(this).find(sel).val(true).data('api').render();
} else {
allChecked = false;
}
});
} else {
$grid.data('checks', {});
}

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

// check/uncheck all
$(document).on('change', '#' + gridId + ' ' + allSel, function () {
var val = $(this).val();
var isChecked = val == 'true';
var $grid = $(this).closest('.awe-grid');
var checks = $grid.data('checks');

$grid.find('.awe-row').each(function () {
var $row = $(this);
$row.find(sel).val(val).data('api').render();
if (isChecked) checks[$row.data('k')] = 1;
else delete checks[$row.data('k')];
});

$grid.data('checks', checks);
});

$(document).on('change', '#' + gridId + ' ' + sel, function () {
var $this = $(this);
var $grid = $this.closest('.awe-grid');
var checks = $grid.data('checks');
var isChecked = $this.val() == 'true';
var key = $this.closest('.awe-row').data('k');
if (isChecked) checks[key] = 1;
else delete checks[key];
$grid.data('checks', checks);
});
}

</script>

Grid with checkboxes, simple checkbox


GridCheckboxesDemo/Index.cshtml
@(Html.Awe().Grid("GridChksc")
.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('GridChksc');

//get selection
$('#btnGetSelection1sc').click(function () {
var arr = $('#GridChksc [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(
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