1. Home
  2. Forum
  3. ASP.NET MVC
  4. Load Grid data from ViewBag

Load Grid data from ViewBag

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


3 Replies
PK Prasanna Kumar Viswanathan Syncfusion Team June 6, 2017 06:24 AM UTC

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. 
 

Regards, 
Prasanna Kumar N.S.V 
 


NE Neill June 6, 2017 06:38 AM UTC

Good morning,

Thank you for the reply.

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

Thank you.

PK Prasanna Kumar Viswanathan Syncfusion Team June 7, 2017 03:49 AM UTC

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 


Loader.
Up arrow icon