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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to add Export Features and third level child grid

Thread ID:

Created:

Updated:

Platform:

Replies:

125122 Jul 22,2016 02:00 PM Jul 26,2016 09:35 AM JavaScript 1
loading
Tags: ejGrid
Martin
Asked On July 22, 2016 02:00 PM

1.From my code How can i complete this code to add Export features like (Excel-Pdf-Word) .

2.From my code how can i add third level child grid (i already had 2 level)

Thank you.

Here's my code:

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

<script type="text/javascript">
    // the datasource
    var dataManger2 = ej.DataManager({

        url: "http://mvc.syncfusion.com/Services/Northwnd.svc/Customers/"
  
    });
    var dataManger = ej.DataManager({

        url: "http://mvc.syncfusion.com/Services/Northwnd.svc/Orders/"

    });


    $("#Grid").ejGrid({
        toolbarSettings: {
            showToolbar: true,
            toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel]
        },
        dataSource: dataManger2,
        allowPaging: true,
        allowFiltering: true,
        allowSorting: true,
        allowSearching: true,
        editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
        filterSettings : {
            filterType: "filterbar"
        },


        childGrid: {
            dataSource: dataManger,
            queryString: "CustomerID",
            allowPaging: true,
            allowFiltering: true,
            allowSorting: true,
            filterSettings : {
                filterType: "menu"
            },
            pageSettings: {
                pageSize: 5
            },
            columns: [
                { field: "OrderID", headerText: 'Order ID', textAlign: ej.TextAlign.Center, width: 85 },
                { field: "ShipCity", headerText: 'Ship City', textAlign: ej.TextAlign.Center, width: 100 },
                { field: "Freight", format: "{0:C2}", headerText: 'Freight', textAlign: ej.TextAlign.Center, width: 120 },
                { field: "ShipName", headerText: 'Ship Name', textAlign: ej.TextAlign.Center, width: 100 }
            ]
        },
        columns:
            [
              
                { field: "CustomerID", headerText: 'Customer ID', textAlign: ej.TextAlign.Center, width: 85 },
                { field: "CompanyName", headerText: 'Company Name', textAlign: ej.TextAlign.Center, width: 100 },
                { field: "ContactName", headerText: 'Contact Name', textAlign: ej.TextAlign.Center, width: 120 },
                { field: "City", headerText: 'City', textAlign: ej.TextAlign.Center, width: 100 },
                { field: "Country", headerText: 'Country', textAlign: ej.TextAlign.Center, width: 100 }
            ]
    });
  
</script>

Prasanna Kumar Viswanathan [Syncfusion]
Replied On July 26, 2016 09:35 AM

Hi Martin, 

Thanks for contacting Syncfusion support. 

        Queries 
                                    Response 

how can i add third level child grid” 


Similar to the second level child grid, we can add third level child grid. 

Find the code example: 


$("#Grid").ejGrid({ 
                dataSource: data, 
                allowSorting: true, 
                columns: [ 
                         ------------------------------------------------ 
                ], 
                childGrid: { 
                    dataSource: dataManger, 
                    queryString: "EmployeeID", 
                    allowPaging: true, 
                    columns: [ 
                             -------------------------------- 
                    ], 
                    childGrid: { 
                        dataSource: dataManger2, 
                        queryString: "CustomerID", 
                        columns: [ 
                                 ------------------------------------- 
                        ], 
                    }, 
                }, 

Sample: 


How can i complete this code to add Export features like (Excel-Pdf-Word)” 


Currently we do not have exporting support for the HierarchyGrid.  But we have exporting for the normal grid. 
 
In this sample exporting is achieved by using server-side controller action method. In controller method, Grid property is passed as string parameter, you need to deserialize it into the Grid Property. By using the Export server method of ExcelExport class, you can export the Grid into excel, PDF and word documents. 

Find the code example and sample: 


<input id="Export" value="Excel" class="e-exportbutton" /> 
<input id="Export" value="Word" class="e-exportbutton" /> 
<input id="Export" value="PDF" class="e-exportbutton" /> 

$("#Grid").ejGrid({ 
          dataSource: gridData, 
          allowPaging: true, 
                columns: [ 
                         { field: "OrderID", headerText: "Order ID" }, 
                         { field: "CustomerID", headerText: "Customer ID" } 
                ], 
 
            }); 
 
      }); 
 
    function exportGrid(args) { 
 
        var gridObj = $("#Grid").ejGrid("instance"); 
 
        var action = args.model.text + "Export"; 
 
        gridObj.export("/Grid/" + action); 
 
    } 
 
------------------------------------------- 

public void ExcelExport() 
        { 
            ExcelExport exp = new ExcelExport(); 
            string gridModel = System.Web.HttpContext.Current.Request.Params["GridModel"]; 
            var DataSource = new NorthwindDataContext().OrdersViews.Take(100).ToList(); 
            GridProperties obj = ConvertGridObject(gridModel); 
            exp.Export(obj, DataSource, "Export.xlsx", ExcelVersion.Excel2010, false, false, "flat-saffron"); 
        } 


Refer to the Help document for the exporting 




Regards, 
Prasanna Kumar N.S.V 
 


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

;