Grid with client side data source - ASP.net Web-Forms Awesome Controls Demo

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 = "FoodName", Header = "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,
                 FoodName = o.Food.Name,
                 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 = aweUtils.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.FoodName) || 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, FoodName: o.FoodName, Location: o.Location,
            Date: o.DateStr, CountryName: o.CountryName, ChefName: o.ChefName }; };


        return aweUtils.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 = aweUtils.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 aweUtils.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 = "FoodName", Header = "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 = aweUtils.getGridParams(sgp);

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

        return aweUtils.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 = "FoodName", Header = "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 = aweUtils.getGridParams(sgp);
        function maph(o) { return { Id: o.Id, Person: o.Person, FoodName: o.FoodName, 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 aweUtils.gridModelBuilder(opt);
        }

        return $.get('<%=Page.Url().Action("GetLunches", "Data") %>').then(function(items) {
            loadedItems = items;
            opt.items = loadedItems;
            return aweUtils.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 = "FoodName", Header = "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 = aweUtils.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 = aweUtils.getColVal(gr.Column, gr.Items[0]);
            return { Content: name + ' Count = ' + gr.Items.length };
        }

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

Comments