Awesome ASP.net Core and MVC Controls

Grid show and hide columns using api

There's also a grid mod that will add a columns selector to the grid, you can see it on the home page


Using columns persistence type session, try hiding some columns and refresh the page (or go to another page and return).
GridShowHideColumnsApiDemo/Index.cshtml
<div class="bar">
@(Html.Awe().AjaxCheckboxList("colSel")
.DataFunc("getColumns")
.Mod("awem.multiselb")
.Tag(new { InLabel = "columns", NoSelClose = true })
.Load(false))
</div>
@(Html.Awe().Grid("HideApiGrid")
.Url(Url.Action("GetItems", "LunchGrid"))
.Columns(
new Column { Bind = "Id", Width = 55, Groupable = false },
new Column { Bind = "Person" },
new Column { Bind = "Food" },
new Column { Bind = "Location" },
new Column { Bind = "Date", Width = 110 },
new Column { Bind = "Country.Name", ClientFormat = ".CountryName", Header = "Country" },
new Column { Bind = "Chef.FirstName,Chef.LastName", ClientFormat = ".ChefName", Header = "Chef" })
.Height(300)
.PageSize(10))
<br />

Using columns persistence type session, try hiding some columns and refresh the page (or go to another page and return).
<script>
function getColumns() {
var result = [];
$.each($('#HideApiGrid').data('o').columns, function (i, col) {
result.push({ k: i, c: col.H });
});
return result;
}

$(function () {
var $grid = $('#HideApiGrid');
var $colSel = $('#colSel');

$grid.on('aweload', function () {
$colSel.data('api').load();

var values = [];
$.each($grid.data('o').columns, function (i, col) {
if (!col.Hid) values.push(i);
});

$colSel.val(JSON.stringify(values)).data('api').render();
});

$colSel.on('change', function () {
var reload;

var colIndxs = $.parseJSON($(this).val() || "[]");
$.each($grid.data('o').columns, function (i, col) {
if ($.inArray(i.toString(), colIndxs) == -1) {
col.Hid = 1; // hide column
if (col.Gd) {
// remove grouped when hiding column
col.Gd = 0;
reload = 1;
}
} else {
col.Hid = 0;
}
});

var api = $grid.data('api');
if (reload)
api.load();
else {
api.persist();
api.render();
}
});
});
</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.