I am new to jquery, slick grid and razor. I have gone through SlickGrid examples and am able to load static data into a SlickGrid. Now I am trying to load JSON data from MSSQL into my SlickGrid. I have seen a few examples online, but I believe I am missing something not mentioned in those examples.
Here is what I have code.
SlickGridProducts.js var grid;
var columns = [
{ id: "ProductID", name: "ProductID", field: "ProductID", width: 50 },
{ id: "ItemDesc", name: "ItemDesc", field: "ItemDesc", width: 200 },
{ id: "DivName", name: "DivName", field: "DivName", width: 50 },
{ id: "DeptDesc", name: "DeptDesc", field: "DeptDesc", width: 75 },
{ id: "ClassDesc", name: "ClassDesc", field: "ClassDesc", width: 100 },
{ id: "SubClassDesc", name: "SubClassDesc", field: "SubClassDesc", width: 100 }
];
var options = {
editable: true,
enableAddRow: true,
enableCellNavigation: true,
asyncEditorLoading: false,
autoEdit: false
};
$(function () {
var slickdata = [];
$.getJSON("/Products/GetSlickGridData", function (items) {
for (var i = 0; i < items.length; i++) {
slickdata[i] = {
ProductID: items[i].ProductID,
ItemDesc: items[i].ItemDesc,
DivName: items[i].DivName,
DeptDesc: items[i].DeptDesc,
ClassDesc: items[i].ClassDesc,
SubClassDesc: items[i].SubClassDesc
};
}
});
grid = new Slick.Grid("#myGrid", slickdata, columns, options);
grid.setSelectionModel(new Slick.RowSelectionModel());
grid.setActiveCell(0, 0);
})
Products/Index.cshtml
@model IEnumerable<JQGrid.Models.Product>
@{
ViewBag.Title = "Index";
}
<link href="@Url.Content("~/Content/slick.grid.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.8.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.event.drag.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/SlickGrid/slick.core.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/SlickGrid/slick.grid.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/SlickGridProducts.js")" type="text/javascript"></script>
<h2>Index</h2>
<div id="myGrid" style="width:800px;height:300px;"></div>
ProductsController.cs
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using JQGrid.Models;
namespace JQGrid.Controllers
{
public class ProductsController : Controller
{
private ProductPickerEntities db = new ProductPickerEntities();
//
// GET: /Products/
public ActionResult Index()
{
return View(db.Products.ToList());
}
...
public JsonResult GetSlickGridData()
{
var slickGridData = db.Products.ToList();
return Json(slickGridData, JsonRequestBehavior.AllowGet);
}
}
}
If I add a breakpoint in JsonResult GetSlickGridData() and watch slickGridData, I see that it is populated with all the items I want in my slickgrid.
With this all I get is a blank white box for my slick grid. I figure the problem is in my js where I am filling slickdata, but not sure what to fix.
**** Revision *****
I found one of my issues, but the slickgrid is still blank. My issue was the json result being returned was too large. So I modified my ProductsController.cs code for right now to say
public JsonResult GetSlickGridData()
{
var slickGridData = db.Products.ToList();
var jsonResult = Json(slickGridData, JsonRequestBehavior.AllowGet);
jsonResult.MaxJsonLength = int.MaxValue;
return jsonResult;
}
This resolves the maxlength error although I had thought this was resolved in MVC-4.