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

Export grid data on external action

Hi,

i would like to use the option from your KB article

But how to pass the filtered data from the grid's datasource
For example if i filter the data in the grid, i want to be able to export only the data that is displayed/filtered on the grid.
Not the entire datasource.

Thank you.

15 Replies

PK Prasanna Kumar Viswanathan Syncfusion Team July 22, 2016 10:33 AM UTC

Hi Sergio, 

Thanks for contacting Syncfusion support. 

Yes, we can export only the filtered data on the grid. After we filter the grid by default, the filtered column details will be stored on the filteredColumns property of filterSettings of Grid. So while exporting, it exports only the filtered data.     

Please find the screenshots and sample, 

 
 
Export to excel


 

If we have misunderstood your query, please confirm the below detail,   
 
1. Do you want to pass the grid DataSource from client-side to server-side?    

Regards, 
Prasanna Kumar N.S.V 
 



PR Pratura July 22, 2016 11:20 AM UTC

Thank you.

Yes, i want to pass the filtered data to web api controller.
I'm having trouble with this:
var gridObj = $("#Grid").ejGrid("instance");
 gridObj.export("/api/GridExport/ExcelExport);

It just hangs the entire VS untill i kill the process (no error)

I can however send the data with .ajax (the same uri as on gridObj.export
and it works but i don't know how to pass the gridModel data.

Your ExcelExport sub takes this param 
string gridModel = HttpContext.Current.Request.Params["GridModel"];

Can you please show me how to pass the grid model from .ajax method

Also, i can't see in the sample you provided where you assign the filteredColumns to export.
If you can explain it here on the thread.

Thank you.



PR Pratura July 26, 2016 08:10 AM UTC

Can you help me with this please


PK Prasanna Kumar Viswanathan Syncfusion Team July 26, 2016 01:00 PM UTC

Hi Pratura, 

      Queries 
                                   Response 

“Pass the filtered data to web api controller” 


We cannot use the ajaxPost for exporting the grid. So, if you need to pass the filtered data to the web api controller, we can do this by adding the additional parameter to the grid model and retrieving it at the server side. 
 
In the button click of exportGrid, using getFilteredRecords method we send the filteredRecords  along with the grid model and retrieve at the server side. 
 
Find the code example and sample: 
 
 
<input id="Export" value="Excel" class="e-exportbutton" /> 
<div class="content-container-fluid"> 
    <div class="row"> 
        <div class="cols-sample-area"> 
            <br /> 
            <div id="Grid"></div> 
        </div> 
    </div> 
</div> 
$(function () { 
        var gridData = @Html.Raw(Json.Encode(ViewBag.dataSource)) 
 
        $(".e-exportbutton").ejButton({ 
            click: "exportGrid" 
        }); 
        $("#Grid").ejGrid({ 
            dataSource: gridData, 
            allowPaging: true, 
            allowFiltering : true, 
            toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add] }, 
            columns: [ 
                        ---------------- 
 
            ] 
        }); 
    }); 
 
    function exportGrid(args) { 
 
        var gridObj = $("#Grid").ejGrid("instance") 
 
        gridObj.model["currentData"] = JSON.stringify(gridObj.getFilteredRecords()); 
 
        gridObj.export("/api/Orders/ExcelExport"); 
 
    } 
</script> 
 
---------------------------------------------------- 
 
public IEnumerable currentData; 
 
public void ExcelExport() 
        { 
            IEnumerable DataSource; 
            ExcelExport exp = new ExcelExport(); 
            string gridModel = System.Web.HttpContext.Current.Request.Params["GridModel"]; 
            GridProperties obj = ConvertGridObject(gridModel); 
            if (currentData.AsQueryable().Count() > 0) 
                DataSource = currentData; 
            else 
                DataSource = db.EmployeePhotoes.ToList(); 
            exp.Export(obj, DataSource, "Export.xlsx", ExcelVersion.Excel2010, false, false, "flat-saffron"); 
        } 
         
        private GridProperties ConvertGridObject(string gridProperty) 
        { 
            JavaScriptSerializer serializer = new JavaScriptSerializer(); 
            IEnumerable div = (IEnumerable)serializer.Deserialize(gridProperty, typeof(IEnumerable)); 
            GridProperties gridProp = new GridProperties(); 
            foreach (KeyValuePair<string, object> ds in div) 
            { 
                if (ds.Key == "currentData") 
                { 
                    ---------------- 
                    currentData = JsonConvert.DeserializeObject<IEnumerable<EmployeePhoto>>(str); 
                    continue; 
                } 
                var property = gridProp.GetType().GetProperty(ds.Key, BindingFlags.Instance | BindingFlags.Public | BindingFlags.IgnoreCase); 
                if (property != null) 
                { 
                    Type type = property.PropertyType; 
                    string serialize = serializer.Serialize(ds.Value); 
                    object value = serializer.Deserialize(serialize, type); 
                    property.SetValue(gridProp, value, null); 
                } 
            } 
            return gridProp; 
        } 
 



 i can't see in the sample you provided where you assign the filteredColumns to export” 


After we filter the grid the filtered column details will be stored on the filterColumns property of the gridmodel. While exporting we will pass the gridmodel as a parameter in export method. 

Find the code example: 


public void ExcelExport() 
        { 
            IEnumerable DataSource; 
            ExcelExport exp = new ExcelExport(); 
            string gridModel = System.Web.HttpContext.Current.Request.Params["GridModel"]; 
            GridProperties obj = ConvertGridObject(gridModel); 
            if (currentData.AsQueryable().Count() > 0) 
                DataSource = currentData; 
            else 
                DataSource = db.EmployeePhotoes.ToList(); 
            exp.Export(obj, DataSource, "Export.xlsx", ExcelVersion.Excel2010, false, false, "flat-saffron"); 
        } 

Using that gridmodel the grid data will be automatically filtered in the export method and it exports only the filtered data. 



Regards, 
Prasanna Kumar N.S.V 
 



PR Pratura July 27, 2016 10:06 AM UTC


When using ajaxPost my call went to the api action, but you say we cannot use ajax.

So when using the export method of the gridObj i get the following error without reaching the server api

 
Can you please help me with that?

This is my function:

 function exportToExcel(args) {   
            var gridObj = $("#MasterGrid").ejGrid("instance");
            //gridObj.model["currentData"] = JSON.stringify(gridObj.getFilteredRecords());
            gridObj.export("api/HUOUninsuredVehicles/ExcelExport");
        };  



PK Prasanna Kumar Viswanathan Syncfusion Team July 28, 2016 12:46 PM UTC

Hi Pratura, 

According to the screenshot we suspect that you are using server-side wrapper in your sample.  

Please share the following details. 

1. Are you using JS Grid or ASP Grid in your sample? 

2. Code example of a Grid. 

3. Essential Studio Version details. 

Regards, 
Prasanna Kumar N.S.V. 



PR Pratura July 28, 2016 02:25 PM UTC

1. I'm using JS grid
2. <div id="MasterGrid"></div>
$.ajax({
                url: 'api/HUOUninsuredVehicles/GetMasterData', dataType: "json", success: function (jsonData) {
                    $("#MasterGrid").ejGrid({
                        dataSource: jsonData, allowScrolling: true, allowTextWrap: true, allowSorting: true, enableRowHover: true, allowFiltering: true, filterSettings: { showPredicate: true,                               filterType: "excel" }, rowSelected: "onRowSelect",
                        scrollSettings: { width: 1050, height: 500, allowVirtualScrolling: true, virtualScrollMode: "continuous" }, 
                        columns: [                               
                                { field: "Konto", headerText: "Konto", textAlign: "right", width: 90, format: "{0:N2}" },
                                { field: "FullName", headerText: "Agent", textAlign: "left", width: 160 }]
                    });
                }
            });
3. Version14.2460.0.26

Another question please.
ejDropDownList with the properties itemsCount: 20, enableFilterSearch: true, allowVirtualScrolling: true, virtualScrollMode: "continuous"
When performing a search within the dropdownlist (enableFilterSearch) it doesn't show the data that is not yet loaded by virtualscrolling
Is there a way to search for that data, but not loading the entire dropdown dataSource?

Thank you.



PK Prasanna Kumar Viswanathan Syncfusion Team July 29, 2016 09:47 AM UTC

Hi Pratura,                            

In previous update you have mentioned that you are using JS Grid in your sample. The mentioned issue occurs due to reference of the ej.webform.min.js file.  
 
To perform server side operation in ASP.NET Grid we need to refer the particular script file. So, we do not need to refer the ej.webform.min.js script file in the sample as you are using JS grid. 
 
Please find the sample: 

               
Regards, 
Prasanna Kumar N.S.V 
 



PR Pratura July 29, 2016 12:51 PM UTC

Thank you.

I have removed the reference ej.webform.min.js but I am still getting the same error.
The error is in ej.web.all.min.js though.

Is there anything else i can do?



PK Prasanna Kumar Viswanathan Syncfusion Team July 29, 2016 12:51 PM UTC

Hi Pratura,       

Please ignore the previous update.                      

In previous update you have mentioned that you are using JS Grid in your sample. The mentioned issue occurs due to reference of the ej.webform.min.js file.  
 
To perform server side operation in ASP.NET Grid we need to refer the particular script file. So, we do not need to refer the ej.webform.min.js script file in the sample as you are using JS grid. 
 
Please find the sample: 
 
                
Query : Is there a way to search for that data, but not loading the entire dropdown dataSource? 
 
We can achieve the reported scenario in DropDownList. For that please check the below link.  
  

Regards, 
Prasanna Kumar N.S.V 
 



PK Prasanna Kumar Viswanathan Syncfusion Team August 1, 2016 12:05 PM UTC

Hi Pratura, 
We checked with our sample and we did not face any script error in the ej.web.all.min.js while exporting to PDF. 
Please provide the following details. 
1. Share the screenshot of an issue. 
2. Provide the stackrace of an issue. 
3. If possible, reproduced the issue in the attached sample. 
Regards, 
Prasanna Kumar N.S.V 



BR Benjamín Rivero Cruz July 13, 2018 08:22 PM UTC

Hi, I check this thread because I have a similar problem... I understand how can I receive the data, passing as aditional value and receive this on the controller side. 

My problem is this... the data that comes from the grid doesn't belong to a declared Type... because on my grid using javascript I add columns dynamic, so I dont know what is the final structure of the JSON string... 

The question is, can i create an IEnumerable from a Json maybe like this... 

IEnumerable<object> or IEnumerable<dynamic>  using... JsonConvert.DeserializeObject(jsonString) 

I already try this, but not work... I can't create an Excel from a dynamic grid. Any suggestions? 


VN Vignesh Natarajan Syncfusion Team July 16, 2018 10:28 AM UTC

Hi Benjamin, 

Thanks for using Syncfusion products. 

According to your query you need to export the Grid with dynamic list. We have already discussed this topic in our knowledge base section.  

Kindly refer the below link for the Knowledge base document. 


Please get back to us if you have further queries.   

Regards, 
Vignesh Natarajan. 



BR Benjamín Rivero Cruz July 16, 2018 05:33 PM UTC

Thanks... that's exactly wat was looking for... Works great!!!!


VN Vignesh Natarajan Syncfusion Team July 17, 2018 04:17 AM UTC

Hi Benjamin, 

Thanks for the update. 

We are glad to hear that your query has been resolved by our solution. 

Please get back to us if you have further queries. 

Regards, 
Vignesh Natarajan  
  


Loader.
Up arrow icon