How to sort columns in jQuery grid in MVC 3?

Question

I have this sample MVC project using jQuery grid. There is only one problem I'm encountering, and that is the sort function of jQuery grid.

Model:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations;

namespace MyAjaxSample.Models
{
    public class Candy
    {
        [Key]        
        public long ID { get; set; }
        public string Name { get; set; }
        public double Price { get; set; }
        public string Color { get; set; }
        public bool Expired { get; set; }
    }
}

Controller: Please see the comment code, where error occurs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MyAjaxSample.Models;

namespace MyAjaxSample.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public JsonResult DynamicGridData(string sidx, string sord, int page, int rows)
        {
            List<Candy> candyList = new List<Candy>();
            for (int i = 0; i <= 50; i++)
            {
                Candy candy = new Candy();
                candy.ID = i;
                candy.Name = "Candy " + i.ToString();
                candy.Price = i * 0.19;
                candy.Color = "Black";
                candy.Expired = false;

                candyList.Add(candy);
            }

            var context = candyList;
            int pageIndex = Convert.ToInt32(page) - 1;
            int pageSize = rows;
            int totalRecords = context.Count();
            int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);

            // This is not working
            //var candies = context.OrderBy(sidx + " " + sord).Skip(pageIndex * pageSize).Take(pageSize); ;
            var candies = context;

            var jsonData = new
            {
                total = totalPages,
                page,
                records = totalRecords,
                rows = (
                    from item in candies
                    select new
                    {
                        i = candies,
                        cell = new string[] { item.ID.ToString(), item.Name, item.Price.ToString(), item.Color, item.Expired.ToString() }
                    }).ToArray()
            };
            return Json(jsonData);
        }
    }
}

View:

<link href="/Content/jquery-ui-1.8.7.css" rel="stylesheet" type="text/css" />
<link href="/Content/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link href="/Content/ui.multiselect.css" rel="stylesheet" type="text/css" />

<script src="/Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>

<script src="/Scripts/grid.locale-en.js" type="text/javascript"></script>
<script src="/Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>

<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery("#list").jqGrid({
            url: '/Home/DynamicGridData/',
            datatype: 'json',
            mtype: 'POST',
            colNames: ['ID', 'Name', 'Price', 'Color', 'Expired'],
            colModel: [
        { name: 'ID', index: 'ID', width: 40, align: 'left' },
        { name: 'Name', index: 'Name', width: 40, align: 'left' },
        { name: 'Price', index: 'Price', width: 400, align: 'left' },
        { name: 'Color', index: 'Color', width: 400, align: 'left' },
        { name: 'Expired', index: 'Expired', width: 400, align: 'left' }
        ],
            pager: jQuery('#pager'),
            rowNum: 80,
            rowList: [20, 10, 20, 50],
            sortname: 'ID',
            sortorder: "desc",
            viewrecords: true,
            imgpath: '',
            caption: 'My first grid'
        });
    }); 
</script>  

<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>

The only problem here is the sorting function. Actually I'll be using this to Entity Framework, the reason I've used List is because (for I think) they have same sortOrder parameters. Anyway I hope someone could help.

HaveNoDisplayName · Accepted Answer · 2015-02-21 00:34:41Z

1

Use Demo link to see sample Example.

enter image description here

edited Feb 21, 2015 at 0:34

HaveNoDisplayName

8,537106 gold badges41 silver badges50 bronze badges

answered Jan 19, 2012 at 11:22

Pankaj

10.2k40 gold badges152 silver badges297 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Pankaj Over a year ago

in the jquery grid, of heeader replace td with th. now confine the datarows with tbody and header row with thead tag.

fiberOptics Over a year ago

Thanks, but I really don't understand. I'm just new to jQuery. :(

Pankaj Over a year ago

You have to do it in your css for header.

fiberOptics Over a year ago

+1 for sharing such amazing plug in. but still I can't make it work to my project. Thanks!

Collectives™ on Stack Overflow

How to sort columns in jQuery grid in MVC 3?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related