Hi,
In the _Layout.cshtml file, I have the following:
<head> <meta charset="utf-8" /> <title>@ViewBag.Title</title> <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.min.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js" type="text/javascript"></script> <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script> <script src="@Url.Content("~/Scripts/IG/ig.ui.min.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" /> <link href="@Url.Content("~/Content/IGStyles/base/ig.ui.editors.css")" rel="stylesheet" type="text/css" /> <link href="@Url.Content("~/Content/IGStyles/base/ig.ui.grid.css")" rel="stylesheet" type="text/css" /> <link href="@Url.Content("~/Content/IGStyles/ig/jquery.ui.custom.css")" rel="stylesheet" type="text/css" />
</head>
I have a class that calls a web service to get data from SQL
public class OrderList { public string OrderId { get; set; } }
public class OrderListModel { public static IQueryable<OrderList> Orders(string Id) { svc.Service1Client _svc = new svc.Service1Client(); DataSet ds = _svc.dOrders(Id);
List<OrderList> orderList = new List<OrderList>(); return (from item in ds.Tables[0].AsEnumerable().AsQueryable() select new OrderList { OrderId = item.Field<int>("OrderId").ToString()
}).AsQueryable<OrderList>();
} }
In the HomeController, I have this:
[GridDataSourceAction] public ActionResult OrderList(string ID) { var ds = from rec in OrderListModel.Orders(ID) select rec;
if (HttpContext.Request.IsAjaxRequest()) return Json(ds.ToArray(), JsonRequestBehavior.AllowGet);
return RedirectToAction("Index"); }In my cshtml file, I have this:
@using (Html.BeginForm("IndexDDL", "Home", FormMethod.Post, new { id = "FormID" })) { <fieldset> <legend>Test</legend> @Html.DropDownList("Records", ViewBag.Distributors as SelectList, "Select a record", new { id = "ID" })
<div> <table id="grid"></table> </div>
<script type="text/javascript"> $(document).ready(function () { $('#ID').change(function () { var selectedId = $(this).val(); var dSource = $.getJSON('@Url.Action("OrderList")', { ID: selectedId }); $("grid").igGrid({ autoGenerateColumns: false, columns: [ { headerText: "Order Number", Key: "OrderId", dataType: "number" } ], dataSource: dSource }); }); }); </script>
When I run it, I can see that it gets the records back from the SQL server but it does not display them in the grid. What did I do wrong? Thanks for your help!!!
Can you try instantiating the igGrid in the success callback function of the $.getJSON() you are performing?Note that most probably the igGrid is instantiated before the AJAX call to the server is complete and so the grid is bound to an empty dSource.
Give it a go and let us know if you run into any trouble.
Best Regards,
Borislav
Hello Borislav ,
Thanks for your reply. I'm very new with this control, can you give me an example on how to do this? Thanks!
Hi again,
I've attached a sample MVC3 solution to my current reply - in it you can find the idea I came up with.
If I were to update your original idea, I would do something like:
var dSource = $.getJSON('@Url.Action("OrderList")', { ID: selectedId },
function(data) { $("grid").igGrid({ autoGenerateColumns: false, columns: [ { headerText: "Order Number", Key: "OrderId", dataType: "number" } ], dataSource: data });
});
This way I would retrieve the data from the JSON response and pass it to the grid right after the $.getJSON() call has succeeded. My suggestion is based on the official description (and notes) for $.getJSON() : http://api.jquery.com/jQuery.getJSON/
I hope the project and these details will be of help to you :).
PS: There's a commented MVC igGrid - if you wish you can uncomment it and play around with it if that will help you make progress with your project.
Cheers,