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. Image for the cookie policy date
WEBINAR  Visualize Customer Survey Reports Using Our React 3D Circular Charts Control —Thursday, May 02, 10:00 A.M. ET REGISTER NOW
close icon
  1. Home
  2. Forum
  3. ASP.NET MVC
  4. MVC Grid not showing any data

MVC Grid not showing any data

I have this code in my controller:

public ActionResult Index()
        {
            ViewBag.datasource = new ANPREntities().recognitions.ToList();
            return View();
        }

and this code is in my view:

@{
    ViewBag.Title = "Main";
}

<h2>Main</h2>

@(Html.EJ().Grid<recognitions>("Grid")
        .Datasource((IEnumerable<recognitions>)ViewBag.datasource)
        .Columns(col =>
        {
            col.Field("source_id").HeaderText("source_id").TextAlign(TextAlign.Right).Width(75).Add();
            col.Field("plate_text").HeaderText("plate_text").TextAlign(TextAlign.Right).Width(75).Add();
        })
)

but when I run the project, the grid is without data.
Here is the debugger code from the running page:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Main - My ASP.NET Application</title>
    <link rel='nofollow' href="/Content/bootstrap.css" rel="stylesheet"/>
<link rel='nofollow' href="/Content/site.css" rel="stylesheet"/>

    <link rel='nofollow' href="/Content/ej/ej.widgets.core.bootstrap.min.css" rel="stylesheet"/>
<link rel='nofollow' href="/Content/ej/ej.theme.min.css" rel="stylesheet"/>

    <script src="/Scripts/jquery-3.1.0.js"></script>

    <script src="/Scripts/jsrender.min.js"></script>
<script src="/Scripts/ej/ej.web.all.min.js"></script>

    <script src="/Scripts/modernizr-2.8.3.js"></script>

</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" rel='nofollow' href="/">Application name</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a rel='nofollow' href="/">Home</a></li>
                    <li><a rel='nofollow' href="/Home/About">About</a></li>
                    <li><a rel='nofollow' href="/Home/Contact">Contact</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        


<h2>Main</h2>

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


        <hr />
        <footer>
            <p>&copy; 2016 - My ASP.NET Application</p>
        </footer>
    </div>
    <script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>

    
    <script type='text/javascript'>$(function($){$("#Grid").ejGrid({"dataSource":ej.isJSON([{"source_id":2,"date":"\/Date(1472189585103)\/","plate_text":"HL219$","country_assumed":"Zimbabwe","confidence_level":"Excellent","complete_image_url":"D:\\ANPR\\CAM2\\anpr_2_HL219$_f3ed13a7-c4e4-4d7d-99e9-a66e009d6703.jpg","plate_image_url":"D:\\ANPR\\CAM2\\plate_2_HL219$_f3ed13a7-c4e4-4d7d-99e9-a66e009d6703.jpg"},{"source_id":2,"date":"\/Date(1472189597064)\/","plate_text":"EM458$","country_assumed":"Zimbabwe","confidence_level":"Excellent","complete_image_url":"D:\\ANPR\\CAM2\\anpr_2_EM458$_4d7eaba9-6f94-4cf7-bd3f-a66e009d750b.jpg","plate_image_url":"D:\\ANPR\\CAM2\\plate_2_EM458$_4d7eaba9-6f94-4cf7-bd3f-a66e009d750b.jpg"},{"source_id":2,"date":"\/Date(1472189608258)\/","plate_text":"ZEI$","country_assumed":"Zimbabwe","confidence_level":"Excellent","complete_image_url":"D:\\ANPR\\CAM2\\anpr_2_ZEI$_be35ca2e-83b5-48d7-a0fe-a66e009d8226.jpg","plate_image_url":"D:\\ANPR\\CAM2\\plate_2_ZEI$_be35ca2e-83b5-48d7-a0fe-a66e009d8226.jpg"},{"source_id":2,"date":"\/Date(1472189634498)\/","plate_text":"HL2I9$","country_assumed":"Zimbabwe","confidence_level":"Excellent","complete_image_url":"D:\\ANPR\\CAM2\\anpr_2_HL2I9$_2e705630-cbae-49a9-bd92-a66e009da0e9.jpg","plate_image_url":"D:\\ANPR\\CAM2\\plate_2_HL2I9$_2e705630-cbae-49a9-bd92-a66e009da0e9.jpg"},{"source_id":2,"date":"\/Date(1472189635623)\/","plate_text":"FS369$","country_assumed":"Zimbabwe","confidence_level":"Moderate","complete_image_url":"D:\\ANPR\\CAM2\\anpr_2_FS369$_3308eeb6-6be0-449c-abd2-a66e009da238.jpg","plate_image_url":"D:\\ANPR\\CAM2\\plate_2_FS369$_3308eeb6-6be0-449c-abd2-a66e009da238.jpg"},{"source_id":2,"date":"\/Date(1472189646089)\/","plate_text":"EM4S8$","country_assumed":"Zimbabwe","confidence_level":"Excellent","complete_image_url":"D:\\ANPR\\CAM2\\anpr_2_EM4S8$_336b79f5-80f6-4ed3-a6b3-a66e009dae7c.jpg","plate_image_url":"D:\\ANPR\\CAM2\\plate_2_EM4S8$_336b79f5-80f6-4ed3-a6b3-a66e009dae7c.jpg"}]),"cssClass":"","columns":[{"field":"source_id","headerText":"source_id","textAlign":"right","width":75},{"field":"plate_text","headerText":"plate_text","textAlign":"right","width":75}]});});</script>

<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Microsoft Edge","requestId":"3877f7a3cbc04a2bb2ce9213e3b3d762"}
</script>
<script type="text/javascript" src="http://localhost:58144/a3342c4a0bb5498892156d3f85e51267/browserLink" async="async"></script>
<!-- End Browser Link -->

</body>
</html>

What am I doing wrong?
Thank you!

7 Replies
BJ Bernard Jurlina August 27, 2016 11:23 PM UTC

Just one more thing. When I run the project only with Internet explorer, I get this error/message:

Unhandled exception at line 3793, column 3 in http://localhost:52524/Scripts/jquery-3.1.0.js
0x800a138f - JavaScript runtime error: Unable to get property 'id' of undefined or null reference.

Edge or Chrome - no error message.

Thanks!

BJ Bernard Jurlina August 28, 2016 07:03 AM UTC

And just one more thing... :)
I got it to work, but I have to downgrade jquery version from 3.1.0 to 2.1.4. Then my grid displays like it should.
Latest controls not working with the latest jquery?

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team August 29, 2016 09:48 AM UTC

Hi Bernard, 

We are unable to reproduce the problem at our end. We have prepared a sample that can be downloaded from the following location. 


In attached sample, we have referred latest jQuery v3.1.0 and we are able to successfully populate the Grid data in all the browsers. Please provide the following information to analyze the problem. 

1)      Complete Stack trace of browser console as shown in the following image. 
 
 
2)      Code example of Grid, custom scripts and code behind. 
3)      If possible, reproduce the problem with the attached sample and replicate the issue 

Regards 
Seeni Sakthi Kumar S. 


EH Edgar H Velandia M replied to Seeni Sakthi Kumar Seeni Raj September 26, 2016 08:16 PM UTC

Hi Bernard, 

We are unable to reproduce the problem at our end. We have prepared a sample that can be downloaded from the following location. 


In attached sample, we have referred latest jQuery v3.1.0 and we are able to successfully populate the Grid data in all the browsers. Please provide the following information to analyze the problem. 

1)      Complete Stack trace of browser console as shown in the following image. 
 
 
2)      Code example of Grid, custom scripts and code behind. 
3)      If possible, reproduce the problem with the attached sample and replicate the issue 

Regards 
Seeni Sakthi Kumar S. 


Hello Ing. Seeni Sakthi Kumar Seeni

I've the same problem with my Grid. Not show the data.

This is my code:

1) In the Controller

public class BackorderController : Controller
    {
  
        private readonly IBackorderAppService backorderAppService;
   
        public BackorderController(IBackorderAppService appService)
        {
            backorderAppService = appService;
        }

        // GET: Inquiries/Backorder
        public ActionResult Index()
        {
            @ViewData["SubTitle"] = "Back Order";
            ViewData["Message"] = "Analisys by Market";
            ViewBag.DataSource = backorderAppService.GetAll().ToList();
            return View();
        }

2) In the View Index

@{
    ViewBag.Title = "Inquiry";
}

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="text-center m-t-lg">
                <h1>
                    @ViewData["SubTitle"]
                </h1>
                <small>@ViewData["Message"]</small>
            </div>

                    @section ControlsSection{
                        @(Html.EJ().Grid<Legrand.Predicast.Domain.Entities.Backorder>("Grid")
                         .Datasource((IEnumerable<Legrand.Predicast.Domain.Entities.Backorder>)ViewBag.DataSource)
                         .AllowPaging()
                         .AllowSorting()
                         .AllowFiltering()
                         .FilterSettings(filter => { filter.FilterType(FilterType.Menu); })
                         .Columns(col =>
                         {
                             col.Field(p => p.MarketId).HeaderText("Market").TextAlign(TextAlign.Right).Add();
                             col.Field(p => p.Market.LocalDescription).HeaderText("Market Description").TextAlign(TextAlign.Right).Add();
                             col.Field(p => p.ItemNumberId).HeaderText("Item Number").TextAlign(TextAlign.Right).Add();
                             col.Field(p => p.ItemMaster.ItemDescription).HeaderText("Description").Add();
                             col.Field(p => p.LastDate).HeaderText("Date").Format("{0:MM/dd/yyyy}").Add();
                             col.Field(p => p.Quantity).HeaderText("Quantity").Format("{0:n2}").TextAlign(TextAlign.Right).Add();
                             col.Field(p => p.Valor).HeaderText("Total Amount").Format("{0:c2}").TextAlign(TextAlign.Right).Add();
                         })
                        )
                    }
        </div>
    </div>
</div>

How you can see in the images, the ViewBag.DataSource load 1483 registers but not show any data.

Uncaught TypeError: Failed to execute 'replaceChild' on 'Node': parameter 1 is not of type 'Node'.

You can help me, please.

Edgar H. Velandia M.

Attachment: ErrorWithGrid_58cc5146.zip

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team September 27, 2016 10:52 AM UTC

Hi Edgar, 

We are able to reproduce the problem at our end with the given code example. We could see the LastDate value is not in a valid date format but it has been given format as “{0:MM/dd/yyyy}” in the Grid Columns which is the cause of the problem. So we suggest to give valid date in LastDate column as shown in the following code example or any other recognized format for the Date. 

 
 
DateTime LastDate = new DateTime(2015, 1, 18); 
 
 

If the issue still persists even after updating the LastDate as shown in the code example/screenshot, please send the sample data which is used as a Generic list/SQL data to analyze the issue and provide you solution as early as possible. 
  
Regards, 
Seeni Sakthi Kumar S. 


SK sateesh kumar January 11, 2019 12:50 PM UTC

Hi Seeni Sakthi Kumar S. ,

am also getting same error "0x800a138f - JavaScript runtime error: Unable to get property 'dataSource' of undefined or null reference occurred"

Please find the attached files as you requested.

Thanks for the advance.


Regards,
J. sateesh Kuar 

Attachment: Grid_20190111_7c3a9f9c.7z

VN Vignesh Natarajan Syncfusion Team January 14, 2019 08:38 AM UTC

Hi Sateesh, 
 
Query: “am also getting same error "0x800a138f - JavaScript runtime error: Unable to get property 'dataSource' of undefined or null reference occurred" 
 
From your query and attached screenshot, we understand that you are facing issue while updating the dataSource of the grid. On further analyzing we have found that your sample has multiple jQuery reference and web all reference. The reported is caused due to multiple jQuery and weball script reference. 
 
Because script error is thrown while calling the dataSource of Grid. So Grid instance is not properly obtained. To resolve the issue, we suggest you refer the single unique jQuery file, script file and re run the sample by clearing the cache. 
 
Regards, 
Vignesh Natarajan  
 


Loader.
Live Chat Icon For mobile
Up arrow icon