Help using expandAll on create of ejgrid

[rodwin]

Hi,

I would like to expand all rows by default so i used the create event to trigger expandAll but its not working.

html:

                <div style="">

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

                </div>

                <script id="tabGridContents" type="text/x-jsrender">

                    <div class="tabcontrol" id="Test">

                        <ul>

                            <li><a rel='nofollow' href="#detailChart{{:EmployeeID}}">Stock Chart</a></li>

                            <li><a rel='nofollow' href="#gridTab{{:EmployeeID}}">Stock Grid</a></li>

                        </ul>

                        <div id="detailChart{{:EmployeeID}}">

                        </div>

                        <div id="gridTab{{:EmployeeID}}">

                            <div id="detailGrid">

                            </div>

                        </div>

                    </div>

                </script>

js:

$(function () {

        

        $("#splitter").ejSplitter({

            height: $("body").height()-100, width: "100%",

            enableAnimation: true,

            orientation: ej.Orientation.Horizontal,

            animationSpeed: 300,

            enableAutoResize: true,

            properties: [{}, { paneSize: "70%",collapsible: true}]

        });

        $("#Grid").ejGrid({

            // the datasource "window.employeeView" is referred from jsondata.min.js

            dataSource: ej.DataManager({ url: "/TherapyLog/Data", adaptor: new ej.UrlAdaptor(), offline: true }),

            detailsTemplate: "#tabGridContents",

            detailsDataBound: "detailGridData",

            create: "onCreate",

            columns: [

                      { field: "EmployeeID", headerText: 'Employee ID', textAlign: ej.TextAlign.Right, width: 75 },

                      { field: "FirstName", headerText: 'First Name', textAlign: ej.TextAlign.Left, width: 100 },

                      { field: "Title", headerText: 'Title', textAlign: ej.TextAlign.Left, width: 120 },

                      { field: "City", headerText: 'City', textAlign: ej.TextAlign.Left, width: 100 },

                      { field: "Country", headerText: 'Country', textAlign: ej.TextAlign.Left, width: 100 }

            ]

        });

        $('#btnExpandAll').click(function() {

            

            var gridObj = $("#Grid").data("ejGrid");

            // Expand all the group caption rows

            gridObj.expandAll();

        });

        $('#btnCollapseAll').click(function () {

            var gridObj = $("#Grid").data("ejGrid");

            // Expand all the group caption rows

            gridObj.collapseAll();

        });

    });

    function onCreate(args) {

        

        this.expandAll();

        this.getHeaderContent().hide();

    }

        function detailGridData(e) {

            var filteredData = e.data["EmployeeID"];

            // the datasource "window.ordersView" is referred from jsondata.min.js

            var data = ej.DataManager({ url: "/TherapyLog/Data", adaptor: new ej.UrlAdaptor() }).executeQuery(ej.Query().where("EmployeeID", "equal", parseInt(filteredData), true));

            e.detailsElement.find("#detailGrid").ejGrid({

                dataSource: data,

                allowSelection: false,

                columns: [

                        { field: "OrderID", isPrimaryKey: true, headerText: "Order ID", width: 80, textAlign: ej.TextAlign.Right },

                        { field: "CustomerID", headerText: 'Customer ID', width: 80, textAlign: ej.TextAlign.Left },

                        { field: "CompanyName", headerText: 'Company Name', width: 120, textAlign: ej.TextAlign.Left },

                        { field: "ShipCity", headerText: 'City', width: 120, textAlign: ej.TextAlign.Left },

{ field: "Freight", headerText: 'Freight', width: 90, textAlign: ej.TextAlign.Right }

                ]

            });

            e.detailsElement.css("display", "");

            e.detailsElement.find("#detailChart" + filteredData).ejChart(

    {

        chartArea:

                     {

                         border: { width: 1 }

                     },

        primaryXAxis:

        {

            rangePadding: 'Additional',

            labelRotation: 45,

            title: { text: "City" }

        },

        primaryYAxis:

         {

             title: { text: "Sales in Millions" }

         },

        series: [{

            name: 'Country', type: 'column',

            enableAnimation: true,

            dataSource: data,

            xName: "ShipCity",

            yName: "Freight",

            fill: "#69D2E7",

            tooltip: { visible: true, format: "#point.x# : #point.y# millions <br/>" }

        }

        ],

        load: "loadTheme",

        title: { text: 'Sales Report Analysis ' },

        canResize: true,

        size: { height: "435" , width:"860"},

        legend: { visible: false }

    });

            e.detailsElement.find(".tabcontrol").ejTab({ selectedItemIndex: 1 });

        }

I dont have any error but its not expanding by default.

[Jayaprakash Kamaraj]

Hi Rodwin,
We have analyzed your code example and found that you are using URL adaptor. We suggest to use databound event. This  event  is triggered when the grid bound with data during initial rendering. Please refer the below code example , help documentation, and sample.
Code example:

<script type="text/javascript">
       var dataManger = ej.DataManager({
                url: "http://mvc.syncfusion.com/Services/Northwnd.svc/Orders/?$top=10",
         offline:true
            });
        $(function () {
            $("#Grid").ejGrid({
                dataSource: dataManger,
                detailsTemplate: "#tabGridContents",
                detailsDataBound: "detailGridData",
              dataBound: "databound",

……..

………….
        function databound(args) {
       
        this.expandAll();
      
    }
    </script>

Help documentation : http://help.syncfusion.com/js/api/ejgrid#events:databound
Sample : http://jsplayground.syncfusion.com/cmgoslhf
Regards,
Jayaprakash K.

[rodwin]

Hi Jayaprakash,

This is really helpful.

Thanks

[Jayaprakash Kamaraj]

Hi Rodwin, 

We are happy that the provided suggestion helped you. 

Please get back to us if you need any further assistance.  

Regards, 

Jayaprakash K.