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
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.
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.
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.