Awesome ASP.net Web-Forms Controls

Grid Client Data Demo

Instead of setting .Url(url) to get data, the .DataFunc(jsfunc) extension is used. The js func can return the grid model or a promise, for example the function could do an ajax request and return the jqXHR object returned by $.get, so when the ajax request is complete the ajax success function can return the grid model (used in the Hybrid demo below).
  you can search multiple columns at the same time (try 'jer tav')
GridClientDataDemo.aspx
<div class="bar">
<% Txtsearch.TextBox().Placeholder("search ...").CssClass("searchtxt"); %>
<awe:Ocon runat="server" ID="Txtsearch" />
<span class="hint">&nbsp; you can search multiple columns at the same time (try 'jer tav')</span>
</div>

<% GridClientData.Grid()
.DataFunc("getGridData")
.Height(350)
.Mod(o => o.PageInfo().PageSize().ColumnsSelector())
.Persistence(Persistence.View)
.Resizable()
.Reorderable()
.Parent(Txtsearch.ClientID, "search", false)
.Columns(
new Column { Bind = "Id", Width = 75, Groupable = false, Resizable = false },
new Column { Bind = "Person" },
new Column { Bind = "Food" },
new Column { Bind = "Location" },
new Column { Bind = "Date", Width = 120 },
new Column { Bind = "CountryName", Header = "Country" },
new Column { Bind = "ChefName", Header = "Chef" }); %>
<awe:Ocon runat="server" ID="GridClientData" />
<script>
// client data source
var lunches = <%=DemoUtils.Encode(Db.Lunches.Take(300).Select(o => new
{
o.Id,
o.Person,
o.Food,
o.Location,
o.Price,
CountryName = o.Country.Name,
ChefName = o.Chef.FirstName + " " + o.Chef.LastName,
o.Date,
DateStr = o.Date.ToShortDateString()
})) %>;

function getGridData(sgp) {
var gp = utils.getGridParams(sgp);
var words = gp.search.split(" ");
var regs = $.map(words, function(w) { return new RegExp(w, "i"); });
var regslen = regs.length;

// filter func, will be passed to gridModelBuilder
function filter(list) {
var res = $.grep(list, function(o) {
var matches = 0;
$.each(regs, function(_, reg) {
if(reg.test(o.Food) || reg.test(o.Person) || reg.test(o.Location) || reg.test(o.CountryName)
|| reg.test(o.ChefName)) matches++;
});

return regslen == matches;
});

return res;
}

function map(o) { return { Id: o.Id, Person: o.Person, Food: o.Food, Location: o.Location,
Date: o.DateStr, CountryName: o.CountryName, ChefName: o.ChefName }; };


return utils.gridModelBuilder(
{
key:"Id",
gp: gp,
items: filter(lunches),
map:map,
// replace default group header value for Date
getHeaderVal:{ Date: function(o){ return o.DateStr; } }
});
}

$(function() {
$('#<%=Txtsearch.ClientID %>').keyup(function() {
$('#<%=GridClientData.ClientID %>').data('api').load();
});
});
</script>


Tree Grid Client Data Demo

GridClientDataDemo.aspx
<h2>Tree Grid Client Data Demo</h2>
<div class="bar">
<% Txtsearch2.TextBox().Placeholder("search ...").CssClass("searchtxt"); %>
<awe:Ocon runat="server" ID="Txtsearch2" />
</div>
<% TreeGrid1.Grid()
.DataFunc("treeGridData")
.Parent("Txtsearch2", "search", false)
.Columns(
new Column { Bind = "Name" },
new Column { Bind = "Id", Width = 100 })
.Persistence(Persistence.View)
.Groupable(false)
.PageSize(3)
.Height(400); %>
<awe:Ocon runat="server" ID="TreeGrid1" />
<script>
var treeNodes = <%=DemoUtils.Encode(Db.TreeNodes.Select(o => new { o.Id, o.Name, ParentId = o.Parent != null ? o.Parent.Id : 0 })) %>;

function treeGridData(sgp) {
var gp = utils.getGridParams(sgp);

var words = gp.search.split(" ");

var regs = $.map(words, function(w) {
return new RegExp(w, "i");
});

var regsl = regs.length;

var result = $.grep(treeNodes, function(o) {
var matches = 0;
$.each(regs, function(_, reg) {
reg.test(o.Name) && matches ++;
});

return regsl == matches;
});

var searchResult = result.slice(0);

awef.loop(searchResult, function (o) {
addParentsTo(result, o, treeNodes);
});

var rootNodes = $.grep(result, function (o) { return !o.ParentId; });

var getChildren = function (node, nodeLevel) {
return $.grep(result, function (o) { return o.ParentId == node.Id; });
};

return utils.gridModelBuilder(
{
gp: gp,
items: rootNodes,
key: "Id",
getChildren: getChildren
});
}

function addParentsTo(result, node, all) {
if (node.ParentId) {
var isFound;
awef.loop(result, function (o) {
if (o.Id == node.ParentId) {
isFound = true;
return false;
}
});

if (!isFound) {
var parent = $.grep(all, function(o) { return o.Id == node.ParentId; })[0];
result.push(parent);
addParentsTo(result, parent, all);
}
}
}

$(function() {
$('#<%=Txtsearch2.ClientID %>').keyup(function() {
$('#<%=TreeGrid1.ClientID %>').data('api').load();
});
});
</script>


Simpler grid, no search

GridClientDataDemo.aspx
<% GridSimplerClientData.Grid()
.DataFunc("getSimpleGridData")
.Height(350)
.Mod(o => o.PageInfo().PageSize().ColumnsSelector())
.Persistence(Persistence.View)
.Columns(
new Column { Bind = "Id", Width = 75, Groupable = false, Resizable = false },
new Column { Bind = "Person" },
new Column { Bind = "Food" },
new Column { Bind = "Location" },
new Column { Bind = "Date", Width = 120 },
new Column { Bind = "CountryName", Header = "Country" },
new Column { Bind = "ChefName", Header = "Chef" }); %>
<awe:Ocon runat="server" ID="GridSimplerClientData" />
<script>
function getSimpleGridData(sgp) {
var gp = utils.getGridParams(sgp);

function map(o) { return { Id: o.Id, Person: o.Person, Food: o.Food, Location: o.Location,
Date: o.DateStr, CountryName: o.CountryName, ChefName: o.ChefName }; };

return utils.gridModelBuilder(
{
gp: gp,
items: lunches,
key:"Id",
map:map,

// replace default group header value for date
getHeaderVal:{ Date: function(o){ return o.DateStr; } }
});
}
</script>

Hybrid

Using ajax in the client func on the first call only to load the items

GridClientDataDemo.aspx
<% GridHybrid.Grid()
.DataFunc("getHybrid")
.Height(350)
.Mod(o => o.PageInfo().PageSize().ColumnsSelector())
.Persistence(Persistence.View)
.Resizable()
.Columns(
new Column { Bind = "Id", Width = 75, Groupable = false, Resizable = false },
new Column { Bind = "Person" },
new Column { Bind = "Food" },
new Column { Bind = "Location" },
new Column { Bind = "Date", Width = 120 },
new Column { Bind = "CountryName", Header = "Country" },
new Column { Bind = "ChefName", Header = "Chef" }); %>
<awe:Ocon runat="server" ID="GridHybrid" />
<script>
var loadedItems;
function getHybrid(sgp) {
var gp = utils.getGridParams(sgp);
function maph(o) { return { Id: o.Id, Person: o.Person, Food: o.Food, Location: o.Location,
Date: o.DateStr, CountryName: o.CountryName, ChefName: o.ChefName }; };

var opt = {
gp: gp,
key: "Id",
map: maph,

// replace default group header value for date
getHeaderVal:{ Date: function(o){ return o.DateStr; } }
};

if (loadedItems) {
opt.items = loadedItems;
return utils.gridModelBuilder(opt);
}

return $.get('<%=Page.Url().Action("GetLunches", "Data") %>').then(function(items) {
loadedItems = items;
opt.items = loadedItems;
return utils.gridModelBuilder(opt);
});
}
</script>


Header and Footer Summary

GridClientDataDemo.aspx
<% GridClientDataSum.Grid()
.DataFunc("getGridDataSum")
.Height(350)
.Mod(o => o.PageInfo().PageSize().ColumnsSelector())
.Persistence(Persistence.View)
.Columns(
new Column { Bind = "Id", Width = 75, Groupable = false, Resizable = false },
new Column { Bind = "Person", Group = true },
new Column { Bind = "Food" },
new Column { Bind = "Location" },
new Column { Bind = "Price", Width = 120 },
new Column { Bind = "CountryName", Header = "Country" },
new Column { Bind = "ChefName", Header = "Chef" }); %>
<awe:Ocon runat="server" ID="GridClientDataSum" />
<script>
function getGridDataSum(sgp) {
var gp = utils.getGridParams(sgp);

function makeFooter(info) {
var total = !info.Level ? "Total: " : "";
var priceSum = 0;
awef.loop(info.Items, function(el) { priceSum += el.Price; });

return {
Person: total,
Food: " count = " + info.Items.length,
Price: priceSum
};
}

function makeHeader(gr) {
var name = utils.getColVal(gr.Column, gr.Items[0]);
return { Content: name + ' Count = ' + gr.Items.length };
}

return utils.gridModelBuilder(
{
gp: gp,
items: lunches,
key: "Id",
makeFooter: makeFooter,
makeHeader: makeHeader
});
}
</script>



Comments