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

Grid doesn't display

I already install the nuget package for Syncfusion and here my grid:
           @( Html.EJ().Grid<Person>("FlatGrid")
        .Datasource((IEnumerable<object>)ViewBag.datasource1)
        
        .Columns(c =>
        {
            c.Field("FirstName").HeaderText("First Name").Add();
            c.Field("LastName").HeaderText("Last Name").Add();
            c.Field("Email").HeaderText("Email").Add();
        })
            )

Action method:
          List<Person> Persons = new List<Person>();
            Persons.Add(new Person() { FirstName = "John", LastName = "Beckett", Email = "john@syncfusion.com" });
            Persons.Add(new Person() { FirstName = "Ben", LastName = "Beckett", Email = "ben@syncfusion.com" });
            Persons.Add(new Person() { FirstName = "Andrew", LastName = "Beckett", Email = "andrew@syncfusion.com" });
            ViewBag.datasource1 = Persons;


My Grid is rendered when I inspect the html but it does not display. I see some solutions to fix this using mvc classic but not for new Mvc. Any helps?

14 Replies

MI minh April 16, 2015 06:05 AM UTC

Solved. That's because I did not make an appropriate reference to Js files.


MI minh April 16, 2015 07:21 AM UTC

Now I have the Grid, but it does not show content:(I'm creating batch editing grid)
Here is my controller:
public ActionResult BatchDataSource(Syncfusion.JavaScript.DataManager dm, int? atdID)
        {
            IEnumerable DataSource = _context.AtdChannels
                     .Include(a => a.AtdChannelLocation)
                     .Include(c => c.ChimChimLocation)
                     .Include(s => s.SaeClass)
                     .Include(e => e.EngUnit)
                     .Include(e => e.ReliefColor)
                     
                .Where(x => x.AtdId == 111);
            BatchDataResult result = new BatchDataResult();
            DataOperations obj = new DataOperations();
            if (dm.Skip != 0)
            {
                DataSource = obj.PerformSkip(DataSource, dm.Skip);
            }
            if (dm.Take != 0)
            {
                DataSource = obj.PerformTake(DataSource, dm.Take);
            }
            result.result = DataSource;
            result.count = DataSource.ToList<AtdChannel>().Count();
            result.value = "Hai";

            return Json(result, JsonRequestBehavior.AllowGet);
        }

The grid is empty but I notice if I remove all the Include extension methods, the grid will Have data in it. I have to use these Include methods to get enough data from other tables. How can I fix this?
Here is my Grid:
  @(Html.EJ().Grid<AtdChannel>("InlineGridSyncfusion")
           .Datasource(ds => ds.URL("/Atd/BatchDataSource").Adaptor(AdaptorType.UrlAdaptor))
           .AllowPaging()    /*Paging Enabled*/
                  .Query("new ej.Query().addParams('atdID', 62)")

               .EnableHeaderHover()
            .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.Batch); })
            .ToolbarSettings(toolbar =>
                {
                    toolbar.ShowToolbar().ToolbarItems(items =>
                    {
                        items.AddTool(ToolBarItems.Add);
                  
                        items.AddTool(ToolBarItems.Delete);
                        items.AddTool(ToolBarItems.Update);
                        items.AddTool(ToolBarItems.Cancel);
                    });
                })
    .Columns(col =>
    {
        col.Field("SerialNumber").HeaderText("Serial Number").Width(80).Add();

        col.Field("ModelNumber").HeaderText("Model Number").Width(110).Add();
    }))



MI minh April 16, 2015 04:31 PM UTC

Any Helps?


PK Prasanna Kumar Viswanathan Syncfusion Team April 16, 2015 05:02 PM UTC

Hi Minh,

Thanks for using Syncfusion Products.

Query 1 : My Grid is rendered when I inspect the html but it does not display”

We are happy that you have resolved the issue.

Query 2 : “I have the Grid, but it does not show content while using batch editing”

We are currently validating yourissue and we will update you the response tomorrow 17th April, 2015

Please let us know if you have any further assistance,

Regards,

Prasanna Kumar N.S.V



PK Prasanna Kumar Viswanathan Syncfusion Team April 17, 2015 02:31 PM UTC

Hi Minh,

Thanks for the Patience

Query : I have the Grid, but it does not show content while using batch editing”

We have analyze your code snippet and we have created a sample according to the code snippet. While we use Include method, we cannot able to serialize the Json Data. So, we suspect that you have got the following error while rendering the grid . Please find the attached screen shot

We suspect that you have got the following error in the network tab. Please find the attached screen shot

The above mentioned issue is occurred due to circular reference occured in data and if you face the above mentioned error, you need to pick up the selected required field from the table by using select method. If we face any other issue while rendering the grid please attach a screen shot of the following error.

Please find the below code snippet :

result.result = DataSource.Cast<Order>().Select(x => new

{

OrderID = x.OrderID,

CustomerID = x.CustomerID,

EmployeeID = x.EmployeeID,

Freight = x.Freight,

Customer = new {

CustomerID = x.Customer.CustomerID,

}

});

For your convenience we have created a sample and sample can be downloaded from the below link :

Sample Link : http://www.syncfusion.com/downloads/support/forum/118854/MVC5_Sample_-_Entityframework227736936.zip

Please let us know if you have any further assistance on this,

Reference Link : http://blog.davebouwman.com/2011/12/08/handling-circular-references-asp-net-mvc-json-serialization/

Regards,

Prasanna Kumar N.S.V



MI minh April 19, 2015 09:10 PM UTC

Great, thanks a lot


MI minh April 19, 2015 11:36 PM UTC

Thank a lot for your great support so far. I'm still dealing with a lot of issues now.
No1: Now if my grid has multiple rows, it's working perfectly fine. But if it's empty and has only one row, I'm facing a weird situation. When I click add a new row, if my grid was empty, the new empty row added is really thin (it's height is shorter than normal row) and when I save the first row, and click to add a second row. The second row now will overlap the first row.  All these things only happen with empty grid or one row-grid. If I have a lot of row, everything seems normal.
No2: Can you please send me sample using filtering for some specific columns, not all columns? 
No3: I was trying to apply validation for some column. Specifically I wanted to apply ValidationRules(v=> v.AddRule("required", true)). That means an user is ok to choose another field after picking an option in the dropdownlist. But as soon as I pick one option, the error message will show up like This field is required (Even I already chose an option in that dropdown) and it blocks me from editing other fields. What's wrong with my code. 
Notice: I'm create a Batch Editing grid.
Thanks a lot!
 Here is a snippet of my code, please tell me if you want more details. 

                        @(Html.EJ().Grid<AtdChannel>("InlineGridSyncfusion")
                                   .Datasource(ds => ds.URL("/Atd/BatchDataSource").BatchURL(url).Adaptor(AdaptorType.UrlAdaptor))
           .AllowPaging()    /*Paging Enabled*/
           .AllowResizing()
           .AllowScrolling()
           .Query("new ej.Query().addParams('AtdId', " + atdId + ")")
           .AllowSorting()

                .EnableHeaderHover()

            .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.Batch); })
            .ToolbarSettings(toolbar =>
                {
                    toolbar.ShowToolbar().ToolbarItems(items =>
                    {
                        items.AddTool(ToolBarItems.Add);
                        //items.AddTool(ToolBarItems.Edit);
                        items.AddTool(ToolBarItems.Delete);
                        items.AddTool(ToolBarItems.Update);
                        items.AddTool(ToolBarItems.Cancel);
                    });
                })
    .Columns(col =>
    {

        col.Field("ChannelNumber").HeaderText("Channel #").Width(90).Add();
        col.Field("AtdChannelLocationLocation").HeaderText("AtdChannel Location").ValidationRules(v => v.AddRule("required"true)).EditType(EditingType.Dropdown).DataSource((List<object>)ViewData["atdLocation"]).Width(180).Add();
        col.Field("ChimChimLocationLocation").HeaderText("ChimChim Location").ValidationRules(v => v.AddRule("required"true)).Add();
}


PK Prasanna Kumar Viswanathan Syncfusion Team April 20, 2015 05:40 PM UTC

Hi Minh,



Query 1 : “Unable to add second in empty grid”

We have analyzed your query and we created a sample according to your code snippet . We can able to add the second row and it did not overlap the first row, So we unable to reproduce the issue. Could you able to share the controller code snippet with us?

We suspect that the issue is reproduced in the controller side. While adding second record, we request you to ensure the value of count incremented with added record while returning the datasource and also ensure that you able to get the on JSON data in the result. Please find the attached screenshot

For your convenience we have created a sample and sample can be downloaded from the below link

Please try the uploaded sample if you still face the same issue, Could you able to provide a sample for us?, it will helpful to provide a better solution

Query 2 : Filtering for some specific columns”

Your requirement have been achieved by the allowFiltering property in columns. We can remove the filtering feature for the specified column by setting AllowFiltering(false) in columns.

Please find the below code snippet :

.Columns(col =>

{

col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).AllowFiltering(false).Width(75).Add();

col.Field("CustomerID").HeaderText("Customer ID").AllowFiltering(false).ValidationRules(v => v.AddRule("required", true)).Width(80).Add();

col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).EditType(EditingType.Dropdown).DataSource((List<object>)ViewData["EmployeeID"]).ValidationRules(v => v.AddRule("required", true)).Width(75).Add();

col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(75).ValidationRules(v => v.AddRule("required", true)).Format("{0:C}").Add();

col.Field("ShipCountry").HeaderText("ShipCountry").EditType(EditingType.Dropdown).DataSource((List<object>)ViewData["ShipCountry"]).ValidationRules(v => v.AddRule("required", true)).Width(90).Add();

}))

For your convenience we have created a sample and sample can be downloaded from the below link :

Query 3 : “Validation is not working fine”

We able to reproduce the issue. We considered the requirement “Validation is not working fine in dropdown” as a bug. We have logged a report on this and will fix the issue internally, also the fix will be included in "Volume/ Service pack details, in which the fix will be included", which has been scheduled to be rolled out in the month of Apr 2015.

We will create an incident internally tomorrow to have a follow up with this issue and we will update the response on the incident

Sample Link : http://www.syncfusion.com/downloads/support/forum/118854/MVC5_Sample_-_Entityframework-1377549953.zip

Please let us know if you have any further assistance on this,

Regards,

Prasanna Kumar N.S.V




PK Prasanna Kumar Viswanathan Syncfusion Team April 21, 2015 11:20 AM UTC

Hi Minh,

Please ignore our last update regarding the query “Validation is not working fine

We considered this requirement “Validation is not working fine” as bug and a support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents

Regards,

Prasanna Kumar N.S.V



MI minh April 22, 2015 01:04 AM UTC

Here is my code in controller section. Please notice my grid is working just fine if the grid has a lot of rows. But it's not the case it has none or one row. I doubt the problem has something to do with the type of result. I got a mix between IEnumerable and IList here but I'm not sure.
        public ActionResult BatchDataSource(Syncfusion.JavaScript.DataManager dm, int? AtdId)
        {
            var DataSource1 = _context.AtdChannels.Where(x => x.AtdId == AtdId)
                     .Include(a => a.AtdChannelLocation)
                     .Include(c => c.ChimChimLocation)
                     .ToList();

            IList<AtdChannelSummaryViewModel> atdChannelSummaryList = DataSource1
                                        .Select(x => new AtdChannelSummaryViewModel().InjectFrom(x).InjectFrom<NullablesToNormal>(x)).Cast<AtdChannelSummaryViewModel>()
                                        .ToList();
            if (DataSource1.Any())
            {
                for (int i = 0; i < DataSource1.Count(); i++)
                {
                    atdChannelSummaryList[i].AtdId = AtdId ?? 0;
                    atdChannelSummaryList[i].AtdChannelLocationLocation = DataSource1[i].AtdChannelLocation.Location;
                    atdChannelSummaryList[i].ChimChimLocationLocation = DataSource1[i].ChimChimLocation.Location;

                }
            }


            var data = atdChannelSummaryList.Skip(dm.Skip).Take(dm.Take);
            var count = atdChannelSummaryList.Count;
            BatchDataResult result = new BatchDataResult();
            DataOperations obj = new DataOperations();
            result.result = obj.Execute(atdChannelSummaryList, dm);
            result.result = data;
            result.count = count;
            result.value = "Hai";
            return Json(result, JsonRequestBehavior.AllowGet);
        }


        public class BatchDataResult
        {
            public IEnumerable result { get; set; }
            public int count { get; set; }
            public string value { get; set; } 
        }


MI minh April 22, 2015 02:31 AM UTC

One more question: Can you please give a sample of applying bar filtering to a Batch Editing grid with multiple dropdownlists?  I have used Syncfusion just for a while so I need you much help. Thanks so much for your support.


SR Sellappandi Ramu Syncfusion Team April 22, 2015 02:06 PM UTC

Hi Minh,

We have created a support incident under your account. Please log on to our support website to check for better follow up on further updates.

https://www.syncfusion.com/account/login?ReturnUrl=%2fsupport%2fdirecttrac%2fincidents

Please let me know if you have any questions.

Regards,

Sellappandi R



KE kevin replied to Prasanna Kumar Viswanathan May 1, 2017 01:37 PM UTC

Hi Minh,

Thanks for the Patience

Query : I have the Grid, but it does not show content while using batch editing”

We have analyze your code snippet and we have created a sample according to the code snippet. While we use Include method, we cannot able to serialize the Json Data. So, we suspect that you have got the following error while rendering the grid . Please find the attached screen shot

We suspect that you have got the following error in the network tab. Please find the attached screen shot

The above mentioned issue is occurred due to circular reference occured in data and if you face the above mentioned error, you need to pick up the selected required field from the table by using select method. If we face any other issue while rendering the grid please attach a screen shot of the following error.

Please find the below code snippet :

result.result = DataSource.Cast<Order>().Select(x => new

{

OrderID = x.OrderID,

CustomerID = x.CustomerID,

EmployeeID = x.EmployeeID,

Freight = x.Freight,

Customer = new {

CustomerID = x.Customer.CustomerID,

}

});

For your convenience we have created a sample and sample can be downloaded from the below link :

Sample Link : http://www.syncfusion.com/downloads/support/forum/118854/MVC5_Sample_-_Entityframework227736936.zip

Please let us know if you have any further assistance on this,

Reference Link : http://blog.davebouwman.com/2011/12/08/handling-circular-references-asp-net-mvc-json-serialization/

Regards,

Prasanna Kumar N.S.V


Hello,
I am encountering an issue with circular reference error when trying to use the grid :
I have set the data source to the page model and it keeps showing this error
any help with this ?


PK Prasanna Kumar Viswanathan Syncfusion Team May 2, 2017 11:34 AM UTC

Hi Kevin, 

Query : “Circular reference error” 

The circular reference error is not a grid related issue. This occur when serializing the POCO entities which refers each other 

For example we consider the relationship between the entities Order and Customer. When the JSON serializer tries to serialize the entity object Orders with above relation it will try to serialize it`s relational object “Customers” and while traversing the “Customers” object it will again try to serialize the object “Orders”. So, it is like infinite loop while serialize the entity and causes the circular reference error.  
 
For more information, refer the below link 
 
 


Regards, 
Prasanna Kumar N.S.V

Loader.
Live Chat Icon For mobile
Up arrow icon