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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Export Grid by using API

Thread ID:

Created:

Updated:

Platform:

Replies:

125182 Jul 28,2016 06:43 AM UTC Aug 4,2016 12:15 PM UTC ASP.NET Web Forms 3
loading
Tags: Grid
Martin Sickel
Asked On July 28, 2016 06:43 AM UTC

Dear All

I try to export my grid data, I have the following challenges I was not able to find a solution by myself

I setup an Grid in my aspx page like this:

       <div id="mainTable" class="divMainGrid">
            <ej:Grid ID="mainGrid" Locale="de-DE" ClientIDMode="Static" AllowSorting="true" AllowScrolling="True" AllowFiltering="False" AllowTextWrap="True" 
                AllowPaging="true" AllowSearching="true" AllowResizing="true" EnableRowHover="False" OnServerExcelExporting="mainGrid_ServerExcelExporting"
                OnServerEditRow="mainGrid_ServerEditRow" IsResponsive="true" ShowDeleteConfirmDialog="true" AllowResizeToFit="true" runat="server">
                <DataManager Adaptor="WebApiAdaptor" Offline="true" URL="api/main" />
                <Columns>
                    <ej:Column Field="PHONENUMBER" HeaderText="PHONENUMBER" IsPrimaryKey="True" TextAlign="Right" Width="100">
                    </ej:Column>
                    <ej:Column Field="COUPLED_PHONENUMBER" HeaderText="COUPLED_PHONENUMBER" IsPrimaryKey="True" Width="100">
                </Columns>
                <ClientSideEvents ToolbarClick="onToolBarClick" />
                <ScrollSettings Height="660" Width="auto" />
                <ToolbarSettings ShowToolbar="True" ToolbarItems="excelExport,search,edit,cancel"></ToolbarSettings>
                <PageSettings PageSize="18" />
                <EditSettings AllowEditing="True" EditMode="DialogTemplate" DialogEditorTemplateID="#manual_reservation_template"></EditSettings>
                <SelectionSettings EnableToggle="true" />
                <FilterSettings FilterBarMode="Immediate" ShowFilterBarStatus="True" StatusBarWidth="300" FilterType="FilterBar"></FilterSettings>
            </ej:Grid>
        </div>


the data will be come by WebAPI, this works as expected.


Now I would export the data.


I tried this but was not able to find the correct way.

        protected void mainGrid_ServerExcelExporting(object sender, Syncfusion.JavaScript.Web.GridEventArgs e)
        {
            ExcelExport exp = new ExcelExport();
            exp.Export(mainGrid.Model, (IEnumerable)mainGrid.DataManager.URL, "Export.xlsx", ExcelVersion.Excel2013, true, true, "flat-lime");
        }
 
In the export function itself I have no idea what I have to give as a second parameter, I can't set the mainGrid.DataSource because it is null, so what do I need to set here?


Thanks
Martin




Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On July 29, 2016 12:40 PM UTC

  
Hi Martin, 

Thanks for your interest in Syncfusion products. 

Since you have bound the remote data for the Grid, you cannot get the dataSource in the Grid instance. So we have suggest to handle the dataSource value for the export method explicitly.  

In two ways, you can assign a dataSource for the export method. You can define the datasource variable explicitly as shown in the following code example. We have assigned the same data to the export method as assigned to the Grid in the WebApi method. 

    <ej:Grid ID="Grid" runat="server" AllowPaging="true" 
        OnServerWordExporting="Grid_ServerWordExporting" 
        OnServerPdfExporting="Grid_ServerPdfExporting" 
        OnServerExcelExporting="Grid_ServerExcelExporting"> 
 
        <ToolbarSettings ShowToolbar="true" ToolbarItems="excelExport,wordExport,pdfExport"></ToolbarSettings> 
         
        <DataManager Adaptor="WebApiAdaptor" URL="/api/Orders" /> 
           . . .  
    </ej:Grid> 
 
    public class OrdersController : ApiController 
    { 
        // GET api/<controller> 
        NorthWndDataContext db = new NorthWndDataContext(); 
        public object Get() 
        { 
         . . .. .  
            var data = db.Orders; 
            return new { result = data.Skip(skip).Take(take), count = data.Count() }; 
        }  
         . . .  
    } 
 
 
    public partial class _Default : Page 
    { 
        NorthWndDataContext db = new NorthWndDataContext(); 
        protected void Page_Load(object sender, EventArgs e) 
        { 
            
        } 
        protected void Grid_ServerExcelExporting(object sender, Syncfusion.JavaScript.Web.GridEventArgs e) 
        { 
            ExcelExport exp = new ExcelExport(); 
            exp.Export(Grid.Model, (IEnumerable)db.Orders, "Export.xlsx", ExcelVersion.Excel2010, true, true, "flat-lime"); 
        } 
          . . .  
    } 

Or else you can get the data that bound to the Grid using the Grid model and export them as shown in the following code example. In the Load event, we have spliced the dataSource from the ignoreOnExport array, which will include the dataSource on the Grid model while Exporting and it can be used for exporting the Grid as server end.  

    <ej:Grid ID="Grid" runat="server" AllowPaging="true" 
        OnServerWordExporting="Grid_ServerWordExporting" 
        OnServerPdfExporting="Grid_ServerPdfExporting" 
        OnServerExcelExporting="Grid_ServerExcelExporting"> 
 
        <ToolbarSettings ShowToolbar="true" ToolbarItems="excelExport,wordExport,pdfExport"></ToolbarSettings> 
 
        <DataManager Adaptor="WebApiAdaptor" URL="/api/Orders" Offline="true" /> 
           ..  . .  
        <ClientSideEvents Load="onLoad" /> 
    </ej:Grid> 
 
    <script> 
        function onLoad(args) { 
            this.ignoreOnExport.splice(this.ignoreOnExport.indexOf('dataSource'), 1); 
        } 
    </script> 
 
    public partial class _Default : Page 
    { 
        IEnumerable<Order> currentData; 
            . . . .  
        protected void Grid_ServerExcelExporting(object sender, Syncfusion.JavaScript.Web.GridEventArgs e) 
        { 
            ExcelExport exp = new ExcelExport(); 
            string gridmodel = (string)e.Arguments.ToList()[0].Value; //collect the grid model 
             ConvertGridObject(gridmodel); //iterate and find the dataSource  
             exp.Export(Grid.Model, currentData, "Export.xlsx", ExcelVersion.Excel2010, true, true, "flat-lime"); 
        } 
        private void 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) 
            { 
 
                //Check and retrieve additional property here 
                if (ds.Key == "dataSource") 
                { 
                    foreach (KeyValuePair<string, object> data in (dynamic)ds.Value) 
                    { 
                        if (data.Key == "dataSource") { 
                            foreach (KeyValuePair<string, object> data1 in (dynamic)data.Value) 
                            { 
                                if (data1.Key == "json") { 
                                    string serial = serializer.Serialize(data1.Value); 
                                    currentData = JsonConvert.DeserializeObject<IEnumerable<Order>>(serial); 
                                    break; 
                                } 
 
                            } 
                        } 
                    } 
                    // 
                    break; 
                } 
            } 
        } 
    } 

We have prepared a sample that can be downloaded from the following location. 


Regards, 
Seeni Sakthi Kumar S. 


Martin Sickel
Replied On August 3, 2016 06:36 AM UTC

Hi Seni

I have implemented the provided solution, but I am not able to get it working. In debug mode I can see that the data is there, but I end up with an error message.

Value cannot be null.
Parameter name: value

I add the code, maybe you can have a look what I am doing wrong.

Martin 

Attachment: SYNC_GRIDExportTest_e9f2c126.zip

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On August 4, 2016 12:15 PM UTC

Hi Chris,  

We are able to reproduce the problem with the provided sample. The cause of the problem is Key Value of the SearchSettings is not defined at the client end and on exporting the Grid Key with “null” value throws an exception. So we have modified our solution as follows. 

            <ej:Grid ID="mainGrid" ClientIDMode="Static" runat="server"> 
               . .   
            </ej:Grid> 
 
        protected void mainGrid_ServerExcelExporting(object sender, Syncfusion.JavaScript.Web.GridEventArgs e) 
        { 
            try 
            { 
                ExcelExport export = new ExcelExport(); 
                string gridmodel = (string)e.Arguments.ToList()[0].Value; //collect the grid model  
                GridProperties gridProp = ConvertGridObject(gridmodel); //iterate and find the dataSource   
                export.Export(gridProp, (IEnumerable)currentData, "Export.xlsx", ExcelVersion.Excel2010, true, true, "flat-lime"); 
            } 
            catch (Exception exp) 
            { 
 
            } 
        } 
 
        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) 
            { 
 
                //Check and retrieve additional property here  
                if (ds.Key == "dataSource") 
                { 
                     . . . . . . . 
                } 
                else { 
                    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; 
        } 

Instead of passing the code behind Grid model to export method, we suggest to pass the grid model retrieved from client-side after deserializing them using the ConvertToGridObject(). Now ConvertToGridObject(), retrieves the dataSource as well as the grid model for export method. 

We have modified your sample that can downloaded from the following location. 


Regards, 
Seeni Sakthi Kumar S.  


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.

Warning Icon 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.Close Icon

;