ASP.net Core MVC Awesome Controls overview:

 
  •  
 
 
Yes
No

Grid with filter row

  you can search multiple columns at the same time (try 'pizza la')

In this demo you can filter the grid using the textbox outside the grid, and using the Filter row.
Using the textbox you can search by multiple columns by typing multiple words separated by space.
The filter row generates a dropdown for each column that it receives data from the data source (DataFunc or Url), and we can also specify a custom editor for the filter column.
We also take into account the order in which the user has selected the filters, so the filter dropdowns/multiselect will also get filtered based on the previous selected filter.
The filtering code is under your control so for example on the meals column we query the data and select the rows that contain all the selected meals, but you could change it to select the ones that contain any of the selected meals.
GridDemo/GridFilterClientData.cshtml
<div class="bar">
@Html.Awe().TextBox("txtGridFrowSrc").Placeholder("search ...").CssClass("searchtxt")
<span class="hint">&nbsp; you can search multiple columns at the same time (try 'pizza la')</span>
</div>
@(Html.Awe().Grid("GridFrow")
.Height(390)
.Reorderable()
.Resizable()
.Parent("txtGridFrowSrc", "search", false)
.DataFunc("loadLunchesGrid")
.Mod(o => o.Main().ColumnsAutohide().FilterRow(keyupsel: ".awe-txt")) // Person textbox has .awe-txt css class
.Columns(
new Column {Bind = "Id", Width = 100 }.Mod(o => o.Filter("search:")),

new Column {Bind = "Person"}
.Mod(o => o.Filter(Html.Awe().TextBox("Person").Placeholder("Person").ClearButton())),

new Column { Bind = "Food", ClientFormatFunc = "site.imgFood", MinWidth = 200 }
.Mod(o => o.Filter(
Html.Awe().AjaxRadioList("Food")
.DataFunc("foodGetData")
.Odropdown(d => d.ItemFunc("site.imgFoodItem")
.CaptionFunc("site.imgFoodCaption")
.ClearBtn()))),

new Column { Bind = "Date", ClientFormat = ".(DateStr)", Width = 170 },
new Column { Bind = "CountryName", Header = "Country" },

new Column { ClientFormat = ".(MealsStr)", MinWidth = 200, Header = "Meals", Grow = 1.7 }

// define valProp, by default Column.Bind is used (which we don't have for this column)
.Mod(o => o.Filter(valProp: "Meals", type: FilterType.Multiselect)),

new Column { Bind = "ChefName", Header = "Chef"}))
<script>
function loadLunchesGrid(sgp) {
// cache storage used by this demo (cstorg.js), it will load data on first call,
// for no cache you can replace cstorg.get with $.get
return $.when(cstorg.get('@Url.Action("GetLunches", "Data")')).then(function(lunches) {
return getGridData(sgp, lunches);
});
}

function getGridData(sgp, lunches) {
var where = awef.where, select = awef.select, contains = awef.scont, loop = awef.loop;
var distLstFunc = utils.distLstFunc;
var gp = utils.getGridParams(sgp, ['meals']); // meals is array
var data = lunches;

// outside textbox search
if (gp.search) {
var words = gp.search.toLowerCase().split(" ");

data = where(lunches, function (o) {
var matches = 0;
loop(words, function (w) {
if (contains(o.Food, w) || contains(o.Person, w) || contains(o.MealsStr, w) || contains(o.CountryName, w)
|| contains(o.DateStr, w) || contains(o.ChefName, w)) matches++;
});

return matches === words.length;
});
}

// data used to populate some of the filter row dropdowns
var frowData = {};

// filter rules, will be applied in order ( gp.forder ),
// because we want to get the data for the dropdowns in order of filter application
var filterRules = {
Person: function() {
if (gp.person) {
data = where(data, function (o) { return contains(o.Person, gp.person) });
}
},
Food: function() {
var items = utils.distItmsFunc('Food')(data);

frowData.Food = [{k: '', c: 'any', url: 'pasta.png'}].concat(select(items, function(o) { return { k: o.Food, c: o.Food, url: o.FoodPic } }));

if (gp.food) {
data = where(data, function (o) { return o.Food === gp.food });
}
},
Meals: function() {
if (gp.meals) {
data = where(data, function(o) {
// check that each of gp.meals is present in o.Meals

var mids = select(o.Meals, function(m) { return m.Id; });

var hasAll = true;
loop(gp.meals, function(mid) {
hasAll = hasAll && awef.vcont(mid, mids);
});

return hasAll;
});
}

// get data after querying this time, to filter the meals dropmenu as well
var distMeals = [];
var udict = {};
loop(data, function(o) {
loop(o.Meals, function(m) {
if (!udict[m.Id]) {
distMeals.push(m);
udict[m.Id] = 1;
}
});
});

frowData.Meals = select(distMeals, function(m) { return { k: m.Id, c: m.Name }; });
},
CountryName: function() {
frowData.CountryName = toKeyContent(distLstFunc('CountryName')(data), 'any');
if (gp.countryName) {
data = where(data, function(o) { return o.CountryName === gp.countryName });
}
},
ChefName: function(){
frowData.ChefName = toKeyContent(distLstFunc('ChefName')(data).sort(), 'any');
if (gp.chefName) {
data = where(data, function (o) { return o.ChefName === gp.chefName });
}
},
Date: function() {
frowData.Date = toKeyContent(distLstFunc('Year')(data).sort(), 'all years');
if (gp.date) {
data = where(data, function (o) { return o.Year.toString() === gp.date });
}
}
};

// apply rules in order
utils.applyFilters({
rules: filterRules,
gp: gp
});

function toKeyContent(arr, emptyn) {
var res = [];

if (emptyn) res.push({ k: '', c: emptyn });

awef.loop(arr, function (item) {
res.push({ k: item, c: item });
});

return res;
}

var model = utils.gridModelBuilder(
{
key: "Id",
gp: gp,
items: data,

// replace default group header value for Date column
getHeaderVal: { Date: function (o) { return o.DateStr; } },
tag: { frow: frowData }
});

return model;
}

$(function() {
$('#txtGridFrowSrc').keyup(function() {
$('#GridFrow').data('api').load();
});
});

function foodGetData() {
var tag = this.f.closest('.awe-grid').data('o').lrs.tg;
return tag.frow['Food'];
}
</script>
Awesome/DataController.cs
public IActionResult GetLunches()
{
return Json(Db.Lunches.Take(200).Select(o => new
{
o.Id,
o.Person,
o.Food,
o.FoodPic,
o.Location,
o.Price,
CountryName = o.Country.Name,
ChefName = o.Chef.FirstName + " " + o.Chef.LastName,
o.Date,
o.Date.Year,
DateStr = o.Date.ToShortDateString(),
Meals = o.Meals.Select(m => new { m.Id, m.Name }),
MealsStr = string.Join(", ", o.Meals.Select(m => m.Name))
}));
}
Home/Index.cshtml

<button type="button" class="awe-btn awe-btnp" onclick="awem.notif('Hi,</br> how are you ! ', 5000)">Show Notification</button>
<button type="button" class="awe-btn redbtn" onclick="awem.notif('<h5>Oops !</h5> error example ', 0, 'o-err')">Show Error</button>
<button type="button" class="awe-btn" onclick="awe.flash($(this).parent())">Flash</button>
<button type="button" class="awe-btn" onclick="awe.flash(awem.notif('Hi,</br> how are you ! ', 5000))">Flash Notify</button>


See also:
Drag And Drop Demo (grid move rows)
Grid Client Data Demo
Grid In Nest Editing Demo
Grid Inline Editing Demo
Master Detail Crud Demo
Wizard Demo



Comments