Grid Client Data Loading

Grid Client Data Demo

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

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).


Tree Grid Client Data Demo

GridClientDataDemo/Index.cshtml
<h2>Tree Grid Client Data Demo</h2>
<div class="bar">
    @Html.Awe().TextBox("txtsearch2").Placeholder("search ...").CssClass("searchtxt")
</div>
@(Html.Awe().Grid("TreeGrid1")
            .DataFunc("treeGridData")
            .Parent("txtsearch2", "search", false)
            .Columns(
                new Column { Bind = "Name" },
                new Column { Bind = "Id", Width = 100 })
            .Groupable(false)
            .PageSize(3)
            .Height(400))
<script>
    var treeNodes = @Html.Raw(DemoUtils.Encode(ViewData["treeNodes"]));

    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').keyup(function() {
            $('#TreeGrid1').data('api').load();
        });
    });
</script>


Simpler grid, no search

GridClientDataDemo/Index.cshtml
@(Html.Awe().Grid("GridSimplerClientData")
      .DataFunc("getSimpleGridData")
      .Height(350)
      .Mod(o => o.Main())
      .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" }))
<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/Index.cshtml
@(Html.Awe().Grid("GridHybrid")
      .DataFunc("getHybrid")
      .Height(350)
      .Mod(o => o.Main())
      .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" }))
<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('@Url.Action("GetLunches", "Data")').then(function(items) {
            loadedItems = items;
            opt.items = loadedItems;
            return aweUtils.gridModelBuilder(opt);
        });
    }
</script>


Header and Footer Summary

GridClientDataDemo/Index.cshtml
@(Html.Awe().Grid("GridClientDataSum")
      .DataFunc("getGridDataSum")
      .Height(350)
      .Mod(o => o.Main())
    .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" }))
<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