Paging, Sorting not working !

[mgsofteng]

When I'm sorting or paging, I get this error in the Firefox console (developer -> inspector): "Grid not found: TestGrid"

My view looks like this:

@model IEnumerable @using MVCGrid.Web @using TripViewer.Models @{ ViewBag.Title = "Receipt Management"; }

@ViewBag.Title

@Html.Partial("_MVCGridToolbar", new MVCGridToolbarModel() { MVCGridName = "TestGrid", PageSize = true, ColumnVisibility = true, Export = false, GlobalSearch = true }) @Html.MVCGrid("TestGrid")

and RegisterGrids:

public static void RegisterGrids() { ColumnDefaults colDefauls = new ColumnDefaults() { EnableSorting = true };

        MVCGridDefinitionTable.Add("TestGrid", new MVCGridBuilder<Receipt>(colDefauls)
            .WithAuthorizationType(AuthorizationType.AllowAnonymous)
            .WithSorting(sorting: true, defaultSortColumn: "Id", defaultSortDirection: SortDirection.Dsc)
            .WithPaging(paging: true, itemsPerPage: 10, allowChangePageSize: true, maxItemsPerPage: 100)
            .WithAdditionalQueryOptionNames("search")
            .AddColumns(cols =>
            {
                cols.Add("Id").WithValueExpression((p, c) => c.UrlHelper.Action("detail", "demo", new { id = p.Id }))
                    .WithValueTemplate("<a href='{Value}'>{Model.Id}</a>", false)
                    .WithPlainTextValueExpression(p => p.Id.ToString());
                cols.Add("DeviceId").WithHeaderText("Device Id")
                    .WithVisibility(true, true)
                    .WithValueExpression(p => p.DeviceId.ToString());
                cols.Add("SerialNumber").WithHeaderText("Serial Number")
                    .WithVisibility(true, true)
                    .WithValueExpression(p => p.SerialNumber.ToString());
                cols.Add("StartTime").WithHeaderText("Start Time")
                    .WithVisibility(true, true)
                    .WithSorting(true)
                    .WithValueExpression(p => p.StartTime.ToString());
                cols.Add("EndTime").WithHeaderText("End Time")
                    .WithVisibility(true, true)
                    .WithSorting(true)
                    .WithValueExpression(p => p.EndTime.ToString());                    
            })            
            .WithRetrieveDataMethod((context) =>
            {
                var options = context.QueryOptions;
                var result = new QueryResult<Receipt>();
                using (var db = new ApplicationDbContext())
                {
                    var query = db.Receipts.AsQueryable();
                    result.TotalRecords = query.Count();
                    if (!String.IsNullOrWhiteSpace(options.SortColumnName))
                    {
                        switch (options.SortColumnName.ToLower())
                        {
                            case "id":
                                query = (options.SortDirection == SortDirection.Asc) ? query.OrderBy(p => p.Id): query.OrderByDescending(p => p.Id);
                                break;
                            case "serialnumber":
                                query = (options.SortDirection == SortDirection.Asc) ? query.OrderBy(p => p.SerialNumber) : query.OrderByDescending(p => p.SerialNumber);
                                break;
                        }
                    }
                    if (options.GetLimitOffset().HasValue)
                    {
                        query = query.Skip(options.GetLimitOffset().Value).Take(options.GetLimitRowcount().Value);
                    }
                    result.Items = query.ToList();
                }
                return result;    
            })
        );
    }

I have no idea what's causing it ?

[mgsofteng]

I actually figured it out by looking at your demo, script.js must be loaded before bootstrap bundle in the _Layout.cshtml file, thus the bottom portion should like:

@Scripts.Render("~/bundles/jquery")

@Scripts.Render("~/bundles/bootstrap") @RenderSection("scripts", required: false)