collapse to level

[Alex]

Hi.

I'm new at Essential Studio. 

I need collapse rows in TreeGrid to some level (e.g. to third level) in client side using JS, so is there any way to implement it? 

Some methods for getting rows collection, row level and collapse/expand row?

Grateful for any help 

[Mahalakshmi Karthikeyan]

Hi Alex,

Thanks for using Syncfusion product.

Query 1: I need collapse rows in TreeGrid to some level (e.g. to third level) in client side using JS, so is there any way to implement it? 

Solution: currently it is not possible to collapse or expand at any particular level row in TreeGrid control. Hence we have also logged a feature report regarding this. A support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents

Query 2: Some methods for getting rows collection, 

Solution: it is possible to get the total number of rows and row collection at the load time or at the button click event. Please refer the below code example for details.

<button id="Toltalrecords">Rows Collection</button>

    @(Html.EJ().TreeGrid("TreeGridContainer").

//…

)

<script type="text/javascript">

          $("#Toltalrecords").click(function () {

            var obj = $("#TreeGridContainer").data("ejTreeGrid");

            var rows = obj.model.updatedRecords;

            alert("Records Length" + rows.length);

        })

    </script>

Here “obj.model.updatedRecords” returns all the updated collection but in virtualization mode it returns we will splice the collapsed records.

Query 3: Some methods for getting row level 

Solution: We can get the selected row level using the “RowSelected” client side event. Please refer the below code example to achieve this.

    @(Html.EJ().TreeGrid("TreeGridContainer").

ClientSideEvents(eve =>

       {

           eve.RowSelected("rowselected");

       }).

//…

)

<script type="text/javascript">

         function rowselected(args) {

            var level = args.data.level;

            alert("Data Level " + level);

        }

    </script>

We have also prepared a sample based on this and you can find the sample under the following location.

Sample: http://www.syncfusion.com/downloads/support/forum/120049/ze/TreeGridSample-277867755

Please let us know if you need further assistance on this.

Regards,

Mahalakshmi K.

[Alex]

Hi. Tanks for you reply. 

I found some solution for this issue, but it has some troubles with scrolling.

Here a JS code. It's a little dirty but implements most of needed features. 

<script type="text/javascript">

    var lvl = 1;    

    var tree;

    var treeCV;

    var treeCVMarkup;

    var treeColumnIndex;

    function maxLevel() {

        var level = 0;

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

            if (level < treeCV[i].level) {

                level = treeCV[i].level;

            }

        }

        return level + 1;

    }

    function expanded(args) {

        init();

        computeHeight();

    }

    function collapsed(args) {

        init();

        computeHeight();

    }

    function init() {

        tree = $("#FlexGrid").data("ejTreeGrid");

        treeCV = tree.model.flatRecords;

        treeCVMarkup = tree._gridRows;

        treeColumnIndex = tree.model.treeColumnIndex;

    }

    function shownRowsCount() {

        var shownRowsCount = 0;

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

            if (treeCVMarkup[i].style.display == "table-row") {

                shownRowsCount++;

            }

        }

        return shownRowsCount;

    }

    function computeHeight() {

        var table = tree.element[0].childNodes[1].childNodes[0].childNodes[0];

        table.style.height = parseInt(treeCVMarkup[0].style.height.replace("px", ""), 10) * shownRowsCount() + "px";

        var scrollHandle = tree.element[0].childNodes[1].childNodes[1].childNodes[0].childNodes[1].childNodes[0];//it makes some trouble when scrollbar isn't exist at the time 

        var scrollHandleSpace = tree.element[0].childNodes[1].childNodes[1].childNodes[0].childNodes[1];            //e.g. when rows count is less then can be displayed

        var gridHeight = tree.element[0].clientHeight;

        var aspect = parseInt(table.style.height.replace("px", ""), 10) / gridHeight;

        scrollHandle.style.height = scrollHandleSpace.clientHeight / aspect + "px";

    }

    function expandRow(row) {

        if (row.classList.contains("e-treegridrowcollapse")) {

            row.classList.remove("e-treegridrowcollapse");

            row.classList.add("e-treegridrowexpand");

        }

    }

    function collapseRow(row) {

        if (row.classList.contains("e-treegridrowexpand")) {

            row.classList.remove("e-treegridrowexpand");

            row.classList.add("e-treegridrowcollapse");

        }

    }

    function expandIcon(icon) {

        if (icon.classList.contains("e-treegridcollapse")) {

            icon.classList.remove("e-treegridcollapse");

            icon.classList.add("e-treegridexpand");

        }

    }

    function collapseIcon(icon) {

        if (icon.classList.contains("e-treegridexpand")) {

            icon.classList.remove("e-treegridexpand");

            icon.classList.add("e-treegridcollapse");

        }

    }

    function showRow(row) {

        if (row.style.display == "none") {

            row.style.display = "table-row";

        }

    }

    function hideRow(row) {

        if (row.style.display == "table-row") {

            row.style.display = "none";

        }

    }

    $("#btn").on("click", function () {

        init();

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

            //getting arrow 

            var nodes = treeCVMarkup[i].childNodes[treeColumnIndex].childNodes[0].childNodes;

            var index;

            for (var j = 0; j < nodes.length; j++) {

                if (nodes[j].classList.contains("e-icon") && (nodes[j].classList.contains("e-treegridexpand") || nodes[j].classList.contains("e-treegridcollapse"))) {

                    index = j;

                    break;

                }

            }

            var icon = nodes[index];

            

            if(treeCV[i].level > lvl) {   

                //hide extra rows

                hideRow(treeCVMarkup[i]);

            }

            else {

                //show needed rows

                showRow(treeCVMarkup[i]);

                //change css classes for displayed rows 

                if (treeCV[i].hasChildRecords) {

                    if (treeCV[i].level < lvl) {

                        expandRow(treeCVMarkup[i]);

                        expandIcon(icon);

                    }

                    else {

                        collapseRow(treeCVMarkup[i]);

                        collapseIcon(icon);

                    }

                }  

            }

        }

        

        computeHeight();

    });

</script>

Could you help to decide a trouble with scrolling?

[Mahalakshmi Karthikeyan]

Hi Alex,

We have analyzed the provided code and this might not be a proper work around solution for your requirement. It is also not possible to update the TreeGrid height after collapsing the rows programmatically. For your requirement, as said in our previous update we are currently working on the feature to provide a generic solution for your requirement. So we request you to follow up with the incident created under your DT account to check the progress of the feature implementation.

Regards,

Mahalakshmi K.

[Jagadesh]

Hi,

Is this feature available now. 

[Mahalakshmi Karthikeyan]

Hi Jagadesh,

Yes, now we can expand or collapse particular level parent with the help of expandAtLevel() and collapseAtLevel() public methods by passing the level as integer value to the argument of this method. Refer the below code example for details.

<button id="collapse">Collapse At level 2</button>

<button id="expand">Expand At level 2</button>

    @(Html.EJ().TreeGrid("TreeGridContainer").

          //…

    )

  

    <script type="text/javascript">

        $("#collapse").click(function () {

            var obj = $("#TreeGridContainer").data("ejTreeGrid");

            obj.collapseAtLevel(2);

        })

        $("#expand").click(function () {

            var obj = $("#TreeGridContainer").data("ejTreeGrid");

            obj.expandAtLevel(2);

        })

    </script>

We have also prepared a sample based on this and you can find the sample under the following location.

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/ExpandAndCollapse-622009576

Note: We have removed bin and obj folder in the given sample for some security reasons, we must include Syncfusion.EJ and Syncfusion.EJ.MVC dlls to render the TreeGrid control which is available in Essential studio installed location

Regards,

Mahalakshmi K.

[Jagadesh]

Hi, 

Thanks, this is awesome.  

[Saranya CJ]

Hi Jagadesh,
Thank you for your update. Please let us know if you require any other assistance.
Regards,
Saranya