Fields, Sorting, Paging

[tomkurian01]

I have used the sample on the homepage (http://mvcgrid.net/) _MVCGridToolBar partial. A few features are working like the pull-down menu that allows you to pick the number of items per page and also global search is working.

However, the Sorting is not displaying, the Paging is not clickable and the pull-down for the fields that you can make visible and invisible the column will not allow me to click the check-box (greyed-out).

Here's the razor code:

                @Html.Partial("_MVCGridToolbar", new Vermilion.Web.Areas.Candidate.Models.MVCGridToolbarModel(){
                       MVCGridName = "CandidateGrid",
                       PageSize = true,
                       ColumnVisibility = true,
                       Export = true,
                       GlobalSearch = true
                })
               @Html.MVCGrid("CandidateGrid")

And also my method:

            MVCGridDefinitionTable.Add("CandidateGrid", new MVCGridBuilder<CombinedProfile>()
                .WithAuthorizationType(AuthorizationType.AllowAnonymous)
                .AddColumns(cols =>
                {
                    cols.Add("Edit").WithHtmlEncoding(false)
                        .WithSorting(false)
                        .WithHeaderText("Edit")
                        .WithValueExpression((p, c) => c.UrlHelper.Action("Edit", "Search", new { area="Candidate" , candidateid = p.Id }))
                        .WithValueTemplate("<a href='{Value}' class='btn btn-primary' role='button'>Edit</a>");
                    cols.Add().WithColumnName("Email")
                        .WithHeaderText("Email")
                        .WithValueExpression(i => i.Email); // use the Value Expression to return the cell text for this column
                    cols.Add().WithColumnName("FirstName")
                        .WithHeaderText("FirstName")
                        .WithValueExpression(i => i.FirstName); // use the Value Expression to return the cell text for this column
                    cols.Add().WithColumnName("LastName")
                        .WithHeaderText("LastName")
                        .WithValueExpression(i => i.LastName); // use the Value Expression to return the cell text for this column
                    cols.Add().WithColumnName("City")
                        .WithHeaderText("City")
                        .WithValueExpression(i => i.City); // use the Value Expression to return the cell text for this column
                    cols.Add().WithColumnName("State")
                        .WithHeaderText("State")
                        .WithValueExpression(i => i.State); // use the Value Expression to return the cell text for this column
                })
                    .WithAdditionalQueryOptionNames("Search")
                    .WithSorting(true, "LastName")
                    .WithPaging(true, 10, true, 100)
                .WithRetrieveDataMethod((context) =>
                {
                    //Query your data here. Obey Ordering, paging and filtering parameters given in the context.QueryOptions.
                    //Use Entity Framework, a module from your IoC Container, or any other method.
                    // Return QueryResult object containing IEnumerable < YouModelItem >
                    var options = context.QueryOptions;
                    string globalSearch = options.GetAdditionalQueryOptionString("Search");
                    var repo = new CandidateRepository();
                    int totalrecords;
                    var results = repo.GetData(out totalrecords,
                        globalSearch: globalSearch,
                        limitOffset: options.GetLimitOffset(),
                        limitRowCount: options.GetLimitRowcount(),
                        orderBy: options.SortColumnName,
                        desc: options.SortDirection == SortDirection.Dsc);

                    return new QueryResult<CombinedProfile>()
                    {
                        Items = results,
                        TotalRecords = totalrecords // if paging is enabled, return the total number of records of all pages
                    };

And Finally my data retrieval method:

    public IEnumerable<CombinedProfile> GetData(out int totalrecords, string globalSearch, string orderBy, bool desc, int? limitOffset, int? limitRowCount)
    {
        var query = _ctx.Profiles.AsQueryable();

        if (!String.IsNullOrWhiteSpace(globalSearch))
        {
           query = query.Where(p => (p.FirstName + " " + p.LastName + " " + p.City + " " + p.State + " " + p.Email).Contains(globalSearch));
        }

        query = query.OrderBy(p => p.LastName);

        if (!String.IsNullOrWhiteSpace(orderBy))
        {

            switch (orderBy.ToLower())
            {
                case "firstname":
                    if (!desc)
                        query = query.OrderBy(p => p.FirstName);
                    else
                        query = query.OrderByDescending(p => p.FirstName);
                    break;

                case "lastname":
                    if (!desc)
                        query = query.OrderBy(p => p.LastName);
                    else
                        query = query.OrderByDescending(p => p.LastName);
                    break;

            }
        }

        if (limitOffset.HasValue)
        {
                query = query.Skip(limitOffset.Value).Take(limitRowCount.Value);
        }

        totalrecords = query.Count();
        return query.ToList();

    }

[codeweb]

Try to repeat

.WithFiltering(true)
.WithSorting(true);

on every column

[tomkurian01]

Thanks but that didn't work.

[joeharrison714]

Did you include the javascript? <script src="~/MVCGridHandler.axd/script.js"></script>

[tomkurian01]

Yes I have the script Here's my view:

@using MVCGrid.Web

<div class="row">
    <div class="col-lg-12">
        <div class="hpanel">
            <div class="panel-heading">
                <div class="panel-tools">
                    <a class="showhide"><i class="fa fa-chevron-up"></i></a>
                    <a class="closebox"><i class="fa fa-times"></i></a>
                </div>
                Candidates
            </div>
            <div class="panel-body">
                @Html.Partial("_MVCGridToolbar", new Company.Web.Areas.Candidate.Models.MVCGridToolbarModel(){
                       MVCGridName = "CandidateGrid",
                       PageSize = true,
                       ColumnVisibility = true,
                       Export = true,
                       GlobalSearch = true
                })
               @Html.MVCGrid("CandidateGrid")
            </div>
        </div>
    </div>
</div>

@section Scripts {
<script src="~/MVCGridHandler.axd/script.js"></script>
}

[joeharrison714]

are you getting any errors in the browser developer console?