Home > MVC > How to use Filterable, Sortable and WithPaging in MVC using GridMvc



How to use Filterable, Sortable and WithPaging in MVC using GridMvc

In this article, we have described with an example code how to use Filterable, Sortable and WithPaging in MVC using GridMvc.


In this article, we have described with an example code how to use Filterable, Sortable and WithPaging in MVC using GridMvc.

This is a very useful control in MVC. We can use easily Filterable, Sortable, WithPaging in Gridmvc and automatically bind to and display the data from a model.

 

Required Namespace:

You will need to use the following namespaces.

using System.Configuration;

using System.Data.SqlClient;

 

Index.cshtml

We have used the gridmvc code below. You can have a look at it and learn.

@model IEnumerable<Html_Grid_MVC.Models.Customers>

 

@{

    ViewBag.Title = "how to use Filterable,Sortable and WithPaging in MVC using GridMvc.";

}

 

@using GridMvc.Html

<h2>Index</h2>

<script src="~/Scripts/jquery-1.10.2.js"></script>

<link href="@Url.Content("~/Content/Gridmvc.css")" rel="stylesheet" />

<script src="@Url.Content("~/Scripts/gridmvc.min.js")"></script>

<script src="~/bootstrap/js/bootstrap.min.js"></script>

<link href="~/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

<link href="~/Content/Site.css" rel="stylesheet" />

<div class="container">

    <div style="margin-top: 10px"></div>

    <div class="logo col-sm-12 text-center col-md-12 ">

    </div>

    <div class="clearfix"></div>

    <fieldset>

        <legend class="legend">All Customers Detail</legend>

        <div style="margin-top: 5px"></div>

        <div class="test" style="overflow: scroll; height: auto; width: 600px">

            <div style="width: 600px">

                <div class="panel">

                    <div class="panel-body">

                        @Html.Grid(Model).Columns(columns =>

                    {

                        columns.Add(c => c.customerID).Titled("CustomerID").Filterable(true);

                        columns.Add(c => c.FirstName).Titled("FirstName").Filterable(true);

                        columns.Add(c => c.LastName).Titled("LastName").Filterable(true);

                        columns.Add(c => c.CreatedDate).Titled("CreatedDate").Filterable(true).Format("{0:dd/MM/yyyy}");

                        columns.Add(c => c.Address).Titled("Address").Filterable(true);

                    }).WithPaging(10).Sortable(true)

                    </div>

                </div>

            </div>

        </div>

    </fieldset>

</div>

 

Model C#

we have provided model code below.

public class Customers

    {

        public int customerID { get; set; }

        public string FirstName { get; set; }

        public string LastName { get; set; }

        public string Address { get; set; }

        public DateTime CreatedDate { get; set; }

    }

 

Controller C#

public ActionResult Index()

        {

            List<Customers> customers = PopulateCustomers();

            return View(customers);

        }

 

        [NonAction]

        private List<Customers> PopulateCustomers()

        {

 

            List<Customers> customers = new List<Customers>();

            string constr = Convert.ToString(ConfigurationManager.ConnectionStrings["Connection"]);

            SqlConnection con = new SqlConnection(constr);

            SqlCommand cmd = new SqlCommand("Select * from dim_Customer_Master", con);

            con.Open();

            SqlDataReader idr = cmd.ExecuteReader();

            if (idr.HasRows)

            {

                while (idr.Read())

                {

                    customers.Add(new Customers

                    {

                        customerID = Convert.ToInt32(idr["Customer_id"]),

                        FirstName = Convert.ToString(idr["FirstName"]),

                        LastName = Convert.ToString(idr["lastname"]),

                        CreatedDate = Convert.ToDateTime(idr["createddate"]),

                        Address = Convert.ToString(idr["Address"])

                    });

                }

            }

 

            return customers;

        }

 

Screenshot

How to use Filterable,Sortable and WithPaging in MVC using GridMvc.

 

Download




Note: All contents are copyright of their authors.



Comments



Leave a Reply

Comment:*
Email ID:*


Name:*