Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Custom paging with sorting, filtering and grouping in AJAX DataGrid

Custom Paging With Sorting, Filtering And Grouping In AJAX DataGrid

Tags | webgrid with custom Paging and Sorting in MVC 4, data listing custom paging sorting and searching

Data Listing Custom Paging Sorting and Searching

In this asp.net MVC tutorial, I will demonstrate Paging Sorting Searching In ASP.NET MVC 5. For information about the tutorial series, see the first tutorial in the series.

In the previous tutorial, we implemented client-side paging in MVC using jquery. In this asp.net MVC tutorial, you’ll add sorting, filtering, and paging functionality to the Employee Index page.

Webgrid with Custom Paging and Sorting in MVC 4

In that context, we’ll perform custom grid with each column filter, paging, and sorting. Here you will see how sorting works by clicking the headings. The headings are the links to show the sorted data.

In order to customize asp.net GridView, we need to first understand how it builds the control structure on the server side. On the client side, the GridView is rendered as a

within a
element.  So let’s start step by step, so it will be useful to understand from scratch. Find the source code below:-

Step 1: Create MVC application

  • “Start”, then “All Programs” and select “Microsoft Visual Studio 2015”.
  • “File”, then “New” and click “Project”, then select “ASP.NET Web Application Template” and provide the Project a name as you wish and click on OK.
  • Choose MVC empty application option and click OK

Step 2: Create Employee and City table

CREATE TABLE [dbo].[City](
	[CityID] [int] IDENTITY(1,1) NOT NULL,
	[CityName] [nvarchar](max) NULL,
 CONSTRAINT [PK_City] PRIMARY KEY CLUSTERED 
(
	[CityID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]

CREATE TABLE [dbo].[Employee](
	[Id] [int] IDENTITY(1,1) NOT NULL,
	[CityID] [int] NOT NULL,
	[Name] [nvarchar](max) NULL,
	[Email] [nvarchar](max) NULL,
	[Salary] [decimal](18, 2) NULL,
	[BirthDate] [datetime] NULL,
	[CreatedDate] [datetime] NULL,
	[IsActive] [bit] NULL,
 CONSTRAINT [PK_Employees] PRIMARY KEY CLUSTERED 
(
	[Id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]

Step 3: Create HomeController.cs and View

@using EmployeeManagement.Logic
@using EmployeeManagement.Helpers
@model EmployeeModel

@Html.Partial("_FilterMenu")
Custom Grid with Each Column Filter, Paging and Sorting | DotNettec.com

@Html.Partial("Sample3List", Model)
@section scripts{ @*start Grid paging/Sorting*@ } @using EmployeeManagement.Logic @model EmployeeModel @using PagedList.Mvc @using EmployeeManagement.Helpers @using EmployeeManagement.Model @{ int i = 0; int count = Model.Filters.Count() + 1; int id = Model.Table == null ? 0 : Model.Table.Id; }
@foreach (var filter in Model.Filters) { if (filter.ColumnName.ToLower() != "id") { } i++; } @if (Model != null && Model.dynamicList.Count() > 0) { @foreach (var item in Model.dynamicList) { @foreach (var column in item) { string columnName = column.Key; string columnValue = column.Value == null ? string.Empty : Convert.ToString(column.Value); if (columnName.ToLower() != "id") { } } } } else { } @if (Model != null && Model.dynamicList.Count() != 0) { }
@Html.Hidden("hdnParamNames", "Home|Sample3FilterSearch|Sample3List|tblSample3")@*Ex: ControllerName|ActionName|tableList|tableName*@ @if (filter.ColumnName == "CityName") { @Html.Sorter(filter.ColumnName, filter.ColumnName, Model.dynamicListMetaData.TotalItemCount, "Sample3FilterSearch", "Home", new AjaxOptions() { UpdateTargetId = "Sample3List", OnSuccess = "bindGridEvent('tblSample3')", OnBegin = "beforePage" }, new { page = Model.dynamicListMetaData.PageNumber, sortOrder = filter.ColumnName == Model.fieldName ? Model.sortOrder : ""})
@Html.DropDownList("ddlCity", new SelectList(Model.CityList, "Text", "Text", filter.Value), "[None]", new { data_Column = filter.ColumnName, data_condition = "=", data_value = filter.Value, onchange = "DropDownChange(this)", @class = "form-control input-sm txt-filter " })
} else if (filter.ColumnName == "IsActive" || filter.ColumnName == "IsDefault") { @Html.Sorter(filter.ColumnName, filter.ColumnName, Model.dynamicListMetaData.TotalItemCount, "Sample3FilterSearch", "Home", new AjaxOptions() { UpdateTargetId = "Sample3List", OnSuccess = "bindGridEvent('tblSample3')", OnBegin = "beforePage" }, new { page = Model.dynamicListMetaData.PageNumber, sortOrder = filter.ColumnName == Model.fieldName ? Model.sortOrder : ""})
@Html.CustomCheckbox(filter.ColumnName, filter.Value == Null ? "false" : filter.Value, new { @class = "group-checkable mg-rt-2", data_column = filter.ColumnName, data_condition = (string.IsNullOrEmpty(filter.Condition) ? "false" : filter.Condition) })
} else { @Html.Sorter(filter.ColumnName, filter.ColumnName, Model.dynamicListMetaData.TotalItemCount, "Sample3FilterSearch", "Home", new AjaxOptions() { UpdateTargetId = "Sample3List", OnSuccess = "bindGridEvent('tblSample3')", OnBegin = "beforePage" }, new { page = Model.dynamicListMetaData.PageNumber, sortOrder = filter.ColumnName == Model.fieldName ? Model.sortOrder : ""})
}
@if (columnName.Contains("IsActive")) { columnValue = columnValue == null ? "false" : columnValue; @Html.CustomCheckbox(columnName, columnValue == null ? "false" : columnValue, new { @disabled = "disabled" }) } else if (columnName.ToLower().Contains("date")) { columnValue = string.IsNullOrEmpty(columnValue) ? "" : Convert.ToDateTime(columnValue).ToString("yyyy-MM-dd hh:mm tt"); @Html.Raw(columnValue) } else { @Html.Raw(columnValue) }
No data
@{ MVCPagerModel objMVCPagerModel = new MVCPagerModel(); objMVCPagerModel.ActionName = "Sample3FilterSearch"; objMVCPagerModel.ControllerName = "Home"; objMVCPagerModel.UpdateTargetId = "Sample3List"; objMVCPagerModel.TableUpdate = "tblSample3"; objMVCPagerModel.DynamicList = Model.dynamicList; objMVCPagerModel.DynamicListMetaData = Model.dynamicListMetaData; objMVCPagerModel.sortOrder = Model.sortOrder; objMVCPagerModel.fieldName = Model.fieldName; objMVCPagerModel.StaticPageSize = Model.StaticPageSize; } @Html.Partial("_MVCPager", objMVCPagerModel)
using EmployeeManagement.Logic; using EmployeeManagement.Model; using System; using System.Collections.Generic; using System.Data; using System.IO; using System.Linq; using System.Net; using System.Text; using System.Web.Mvc; namespace EmployeeManagement.Controllers { public class HomeController : Controller { CommonFunction common = new CommonFunction(); #region Sample3 - Custom Grid with Each Column filter, paging and sorting public ActionResult Sample3(int page = 1, int pageSize = 10) { EmployeeModel objModel = new EmployeeModel(); objModel.StaticPageSize = 10; BindSample3(objModel, page, pageSize); return View(objModel); } public ActionResult Sample3FilterSearch(EmployeeModel objModel, int page = 1, int pageSize = 10) { BindSample3(objModel, page, pageSize); return PartialView("Sample3List", objModel); } public void BindSample3(EmployeeModel objModel, int page, int pageSize) { CityManager objCityManager = new CityManager(new DataContext()); EmployeeManager context = new EmployeeManager(new DataContext()); StringBuilder query = new StringBuilder(); List colName = common.GetColumns(CommonFunction.module.Employee.ToString()); query = common.GetSqlTableQuery(CommonFunction.module.Employee.ToString()); if (objModel != null) objModel.StaticPageSize = pageSize; objModel.CityList = Extens.ToSelectList(objCityManager.GetDtCity(), "CityID", "CityName"); context.setModel(query, objModel, colName, "Name", page, pageSize); } #endregion } }

Download Source Code

Paging Searching and Sorting in ASP.NET MVC Demo

What do you think?

In this tutorial you’ve seen how to create a data model and implement sorting, filtering, paging, and grouping functionality. Please leave feedback on how you liked this tutorial and what we could improve.

The post Custom paging with sorting, filtering and grouping in AJAX DataGrid appeared first on Dot Net Technology Tutorial, Dot Net Tricks and Tips, ASP.Net Tutorial C#.



This post first appeared on Asp Dot Net Tricks And Tips, Dot Net Coding Tips, Google Maps API Developer, please read the originial post: here

Share the post

Custom paging with sorting, filtering and grouping in AJAX DataGrid

Email
Facebook
Pinterest
Twitter
×

Subscribe to Asp Dot Net Tricks And Tips, Dot Net Coding Tips, Google Maps Api Developer

Get updates delivered right to your inbox!

Thank you for your subscription

×