We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Load Grid data from ViewBag

Thread ID:

Created:

Updated:

Platform:

Replies:

130815 Jun 5,2017 07:57 AM Jun 6,2017 11:49 PM ASP.NET MVC 3
loading
Tags: Grid
Neill
Asked On June 5, 2017 07:57 AM

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 [Syncfusion]
Replied On June 6, 2017 02:24 AM

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 
 


Neill
Replied On June 6, 2017 02:38 AM

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 [Syncfusion]
Replied On June 6, 2017 11:49 PM

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;