Awesome ASP.net Core and MVC Controls

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

We use cookies to improve your online experience. By accessing this site, you agree to the use of cookies and other technologies to process your personal data (e.g. IP address) to enhance and personalise your experience across our websites. Additionally, third-party companies, may store cookies on your device and use similar technologies to collect and use certain information. For more information, refer to our privacy policy and cookie policy.