$(document).ready(function () {
var pageIndex = 1;
var pageCount;
var minCarat = $("#carat-min").val();
var maxCarat = $("#carat-max").val();
debugger;
$("#gvJQGrid").jqGrid({
url: 'SampleDefault.aspx/GetCustomers',
data: JSON.stringify({ 'pageIndex': pageIndex, 'mincart': minCarat, 'maxcart': maxCarat }),
contentType: "application/json; charset=utf-8",
mtype: "GET",
datatype: "json",
page: 1,
colNames: ['Images', 'Compare', 'Shape', 'Carat', 'Cut', 'Color', 'Clarity', 'Polish', 'Symmetry', 'Depth', 'Table', 'Floroscence',
'Price_Ct', 'Culet', 'Details'],
colModel: [
{
name: 'Images',
align: 'center',
formatter: formatImage
},
{
name: 'checkbox',
align: 'center',
formatter: formatChkbox,
},
{ name: 'Shape', align: 'center' },
{ name: 'Carat', align: 'center'},
{ name: 'Cut1', align: 'center' },
{ name: 'Color1', align: 'center' },
{ name: 'Clarity', align: 'center' },
{ name: 'Polish1', align: 'center' },
{ name: 'Symmetry1', align: 'center' },
{ name: 'Depth1', align: 'center' },
{ name: 'Table_1', align: 'center' },
{ name: 'Floroscence1', align: 'center' },
{ name: 'Price_Ct1', align: 'center' },
{ name: 'Culet1', align: 'center' },
{
name: 'View',
align: 'center',
formatter: formatButton
}
],
width: 840,
height: 500,
rowNum: 20,
scroll: 1,
emptyrecords: 'Scroll to bottom to retrieve new page',
pager: "#jqGridPager"
});
});
function formatImage(cellValue, options, rowObject) {
var imageHtml = "<img src='images/" + cellValue + "' originalValue='" + cellValue + "' />";
return imageHtml;
}
function formatChkbox(cellValue, options, rowObject) {
var imageHtml = "<input type=checkbox />";
return imageHtml;
}
function formatButton(cellValue, options, rowObject) {
var imageHtml = "<a href = # >View</a>";
return imageHtml;
}
function unformatImage(cellValue, options, cellObject) {
return $(cellObject.html()).attr("originalValue");
}