Grid Choose columns demo

This demo shows how columns can be set/modified at the server side,
feature that is also used in the scheduler demo and array datasource demo.

using api

using checkboxlist

note: using persistence Session, try removing some columns, group by a column, and refresh, to mantain the same columns even after reopening browser change to Persistence.Local

Showing how the grid columns can be set/modified in the controller.
The grid has .SendColumns(true) which will send the columns state information on each request, on the first request g.Columns.Length is 0, this is where we set the default column definition. Columns are picked by sending additional parameters using oparams (one time parameters), and by modifying/setting the g.Columns (when g.Columns has Columns in it, the grid will use it instead of what it's specified in the markup). The gridModel.tg is populated with data to be used by the AjaxCheckboxList, on grid aweload event the api of the AjaxCheckboxList is called. Persistence will save the state of the grid ( page, collapsed groups, columns )
GridChooseColumnsDemo/Index.cshtml
<p>    
This demo shows how columns can be set/modified at the server side,<br/>
feature that is also used in the scheduler demo and array datasource demo.
</p>
@(Html.Awe().Grid("GridChooseColumns")
.Height(350)
.Url(Url.Action("GetItems"))
.Persistence(Persistence.Session)
.ShowGroupBar(true)
.SendColumns(true))

<h3>using api</h3>
<textarea id="vs" style="width: 100%;">
$('#GridChooseColumns').data('api').load({ oparams:{ selectedColumns:["Id","Person", "Location", "Date" ], choosingColumns:true } });
// all columns = "Id", "Person", "Food", "Location", "Date", "Price"
// Id and Person will be displayed regardless
</textarea>

<button type="button" class="awe-btn" id="btnExecute">Execute</button>

<script>
$(function () {
$('#btnExecute').click(function () {
eval($('#vs').val());
});
});
</script>

<h3>using checkboxlist</h3>
@Html.Awe().AjaxCheckboxList("chkColumns").Url(Url.Action("GetColumnsItems")).Load(false)
<button type="button" class="awe-btn" id="btnUpdateColumns">Update columns</button>
<script>
$(function () {
var g = $('#GridChooseColumns');
g.on('aweload', function (e) {
var res = g.data('o').lrs;
$('#chkColumns').val(JSON.stringify(res.tg.selectedColumns)).data('api').load({ params: res.tg });
});

$('#btnUpdateColumns').click(function () {
var val = $('#chkColumns').val();
if (!val) val = "[]";
$('#GridChooseColumns').data('api').load({ oparams: { selectedColumns: JSON.parse(val), choosingColumns: true } });
});
});
</script>
Demos/Grid/GridChooseColumnsDemoController.cs

public async Task<IActionResult> GetItems(GridParams g, string[] selectedColumns, bool? choosingColumns)
{
Check.NotNull(g, "g");
Check.NotNull(g.Columns, "g.Columns");

// when setting columns from here we don't get the grid defaults, so we have to specify Sortable, Groupable etc.
var columns = new[]
{
new Column { Bind = "Id", Width = 70, Order = 1 },
new Column { Bind = "Person", Sortable = true, Groupable = true, GroupRemovable = true, Order = 2 },
new Column { Bind = "Food.Name", Sortable = true, Groupable = true, GroupRemovable = true, Order = 3 },
new Column { Bind = "Location", Sortable = true, Groupable = true, GroupRemovable = true, Order = 4 },
new Column { Bind = "Date", Sortable = true, Groupable = true, GroupRemovable = true, Width = 120, Order = 5 },
new Column { Bind = "Price", Sortable = true, Groupable = true, GroupRemovable = true, Width = 100, Order = 6 }
};

var baseColumns = new[] { "Id", "Person" };

// first load
if (g.Columns.Length == 0)
{
g.Columns = columns;
}

if (choosingColumns.HasValue)
{
selectedColumns = selectedColumns ?? new string[] { };

// make sure we always have Id and Person columns
selectedColumns = selectedColumns.Union(baseColumns).ToArray();

var currectColumns = g.Columns.ToList();

// remove unselected columns
currectColumns = currectColumns.Where(o => selectedColumns.Contains(o.Bind)).ToList();

// add missing columns
var missingColumns = selectedColumns.Except(currectColumns.Select(o => o.Bind)).ToArray();

currectColumns.AddRange(columns.Where(o => missingColumns.Contains(o.Bind)));

g.Columns = currectColumns.ToArray();
}

var query = mcx.Lunches
.Include(o => o.Food);

var gmb = new GridModelBuilder<Lunch>(query, g)
{
Map = o => new
{
o.Id,
o.Person,
FoodName = o.Food.Name,
o.Location,
o.Price,
Date = o.Date.ToShortDateString()
},
// used to populate the checkboxlist
Tag = new
{
columns = columns.Select(o => o.Bind).Except(baseColumns).ToArray(),
selectedColumns = g.Columns.Select(o => o.Bind).Except(baseColumns).ToArray()
}
};

return Json(await gmb.EFBuildAsync());
}

public IActionResult GetColumnsItems(string[] columns)
{
columns = columns ?? new string[] { };

return Json(columns.Select(o => new KeyContent(o, o)));
}



Comments