jQuery Grid Plugin - jqGrid

Please help. Thanks for your time

I am using JqGrid with MVC using Json format. I am able to display data in jqgrid successfully. sorting, paging, filtering etc works fine too.

Issue: While selecting a row, the selection is not working properly, if I make the unique row id in the Json format as "String". if I select one row, some other row is getting selected. Also if I select the check box in the top ("selectAll/Multi select checkbox), rows are getting highlighted but check boxes for individual rows are not getting selected.

Question: do we need to make the unique row id in the JsonFormat as Integer like 1,2,3 etc??? Is it mandaory???

If I make the unique row id in the Json format as "Integer", this selection works fine.

Here is my code. controller, view, repository with hard coded data.

-------------------------------------------------------------------------------------------------------------
My Controller action:

 public virtual JsonResult GetJQGridJsonData(int page, int rows, string search, string sidx, string sord)
        {

            List<Product> jqData = new List<Product>();
            jqData = Repository.GetProducts();
           
            int pageSize = rows;
            int totalRecords = jqData.Count();

            int totalPages;
            if (totalRecords > 0)
                totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);
            else
                totalPages = 0;

            var jsonData = new JqGridJsonData
            {

                total = totalPages,
                page = page,
                records = totalRecords,

                rows = jqData.Select(vm =>
                             new JQGridRowJson
                             {
                                 id = vm.ProductId.ToString(),
                                 cell = new[]{

                                                   vm.ProductId.ToString(),
                                                   vm.ProductNumber,
                                                   vm.Size,
                                                   vm.ReleaseDate.ToShortDateString(),
                                                   vm.Amount.ToString(),
                                                   vm.Description
                                }
                             }).ToArray()

            };
            return Json(jsonData, JsonRequestBehavior.AllowGet);
        }
--------------------------------------------------------------------------------------------------------------
 

-------------------------------------------------------------------------------------------------------------
My View:

 
<link href="../../css/redmond/jquery-ui-1.8.13.custom.css" rel="stylesheet" type="text/css" />
<link href="../../css/ui.jqgrid.css" rel="stylesheet" type="text/css" />

<script src="../../js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="../../js/i18n/grid.locale-en.js" type="text/javascript"></script>
@*<script src="../../js/jquery.jqGrid.min.js" type="text/javascript"></script>*@
<script src="../../js/jquery.jqGrid.src.js" type="text/javascript"></script>

 <table id="list2"></table>
<div id="pager2"></div>
<a href="#" id="a1">Get data from selected row</a>

<script type="text/javascript">

    jQuery("#list2").jqGrid({
        url: '/JsonProducts/GetJQGridJsonData/',
        datatype: "json",
        colNames: ['ProductId', 'ProductNumber', 'Size', 'ReleaseDate', 'Amount', 'Description'],
        colModel: [
     { name: 'ProductId', index: 'ProductId', width: 100, sortable: true, sorttype: "text" },
     { name: 'ProductNumber', index: 'ProductNumber', width: 100, sortable: true, sorttype: "text" },
     { name: 'Size', index: 'Size', width: 100, sortable: true, sorttype: "text" },
        { name: 'ReleaseDate', index: 'ReleaseDate', width: 100, datefmt: "mm/dd/yyyy", sorttype: "date", sortable: true },
        { name: 'Amount', index: 'Amount', width: 100, sortable: true, sorttype: "float" },
        {name: 'Description', hidden: true, index: 'Description', width: 100, sortable: false, editable: true, editrules: { edithidden: true} },
        { name: 'ViewDetails', index: 'ViewDetails', width: 100, sortable: false },
        {name: 'fileAttached', index: 'fileAttached', align: "center", width: 40 }
    ],
        rowNum: 20,
        rowList: [10, 20, 30],
        pager: '#pager2',
        sortname: 'ProductId',
        viewrecords: true,
        sortorder: "desc",
        caption: "Enforcement Actions",
        multiselect: true,
        width: 800,
        height: 600,
        toppager: true,
        loadonce: true, // to enable sorting on client side
        sortable: true //to enable sorting
    });
    jQuery("#list2").jqGrid('navGrid', '#pager2', { edit: false, add: false, del: false, view: true });
    jQuery("#list2").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false });

</script>

--------------------------------------------------------------------------------------------------------------

My Prodcuts List:

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

namespace Models.Repository
{
    public class Repository
    {
      
        public static List<Product> GetProducts()
        {
            List<Product> products = new List<Product>
                                          {
                                              new Product("Prod 1", "Coke", "Abc100","Red","s","Fasion", Convert.ToDateTime("01/01/2012"),

Convert.ToDecimal("200.00"), "This is a long description to show in view record dialog. test test test test test"),
                                              new Product("Prod 2", "Pepsi", "Abc200","blue","xl","B", Convert.ToDateTime("01/02/2012"),

Convert.ToDecimal("300.00"), "This is a long description to show in view record dialog. test test test test test"),
                                              new Product("Prod 3", "L&P", "Abc300","green","l","D", Convert.ToDateTime("01/10/2012"),

Convert.ToDecimal("200.00"), "This is a long description to show in view record dialog. test test test test test"),
                                              new Product("Prod 4", "A&B", "Abc400","purple","xxl","D", Convert.ToDateTime("02/01/2012"),

Convert.ToDecimal("400.00"), "This is a long description to show in view record dialog. test test test test test"),
                                              new Product("Prod 5", "All Star", "Abc500","black","s","H", Convert.ToDateTime("03/01/2012"),

Convert.ToDecimal("500.00"), "This is a long description to show in view record dialog. test test test test test"),
                                              new Product("Prod 6", "Wai", "Abc600","yellow","s","G", Convert.ToDateTime("04/01/2012"),

Convert.ToDecimal("2000.00"), "This is a long description to show in view record dialog. test test test test test"),
                                              new Product("Prod 7", "cd", "Abc700","pink","s","C", Convert.ToDateTime("05/21/2012"),

Convert.ToDecimal("1200.00"), "This is a long description to show in view record dialog. test test test test test"),
                                              new Product("Prod 8", "LV", "Abc800","blue","s","G", Convert.ToDateTime("09/01/2012"),

Convert.ToDecimal("200.00"), "This is a long description to show in view record dialog. test test test test test"),
                                              new Product("Prod 9", "DD", "Abc900","grey","s","D", Convert.ToDateTime("09/20/2012"),

Convert.ToDecimal("200.00"), "This is a long description to show in view record dialog. test test test test test")

                                          };
            return products;
        }
    }
}
 

--------------------------------------------------------------------------------------------------------------
My Product class:

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

namespace Models.Repository
{
    public class Product
    {
        public Product()
        {
        }

        private string productId;
        private string name;
        private string productNumber;
        private string color;
        private string size;
        private string style;
        private DateTime releaseDate;
        private Decimal amount;
        private string description;

        public virtual string ProductId
        {
            get { return productId; }
            set { productId = value; }
        }

        public virtual string Name
        {
            get { return name; }
            set { name = value; }
        }

        public virtual string ProductNumber
        {
            get { return productNumber; }
            set { productNumber = value; }
        }

        public virtual string Color
        {
            get { return color; }
            set { color = value; }
        }

        public virtual string Size
        {
            get { return size; }
            set { size = value; }
        }

        public virtual string Style
        {
            get { return style; }
            set { style = value; }
        }

        public virtual DateTime ReleaseDate
        {
            get { return releaseDate; }
            set { releaseDate = value; }
        }

        public virtual Decimal Amount
        {
            get { return amount; }
            set { amount = value; }
        }

        public virtual string Description
        {
            get { return description; }
            set { description = value; }
        }

        public Product(string productId, string name, string productNumber, string color, string size, string style, DateTime releaseDate, Decimal amount,

string description)
        {
            this.productId = productId;
            this.name = name;
            this.productNumber = productNumber;
            this.color = color;
            this.size = size;
            this.style = style;
            this.ReleaseDate = releaseDate;
            this.Amount = amount;
            this.Description = description;
        }
    }
}

-------------------------------------------------------------------------------------------------------------------------