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

Demo data not downloading ...

I've started experimenting today for the first time with Syncfusion CORE controls,  specifically the Grid component.  Your Demo code shows a call to one of your services to get Northwind data:

<e-datamanager url="//mvc.syncfusion.com/Services/Northwnd.svc/Orders/?$top=45" offline="true"></e-datamanager>

However, I get no data returned.  Manual URL in the browser returns a large amount of JSON data, so I know it is there.  Is the example correct with the e-datamanager URL?  Also, what databinding do I use to use model information returned by the controller? Eg, List<Units>... I cannot see much info in the demo section. Perhaps there is a document I should download?

10 Replies

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team December 22, 2016 01:39 PM UTC

Hi Jim, 
 
In the following Help Document, Grid is bound with a remote dataSource but with an offline API (in DataManager) as true. It will allow the Grid to collect all the data at the initial load. So there is no need for the server-side paging. 
 
 
To perform the server-side paging, remove the offline as false (by default offline will be set to true). Refer to the following code example which will work on the on-demand concept. 
 
<ej-grid id="Grid" allow-filtering="true" allow-paging="true" selected-row-index="0"> 
    <e-datamanager url="//mvc.syncfusion.com/Services/Northwnd.svc/Orders" cross-domain="true" /> 
           .. .  
 
</ej-grid> 
 
 
Moreover, Grid also provides an option to bind the data from the controller end where you can perform the server-end data operations. This can be achieved using the URL Adaptor. Refer to the following code example. 
 
<ej-grid id="Grid" allow-paging="true" allow-sorting="true"> 
    <e-datamanager url="/Home/AdrTypDataAll" adaptor="UrlAdaptor" /> 
    <e-columns> 
        <e-column field="ID" header-text="TitelID"></e-column> 
        <e-column field="AdresseTyp" header-text="AdrTyp Kurz" text-align=Left></e-column> 
        <e-column field="CustomerID" header-text="Customer ID" text-align=Left></e-column> 
    </e-columns> 
</ej-grid> 
 
        public ActionResult AdrTypDataAll([FromBody]DataManager dm) 
        { 
            IEnumerable DataSource = order; 
            DataOperations ds = new DataOperations(); 
            int count = DataSource.Cast<Orders>().ToList().Count();//count 
            if (dm.Skip != null) 
                DataSource = ds.PerformSkip(DataSource, dm.Skip); 
            if (dm.Take != null) 
                DataSource = ds.PerformTake(DataSource, dm.Take); 
            return Json(new { result = DataSource, count=count }); 
        } 
 
 
Refer to the following KB for DataOperations and its APIs. 
 
 
Like UrlAdaptor, we do provide support for other adaptors. 
 
 
We have prepared a sample that can be downloaded from the following location. 
 
 
Regards, 
Seeni Sakthi Kumar S. 



TM Todd M January 19, 2017 09:04 PM UTC

I have the exact problem stated by Jim G. The examples listed above all create an instance of the grid but no data is populated in the grid. I attempted the example from the online help as Jim G. did, then applied the correction suggested (remove offline="true">, finally I inserted all the code from the downloadable sample shown above (F1279621259632882) all to no avail. I get grids but no data. FYI - The sample code has a couple flaws :

if (dm.Skip != null)
                DataSource = ds.PerformSkip(DataSource, dm.Skip);
            if (dm.Take != null)
                DataSource = ds.PerformTake(DataSource, dm.Take);

Shows the warning - The result of the expression is always 'true' since a value of type 'int' is never equal to 'null' of type 'int?'

And the _ViewImports file has a using statement (@using ejGridASPCore) that cannot be found.

I am using Asp.Net Core 14.4.0.20 is there a newer modification to the examples that I can use?



SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team January 20, 2017 09:37 AM UTC

Hi Todd, 
 
We are unable to reproduce any problem with attached sample. We have checked the sample with v14.4.0.15 as well as v14.4.0.20. The updated sample can be downloaded from the following location. 
 
 
Query #1 Shows the warning - The result of the expression is always 'true' since a value of type 'int' is never equal to 'null' of type 'int?' 
 
We are sorry for the inconvenience. We have modified the solution as follows.  
 
         
        public ActionResult AdrTypDataAll([FromBody]DataManager dm) 
        { 
            IEnumerable DataSource = order; 
            DataOperations ds = new DataOperations(); 
            int count = DataSource.Cast<Orders>().ToList().Count();//count 
            if (dm.Skip >= 0) 
                DataSource = ds.PerformSkip(DataSource, dm.Skip); 
            if (dm.Take > 0) 
                DataSource = ds.PerformTake(DataSource, dm.Take); 
            return Json(new { result = DataSource, count=count }); 
        } 
 
Query #2: the _ViewImports file has a using statement (@using ejGridASPCore) that cannot be found. 
 
ejGridASPCore is the namespace which has been defined in the Program.cs as well as the Startup.cs of the application. 
 
If you are still facing any problem, please share the following details to analyze the problem at our end. 
 
1)      Code example of the Grid and code behind 
2)      Stack trace of browser console (if any error) 
3)      Screenshot with replication procedure for the issue 
4)      Check whether the URL Path given to the Grid is correct 
5)      If possible, modify the attached sample and replicate issue 
 
Regards, 
Seeni Sakthi Kumar S. 



TM Todd M January 20, 2017 02:04 PM UTC

The Asp.Net Core Getting Started document had this reference :

<script src="~/lib/syncfusion-javascript/Scripts/jsrender.min.js"></script>

I replaced it with:

<script src="~/lib/jsrender/jsrender.js"></script>

The grid now populates


TM Todd M January 20, 2017 10:11 PM UTC

Now that I have the grid populated none of the options work. I can't sort, filter or group. If I switch the data source to : 

<e-datamanager url="//mvc.syncfusion.com/Services/Northwnd.svc/Orders/?$top=45" offline="false"></e-datamanager> 

I can sort, filter and group but not edit, insert or delete. Is there reference material that you can point me to so that I can implement the grid without having to ask for guidance? 

I found the information for a responsive grid but it doesn't seem to have a data source, the code is written in razor (not tag helpers) and there is no controller code to follow.


SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team January 23, 2017 01:39 PM UTC

Hi Todd, 
 
In the following source, sorting/filtering/paging actions will be handled but not the CRUD actions.  
 
 
So it will not Update/Delete/Add the records in the Grid as well as in the dataSource. However, to handle CRUD operations in the Grid, DataManager provides.  
 
To handle the server end CRUD actions, you have to update the CRUD urls in the Grid and they must be handled in the server as well. At the same time, you have to enable the AllowEditing, AllowDeleting and AllowAdding property of the Grid EditSettings. Refer to the following code example and Help Documents. 
 
<ej-grid id="Grid" allow-paging="true" allow-sorting="true" allow-filtering="true"> 
    <e-datamanager url="/Home/AdrTypDataAll"  
            update-url="/Home/CellEditUpdate"  
            insert-url="/Home/CellEditInsert"  
            remove-url="/Home/CellEditDelete" adaptor="UrlAdaptor" /> 
    <e-edit-settings allow-adding="true" allow-deleting="true" allow-editing="true" /> 
    <e-toolbar-settings show-toolbar="true" toolbar-items=@(new List<string>() 
{ "add","edit","delete","update","cancel" })> 
    </e-toolbar-settings> 
      . . . 
            . . . 
</ej-grid> 
 
        public ActionResult CellEditUpdate([FromBody]CRUDModel<Orders> value) 
        { 
            var ord = value.Value; 
            Orders val = order.Where(or => or.ID == ord.ID).FirstOrDefault(); 
            val.ID = ord.ID; 
            val.EmployeeID = ord.EmployeeID; 
            val.CustomerID = ord.CustomerID; 
            val.Freight = ord.Freight; 
            val.OrderDate = ord.OrderDate; 
            val.AdresseTyp = ord.AdresseTyp; 
 
            return Json(value.Value); 
        } 
        public ActionResult CellEditInsert([FromBody]CRUDModel<Orders> value) 
        { 
            value.Value.ID = order.LastOrDefault().ID + 1; 
            order.Insert(0, value.Value); 
            return Json(value.Value); 
        } 
        public ActionResult CellEditDelete([FromBody]CRUDModel<Orders> value) 
        { 
            order.Remove(order.Where(or => or.ID == int.Parse(value.Key.ToString())).FirstOrDefault()); 
            return Json(value); 
        } 
 
 
 
For showcase purpose and to focus the titled feature (Responsive) in this help Document https://help.syncfusion.com/aspnet-core/grid/responsive, we have given them with the local dataSource. However, you may bind the remote dataSource in the responsive Grid as shown in the following code example. 
 
 
<ej-grid id="Grid" allow-paging="true" is-responsive="true" min-width="400" > 
    <e-datamanager url="/Home/AdrTypDataAll" adaptor="UrlAdaptor" /> 
</ej-grid> 
 
        public ActionResult AdrTypDataAll([FromBody]DataManager dm) 
        { 
            IEnumerable DataSource = order; 
            DataOperations ds = new DataOperations(); 
              . ..  
         . .. . .  
            return Json(new { result = DataSource, count=count }); 
        } 
 
Regards, 
Seeni Sakthi Kumar S. 



TM Todd M January 23, 2017 07:40 PM UTC

I am using your modified solution and then adding the additional code but I still cannot get the grid to sort or filter. Edit, insert and update also do not work.

I need a single example of a grid that sorts, filters, edit, updates, inserts and exports.



SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team January 24, 2017 09:22 AM UTC

Hi Todd,  
 
We have prepared a sample with the Exporting, CRUD operations and sorting/filtering features that can be downloaded from the following location. 
 
 
Export the sample from the localhost:xxxx/Home/Index. 
 
Enable the required Exporting items in the ToolbarItems of Grid ToolbarSettings and also assign a server-side method for corresponding Exporting action as follows.  
 
<ej-grid id="Grid" allow-paging="true" allow-sorting="true" > 
    <e-toolbar-settings show-toolbar="true" toolbar-items=@(new List<string>() 
        { "excelExport","wordExport" })> 
    </e-toolbar-settings> 
       . . . 
             . . . 
</ej-grid> 
 
        public ActionResult ExportToExcel(string GridModel) 
        { 
            ExcelExport exp = new ExcelExport(); 
            var DataSource = order.ToList(); 
            GridProperties gridProp = ConvertGridObject(GridModel); 
            GridExcelExport excelExp = new GridExcelExport(); 
            excelExp.FileName = "Export.xlsx"; 
            excelExp.Excelversion = ExcelVersion.Excel2010; 
            excelExp.Theme = "flat-saffron"; 
            return exp.Export(gridProp, DataSource, excelExp); 
        } 
 
        .. . . 
                . . . 
            
        private GridProperties ConvertGridObject(string gridProperty) 
        { 
            GridProperties gridProp = new GridProperties(); 
            gridProp = (GridProperties)JsonConvert.DeserializeObject(gridProperty, typeof(GridProperties)); 
            return gridProp; 
        } 
 
Refer to the following Help Document. 
 
 
We have explained the functionalities of the Sorting/Filtering actions along with the CRUD operations in our previous update. The given sample has been prepared with the URLAdaptor which will retrieve the data from the Controller page which is completely different from the following Help Document. 
 
 
In this document, data has been retrieved from the Online Odata service (http://mvc.syncfusion.com/Services/Northwnd.svc/Orders/), which will never handle the CRUD operations but it will handle the basic actions like filtering/sorting. If you would like to know more about the Data Adaptors, please refer to the following Help Document. 
 
 
If you are still facing any problem, please replicate the issue in the given sample and send back to us which would be helpful to analyze the problem at our end. 
  
Regards, 
Seeni Sakthi Kumar S. 
 



TM Todd M January 25, 2017 09:26 PM UTC

Ok adding:

if (dm.Sorted != null)
                DataSource = ds.PerformSorting(DataSource, dm.Sorted);
            if (dm.Where != null)
                DataSource = ds.PerformWhereFilter(DataSource, dm.Where, dm.Where[0].Condition);

enabled sorting and filtering.

I also had to add:

<ej-grid id="Grid" export-to-excel-action="/Home/ExportToExcel" export-to-pdf-action="/Home/ExportToPdf" export-to-word-action="/Home/ExportToWord"...>

to get the exporting to work.

I also had to change pdf theme to "none" from "saffron-flat" to resolve an error being thrown. 




SA Saravanan Arunachalam Syncfusion Team January 26, 2017 11:14 AM UTC

Hi Todd, 
We understood you need to export the Grid with default theme instead of flat-saffron and we suggest you to just remove the excelExp.Theme = "flat-saffron" from the Export Action method. If we are not specify the Theme name, it will export the Grid with “default-theme”. 
Regards, 
Saravanan A.  


Loader.
Up arrow icon