How to Collapse/Expand Rows of EjTreeGrid at runtime ?

[Iulian Astalus]

Hello,

I don't know how to expand/collapse specific rows of  a TreeGrid at runtime.

I tryied to use following code but it doesn't work.

var treeObject = $("#TreeGridContainer").data("ejTreeGrid");
// Show expand/collapse the parent record at index ‘5’.
treeObject.expandCollapseRow(5);

Thanks,

[Suriyaprasanth Ravikumar]

Hi Lulian, 

 

We have analyzed your reported issue, but we can’t able to reproduce the reported issue in our sample. The code snippet provided in your query is working fine in the sample at our end. The “expandCollapseRow” is a public method which is use to toggle the expanded and collapsed state of the parent record at the specified row index.  

 

We have also prepared a demo sample for your reference, Please find the sample from the below link. 

Link: http://jsplayground.syncfusion.com/o5ne4kcb 

 

If the issue get reproduced again in your sample. Please provide a your working sample from which we can able to find the reported issue, so that we can provide a better solution. 

 

Please let us know if you require any other assistance on this.   

 

Regards,   

Suriyaprasanth R.  

[Iulian Astalus]

Hello,

I attached the error message .

The code snippet is following :

   $("#" + zones[i].zoneName + zones[i].zoneHour).ejTreeGrid({

                    dataSource: zones[i].data,

                    childMapping: "bids",

                    treeColumnIndex: 0,

                    commonWidth: 8,

                    headerTextOverflow: "Wrap",

                    parseRowTemplate: false,

                    sizeSettings: { height: "620px", width: gridWidth },

                    isResponsive: false,

                    allowColumnResize: true,

                    enableCollapseAll: true,

                    enableVirtualization: true,

                    allowSelection: true,

                    selectionType: ej.TreeGrid.SelectionType.Multiple,

                    selectionSettings: { selectionMode: "row" },

                    contextMenuSettings: {

                        showContextMenu: true,

                        contextMenuItems: []

                    },

                    selectedRowIndex: zones[i].upIndex,

                    expanded: bidsBLbidActions.handleScrollbarPosition,

                    expandStateMapping : "isExpanded",

                    contextMenuOpen: bidsBLbidActions.customBidMenu,

                    queryCellInfo: showBidsActivation,

                    rowSelecting: updateModel,

                    rowSelected: calculateAmount,

                    cssClass: i + "_grid" + zones[i].zoneHour,

                    columns: [

                        { field: "accumulated", headerText: "Accumulated/<br>MW", allowSorting: false, width: 10 },

                        { field: "Price_EUR", headerText: "Price<br>EUR", allowSorting: false, visible: defaultVisible(true, "Price_EUR"), isTemplateColumn: true, templateID: "columnPriceTemplate" },

                        { field: "amount", headerText: "Amount/<br>MW", allowSorting: false, isTemplateColumn: true, templateID: "columnClockTemplate", visible: defaultVisible(true, "amount") },

                        { field: "area_name", headerText: "ELSPOT<br>Area", allowSorting: false, isTemplateColumn: true, templateID: "activationChartTemplate", visible: defaultVisible(true, "area_name") },

                        { field: "short_name", headerText: "Bid Type", allowSorting: false, visible: defaultVisible(false, "short_name") },

                        { field: "power_plant", headerText: "Power Plant", allowSorting: false, visible: defaultVisible(false, "power_plant") },

                        { field: "duration_time", headerText: "Duration Time", allowSorting: false, visible: defaultVisible(false, "duration_time") },

                        { field: "resting_time", headerText: "Resting Time", allowSorting: false, visible: defaultVisible(false, "resting_time") },

                        { field: "production_type", headerText: "Usage Type", allowSorting: false, visible: defaultVisible(false, "production_type") },

                        { field: "party_name", headerText: "Party", allowSorting: false, visible: defaultVisible(false, "party_name") },

                        { field: "strCreationDate", headerText: "Creation Date", allowSorting: false, visible: defaultVisible(false, "strCreationDate") },

                        { field: "bid_id", headerText: "Bid Id", allowSorting: false, visible: defaultVisible(false, "bid_id") }

                    ],

                    rowDataBound: bidsBLbidActions.colorBidsOnRowBound

                });

                ////select the first down superbid in the list

                if (localStorage.getItem("scrolbarPosition") && selectedStartDate == localStorage.getItem("startDate")) {

                    var upIndex = localStorage.getItem("scrolbarPosition");

                    $("#" + zones[i].zoneName + zones[i].zoneHour).data("ejTreeGrid").updateScrollBar(upIndex - 10); //working

                } else {

                    $("#" + zones[i].zoneName + zones[i].zoneHour).data("ejTreeGrid").updateScrollBar(zones[i].upIndex - 10);

                }

                //same mra color for super bid header

                var color = zones[i].zoneColor;

                $("#zoneHeading" + zones[i].zoneName + zones[i].zoneHour).css({

                    "background": zones[i].zoneColor,

                    "font-weight": "bold",

                    "width": gridWidth,

                    "display": "inline-block",

                    "margin-right": "5px",

                    "margin-left": "5px"

                }).addClass("cssHeader");

                arrIds.push(zones[i].zoneName + zones[i].zoneHour);

            }

            for (var i = 0; i < zones.length; i++) {

                if (i == 0 || (zones[i - 1].zoneHour != zones[i].zoneHour)) {

                    $("#" + zones[i].zoneName + zones[i].zoneHour).data("ejTreeGrid").option({ selectedRowIndex: zones[i].upIndex });

                }

                if (localStorage.getItem(zones[i].zoneName + zones[i].zoneHour)) {

                    $("#" + zones[i].zoneName + zones[i].zoneHour + " .title").first().siblings('.e-treegrid').slideToggle(300);

                    $("#container_" + zones[i].zoneName + zones[i].zoneHour).removeAttr("style").addClass("containerCollapsed");

                    $("#zoneHeading" + zones[i].zoneName + zones[i].zoneHour).removeAttr("style").addClass("zoneHeadingCollapsed").css({"background": zones[i].zoneColor});

                    $("#" + zones[i].zoneName + zones[i].zoneHour + " .title").first().removeAttr("style").addClass("titleCollapsed");

                    $("#" + zones[i].zoneName + zones[i].zoneHour).hide();

                }

            }

            $(".gridcontainer").sortable({

                connectWith: ".gridcontainer",

                handle: ".title",

                containment: "parent",

                stop: function (event, ui) {

                    for (var i = 0; i < zones.length; i++) {

                        ui.item.find(".e-treegrid").data("ejTreeGrid").updateScrollBar(zones[i].upIndex -10);

                    }

                },

                update: function (event, ui) {

                    var strZones = "";

                    $(".cssContainer").each(function () {

                        strZones += ($(this).data("id") + ",");

                    });

                    strZones = strZones.slice(0, -1);

                    localStorage.setItem("zoneHour", zones[0].textHour);

                    localStorage.setItem("startDate", selectedStartDate);

                    localStorage.setItem("zones", strZones);

                }

            });

            var grid1 = $("#" + zones[0].zoneName + zones[0].zoneHour).data("ejTreeGrid");

            grid1.expandCollapseRow(1); // this is not even working ! 

            bidsBLbidActions.designGridContextMenu(arrIds, $("#" + zones[0].zoneName + zones[0].zoneHour).data("ejTreeGrid").model.columns); //working

The error I have is 

angular.min.js:6 TypeError: grid1.expandCollapseRow is not a function

Maybe I'm using an older version of Syncfusion ?

Thanks

[Iulian Astalus]

I also mention that I was looking for a definition for  expandCollapseRow and doesn't exists

I use  version : 13.4.0.53 of ej.web.all.min.js

I can do an update but I'm not sure about the postential conflics it may occur

Could be this the reason why I have such error , or maybe I should include some other files in solution ?

Thanks,

[Suriyaprasanth Ravikumar]

Hi Lulian, 

 

Thank you for updating your source version. 

Yes, you are using an outdated source version “13.4.0.53”, in this version the method “expandCollapseRow” is not included. In order to use the “expandCollapseRow” method its necessary to update your source version to “14.3.0.49” or above. Since there is not breaking changes in TreeGrid between the versions “13.4.0.53” and “14.3.0.49” you will not get any conflicts while updating the source. Also, you can check the features, bugs and what are all the changes made on every release from our release notes site. 

 

Please find the release notes of Source version “14.3.0.49” from the below link. 

Link: https://help.syncfusion.com/js/release-notes/v14.3.0.49?type=all#ejtreegrid 

 

Please let us know if you require any other assistance on this.   

 

Regards,   

Suriyaprasanth R.