Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
LIEM
1253
bind grid using Json
posted

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!!!

 

Parents
No Data
Reply
  • 6279
    Suggested Answer
    posted

    Hi,

    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 

Children