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
  1. Home
  2. Forum
  3. jQuery
  4. How to add Export Features and third level child grid

How to add Export Features and third level child grid

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>

1 Reply
PK Prasanna Kumar Viswanathan Syncfusion Team July 26, 2016 01:35 PM UTC

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 
 


Loader.
Up arrow icon