How to Collapse/Expand Rows of EjTreeGrid at runtime ?
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,
SIGN IN To post a reply.
4 Replies
SR
Suriyaprasanth Ravikumar
Syncfusion Team
December 19, 2017 07:06 AM UTC
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.
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.
IA
Iulian Astalus
December 19, 2017 09:52 AM UTC
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
IA
Iulian Astalus
December 19, 2017 10:46 AM UTC
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,
SR
Suriyaprasanth Ravikumar
Syncfusion Team
December 19, 2017 11:30 AM UTC
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.
Please let us know if you require any other assistance on this.
Regards,
Suriyaprasanth R.
SIGN IN To post a reply.
- 4 Replies
- 2 Participants
-
IA Iulian Astalus
- Dec 18, 2017 03:28 PM UTC
- Dec 19, 2017 11:30 AM UTC
