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.
Unfortunately, activation email could not send to your email. Please try again.

collapse to level

Thread ID:

Created:

Updated:

Platform:

Replies:

120049 Aug 26,2015 11:48 AM Mar 23,2016 02:44 AM ASP.NET MVC 7
loading
Tags: TreeGrid
Alex
Asked On August 26, 2015 11:48 AM

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 [Syncfusion]
Replied On August 27, 2015 08:15 AM

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
Replied On August 27, 2015 10:16 AM

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 [Syncfusion]
Replied On August 28, 2015 08:10 AM

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
Replied On March 15, 2016 10:55 AM

Hi,

Is this feature available now. 

Mahalakshmi Karthikeyan [Syncfusion]
Replied On March 16, 2016 07:50 AM

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
Replied On March 22, 2016 02:42 AM


Hi, 

Thanks, this is awesome.  

Saranya CJ [Syncfusion]
Replied On March 23, 2016 02:44 AM

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

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.

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.

;