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

Help using expandAll on create of ejgrid

Thread ID:

Created:

Updated:

Platform:

Replies:

121269 Nov 25,2015 11:19 AM UTC Nov 30,2015 06:31 AM UTC JavaScript 3
loading
Tags: ejGrid
rodwin
Asked On November 25, 2015 11:19 AM UTC

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 [Syncfusion]
Replied On November 26, 2015 06:58 AM UTC

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
Replied On November 27, 2015 03:43 AM UTC

Hi Jayaprakash,

This is really helpful.

Thanks

Jayaprakash Kamaraj [Syncfusion]
Replied On November 30, 2015 06:31 AM UTC

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.


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

;