Client-side API

 

 

Id Last Name First Name Status
370AdamsPatrickInactive
493AdamsKarenActive
570AdamsNancyInactive
599AdamsEricInactive
635AdamsChristineInactive
663AdamsBonnieInactive
778AdamsRonaldInactive
820AdamsSeanInactive
897AdamsJudithActive
857AlexanderMichaelActive
Showing 1 to 10 of 1000 entries

Code

Javascript in View
<script type="text/javascript">
	$(function () {
		$('#sortButton').click(function () {
			MVCGrid.setSort('Filtering', 'FirstName', 'asc')
		});
		$('#pageButton').click(function () {
			MVCGrid.setPage('Filtering', 3)
		});
		$('#filterButton').click(function () {
            MVCGrid.setFilters('Filtering', { LastName: 'Smith' })
		});
        $('#pageSizeButton').click(function () {
            MVCGrid.setPageSize('Filtering', 50);
        });

        $('#sortButtonGet').click(function () {
            alert(MVCGrid.getSortColumn('Filtering'));
        });
        $('#pageButtonGet').click(function () {
            alert(MVCGrid.getPage('Filtering'));
        });
        $('#filterButtonGet').click(function () {
            alert(MVCGrid.getFilters('Filtering').LastName);
        });
        $('#pageSizeButtonGet').click(function () {
            alert(MVCGrid.getPageSize('Filtering'));
        });
	});
</script>
        
Inside MVCGridConfig.cs
MVCGridDefinitionTable.Add("Filtering", new MVCGridBuilder<Person>(colDefauls)
    .WithAuthorizationType(AuthorizationType.AllowAnonymous)
    .AddColumns(cols =>
    {
        cols.Add("Id").WithSorting(false)
            .WithValueExpression(p => p.Id.ToString());
        cols.Add("LastName").WithHeaderText("Last Name")
            .WithValueExpression(p => p.LastName)
            .WithFiltering(true);
        cols.Add("FirstName").WithHeaderText("First Name")
            .WithValueExpression(p => p.FirstName)
            .WithFiltering(true);
        cols.Add("Status").WithSortColumnData("Active")
            .WithHeaderText("Status")
            .WithValueExpression(p => p.Active ? "Active" : "Inactive")
            .WithFiltering(true);
    })
    .WithSorting(true, "LastName")
    .WithPaging(true, 10, true, 100)
    .WithFiltering(true)
    .WithRetrieveDataMethod((context) =>
    {
        var options = context.QueryOptions;
        int totalRecords;
        var repo = DependencyResolver.Current.GetService<IPersonRepository>();
        bool? active = null;
        string fa = options.GetFilterString("Status");
        if (!String.IsNullOrWhiteSpace(fa))
        {
            active = (String.Compare(fa, "active", true) == 0);
        }
        string sortColumn = options.GetSortColumnData<string>();
        var items = repo.GetData(out totalRecords,
            options.GetFilterString("FirstName"),
            options.GetFilterString("LastName"),
            active,
            options.GetLimitOffset(), options.GetLimitRowcount(),
            sortColumn, options.SortDirection == SortDirection.Dsc);
        return new QueryResult<Person>()
        {
            Items = items,
            TotalRecords = totalRecords
        };
    })
);
View
@Html.MVCGrid("Filtering")

More Examples

$(function () {
    $('#selPageSize').change(function () {
        MVCGrid.setPageSize('GlobalSearchGrid', $('#selPageSize').val());
    });
    $('#txtGlobalSearch').keyup(function () {
        MVCGrid.setAdditionalQueryOptions('GlobalSearchGrid', { globalsearch: $('#txtGlobalSearch').val() });
    });
    $('#selPageSize').val(MVCGrid.getPageSize('GlobalSearchGrid'));
    $('#txtGlobalSearch').val(MVCGrid.getAdditionalQueryOptions('GlobalSearchGrid').GlobalSearch);
});
$(function () {
    $('#btnFilter').click(function(){
        MVCGrid.setFilters('Filtering',
            {
                FirstName: $('#FirstName').val(),
                LastName: $('#LastName').val(),
                Status: $('#Status').val()
            })
    });
    $('#FirstName').val(MVCGrid.getFilters('Filtering').FirstName);
    $('#LastName').val(MVCGrid.getFilters('Filtering').LastName);
    $('#Status').val(MVCGrid.getFilters('Filtering').Status);
});