Load Grid data from ViewBag

[Neill]

Hi there,

I am trying to load data into a grid from an ajax call.

$.ajax({

                type: 'GET',

                url: loadLinkedGridData,

                data: { searchString: $('#serialNumber').val(), groupByColumn: '@ViewBag.GroupByColumn' },

                success: function (result) {

                    $('#mainContent').ejGrid({

                        dataSource: '@ViewBag.datasource',

                        isResponsive: true,

                        enableResponsiveRow: true,

                        allowSorting: true,

                        allowResizing: true,

                        allowPaging: true,

                        pageSettings: { pageSize: '@ViewBag.PageSize' },

                        allowFiltering: true,

                        filterSettings: {filterType: "Excel"},

                        allowGrouping: true,

                        groupSettings: {groupedColumn: "SerialNumber"},

                        columns :

                            [

                                { field: "AnatomyLinkedId", headerText: "ID", isPrimaryKey: true,headerTextAligh: "right", width: 30},

                                { field: "SerialNumber", headerText:"Serial Number", width: 60},

                                { field: "LinkStation", headerText:"Link Station", width: 50 },

                                { field: "DateLinked", headerText:"Date Linked", priority: 2,  format: "{0:dd/MM/yyyy}", width: 40 },

                                { field: "UnlinkStation", headerText:"Unlink Station", width: 60 },

                                { field: "DateUnlinked", headerText: "Date Unlinked", priority: 2, format: "{0:dd/MM/yyyy}", width: 40 },

                                { field: "User", headerText:"User", width: 60 }

                            ],

                        recordClick: function (args) {}

                    });

                },

                complete: function () {          

                }

            });

ActionMethod:

    [HttpGet]

        public ActionResult LoadGridData(string searchString, string groupByColumn)

        {

            if (String.IsNullOrEmpty(searchString))

            {

                return Json("FAILED", JsonRequestBehavior.AllowGet);

            }

            ViewBag.SerialNo = searchString;

            List<MockAnatomyLinked> linkedItems = LinkedList.Where(x => x.SerialNumber.StartsWith("ABC")).ToList();

            

            ViewBag.datasource = linkedItems;

            ViewBag.GroupByColumn = (string)groupByColumn;

            return Json("SUCCESS", JsonRequestBehavior.AllowGet);

        }

The error is:

Uncaught TypeError: Cannot read property 'length' of undefined

    at Object._renderGridContent (http://localhost:3082/Scripts/ej/ej.web.all.min.js:10:2805208)

    at Object.render (http://localhost:3082/Scripts/ej/ej.web.all.min.js:10:2795919)

    at Object._initGridRender (http://localhost:3082/Scripts/ej/ej.web.all.min.js:10:2786208)

    at Object._checkDataBinding (http://localhost:3082/Scripts/ej/ej.web.all.min.js:10:2752417)

    at Object._init (http://localhost:3082/Scripts/ej/ej.web.all.min.js:10:2747530)

    at Object.<anonymous> (http://localhost:3082/Scripts/ej/ej.web.all.min.js:10:20136)

    at jQuery.fn.init.n.fn.(anonymous function) [as ejGrid] (http://localhost:3082/Scripts/ej/ej.web.all.min.js:10:21179)

    at Object.success (http://localhost:3082/Anatomy/ViewLinkedItems?groupColumn=SerialNumber&includePartials=False:398:39)

    at fire (http://localhost:3082/Scripts/jquery-2.2.4.js:3187:31)

    at Object.fireWith [as resolveWith] (http://localhost:3082/Scripts/jquery-2.2.4.js:3317:7)

Neill

[Prasanna Kumar Viswanathan]

Hi Neill, 

Thanks for contacting Syncfusion support. 

To load data into a grid from an ajax call, we suggest you to return the data in the controller instead of returning the string value. In ajax Success event we can get the data and bind to the Grid. 

Find the code example and sample:  

<div id="Grid"></div> 

 

<script> 

    $.ajax({ 

        type: 'GET', 

        url: "/Grid/LoadGridData", 

        data: { searchString: "Brazil", groupByColumn: 'EmployeeID' }, 

        success: function (result) { 

            $('#Grid').ejGrid({ 

                dataSource: ej.parseJSON(result), 

                isResponsive: true, 

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

               groupSettings: { groupedColumn: "EmployeeID" }, 

                columns: 

                    [ 

                        { field: "OrderID", headerText: "ID", isPrimaryKey: true, headerTextAligh: "right", width: 30 }, 

                        { field: "CustomerID", headerText: "Serial Number", width: 60 }, 

                        { field: "EmployeeID", headerText: "Link Station", width: 50 }, 

                        { field: "OrderDate", headerText: "Date Linked", priority: 2, format: "{0:dd/MM/yyyy}", width: 40 }, 

 

                    ], 

                recordClick: function (args) { } 

            }); 

        }, 

        complete: function () { 

        } 

    }); 

</script> 

 

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

[HttpGet] 

        public ActionResult LoadGridData(string searchString, string groupByColumn) 

        { 

            if (String.IsNullOrEmpty(searchString)) 

            { 

                return Json("FAILED", JsonRequestBehavior.AllowGet); 

            } 

 

 

            ViewBag.SerialNo = searchString; 

 

            List<EditableOrder> linkedItems = OrderRepository.GetAllRecords().Take(10).ToList(); 

 

            ViewBag.GroupByColumn = (string)groupByColumn; 

 

            return Json(linkedItems, JsonRequestBehavior.AllowGet); 

        } 

In your code example we found that you have used date column and applied format in it. The date value is not formatted when it is retrieved from the server via AJAX post. The unformatted JSON date value can be formatted by ej.parseJSON function in the AJAX success event. 

 

Sample: http://www.syncfusion.com/downloads/support/forum/130815/ze/Sample145862-408183847 

Regards, 

Prasanna Kumar N.S.V 

 

[Neill]

Good morning,

Thank you for the reply.

After my post, I figured out exactly that, so it is working now.

Thank you.

[Prasanna Kumar Viswanathan]

Hi Neill, 

We are happy to hear that your issue has been resolved. 

Please get back to us if you need any further assistance. 

Regards, 

Prasanna Kumar N.S.V