How to know a row is the last child element

[Ton That Hung]

Hi Syncfusion Team,

I'm using TreeGrid component and I want to style CSS for the last child row(view image). But I don't know what is the last child row. How to know a row is the last child element.

Thanks.

[Shek Mohammed Asiq Abdul Jabbar]

Hi Ton That Hung,

Greetings from Syncfusion support.

Query : Adding CSS to last child element in treegrid.

We can achieve your query by using rowDataBound event of treegrid. Please refer to the following code snippet.

let length;

  function rowDataBound(args) { 

    if (args.data.hasChildRecords) {

      var actualLength = args.data.childRecords.length;

      length = args.data.childRecords[actualLength - 1].TaskID;

    }

    if (args.data.TaskID == length) {

      args.row.style.backgroundColor = 'green';

    }

  }

 

Sample : https://stackblitz.com/edit/react-5pglh1?file=index.js

Image :-

Please refer to the API for rowDataBound event : https://ej2.syncfusion.com/react/documentation/api/treegrid/#rowdatabound

Kindly get back to us for further assistance.

Regards,

Shek Mohammed Asiq

[Ton That Hung]

Hi Shek Mohammed Asiq Abdul Jabbar,

Thanks for your quickly support.

I have two concerns for your solution

1. If you support sorting feature, the solution will wrong
   
   
2. Your solution is only support for smallest level. If you have 3 level, only level 3 work with this solution. The same problem with tree grid has 4, 5, 6... levels.

Link sample: https://stackblitz.com/edit/react-5pglh1-ujstda?file=index.js,data.js

How to handle these case?

Thank you so much.

Best regards.

[Gangabharathy Murugasen]

Ton That Hung,

We appreciate your patience and understanding.

We have achieved your requirement (i.e., the background color for the last child should maintain after sorting) by using action complete event. In actionComplete event, we have manually sorted the data by using its TaskID and apply the background color. Please refer to the following code snippet.

function actionComplete(args) {

    if (args.requestType == 'sorting' && args.direction == 'Descending') {

      var arr = [];

      var instance =

        document.getElementsByClassName('e-treegrid')[0].ej2_instances[0];

      var data = instance.getCurrentViewRecords();

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

        if (data[i].hasChildRecords) {

          var childElemCount = data[i].childRecords.length;

          var childElem = data[i].childRecords; 

          for (var j = 0; j < childElemCount; j++) {

            arr.push(childElem[j]);

          }

          arr.sort();

          arr.reverse();

          var actualLength = data[i].childRecords.length - 1;

          length = arr[actualLength].TaskID;

          for (var k = 0; k < data.length; k++) {

            if (data[k].TaskID == length) {

              instance.getRows()[k].style.backgroundColor = 'green';

            }

          }

          arr = [];

        }

      }

    } 

   }

 

Please refer to the API docs for actionComplete : https://ej2.syncfusion.com/react/documentation/api/treegrid/#actioncomplete

Query #: If you have 3 level, only level 3 work with this solution. The same problem with tree grid has 4, 5, 6... levels?

We have handled 3 levels of child data on initial rendering. Please refer to the following code snippet.

function dataBound(args) {

    var instance =

      document.getElementsByClassName('e-treegrid')[0].ej2_instances[0];

    var length;

    var data = instance.getCurrentViewRecords();

    if (instance.initialRender) {

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

        if (data[i].hasChildRecords) {

          var actualLength = data[i].childRecords.length - 1;

          length = data[i].childRecords[actualLength].TaskID;

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

            if (data[j].TaskID == length) {

              instance.getRows()[j].style.backgroundColor = 'green';

            }

          }

        }

      }

    }

  }

 

Based on your requirement, you can handle with your logic.

Sample : https://stackblitz.com/edit/react-5pglh1-zyhazd?file=index.js

Image :

Kindly get back to us for further assistance.

Regards,

Shek Mohammed Asiq

[Ton That Hung]

Thanks for your support.

[Suganya Gopinath]

We are glad that the provided solution helped to solve the issue. Please get back to us for further assistance.

We are marking this forum as solved. 

[Ton That Hung]

Hi Gangabharathy Murugasen,

If you support sorting feature, the solution will wrong

Link sample: https://stackblitz.com/edit/react-5pglh1-dxezdh?file=data.js

Thanks.

[Shek Mohammed Asiq Abdul Jabbar]

Hi Ton That Hung,

We deeply regret for the delayed response.

We have implement the workaround in case of Sorting enabled. We have optimized the workaround and it will work based on the last record of the specific parent that is looped based on condition and apply color to it (in case of Initial render as well as sorting action). Please refer to the following code snippet.

function sorting() {

    var arr = [];

    var refId;

    var instance =

      document.getElementsByClassName('e-treegrid')[0].ej2_instances[0];

    var data = instance.getCurrentViewRecords();

 

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

      if (data[i].hasChildRecords) {

        refId = data[i].TaskID;

        //to store the parent TaskID

      }

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

        if (refId == data[j].taskData.parentID) {

          // to map the refID and pushing to array

          arr.push(data[j]);

        }

      }

      if (arr.length != 0) {

        var actualLength = arr.length - 1;

        length = arr[actualLength].uniqueID;

        if (arr[actualLength].hasChildRecords) {

          //to handle multi level records

          actualLength = arr.length - 2;

          length = arr[actualLength].uniqueID;

        }

        for (var k = 0; k < data.length; k++) {

          if (data[k].uniqueID == length) {

            instance.getRows()[k].style.backgroundColor = 'green';

          }

        }

        arr = [];

      }

    }

  }

 

Sample : https://stackblitz.com/edit/react-5pglh1-vaa9us?file=index.js,index.html,data.js

Kindly get back to us for further assistance.

Regards,

Shek Mohammed Asiq

[Ton That Hung]

Hi Shek Mohammed Asiq,

I have an advanced requirement for this question. If I use virtual scroll, it seems that this algorithm will not work correctly anymore because getCurrentViewRecords only return a certain number of records. Is there any way to solve this requirement?

Thanks.

[Shek Mohammed Asiq Abdul Jabbar]

Ton That Hung,

We can use the same code set for the virtualization enabled samples too. With the same code set, on dataBound without checking the initial rendering condition. On each scroll, dataBound event will be triggered and based on the currentViewRecords on the scroll, color for each last child record will be applied.

Please refer to the following sample : https://stackblitz.com/edit/react-wsw82u-7tmjs4?file=index.js

Kindly get back to us for further assistance.

Regards,

Shek Mohammed Asiq

[Ton That Hung]

Hi Shek Mohammed Asiq,

Your example is a special case: there are very few child elements, and if you increase the number of child elements beyond the number of elements rendered on the UI, the algorithm will encounter issues.

Link sample: https://stackblitz.com/edit/react-wsw82u-pzs4wd?file=data.js,index.js

You can scroll very quickly to the last element in the treeGrid, and you will see that it does not have a green background.

Thanks.

[Shek Mohammed Asiq Abdul Jabbar]

Ton That Hung,

To achieve your requirment, we can use flatData instead of currentViewRecords and compare the last record with the currentViewRecord and apply color to the row. We have modified the code based on your requirment. Please refer to the following code snippet.

function sorting() {

    var arr = [];

    var refId;

    var instance =

      document.getElementsByClassName('e-treegrid')[0].ej2_instances[0];

    var data = instance.flatData;

    var currentView = instance.getCurrentViewRecords();

 

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

      if (data[i].hasChildRecords) {

        refId = data[i].TaskID;

        //to store the parent TaskID

      }

      debugger;

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

        if (refId == data[j].taskData.parent) {

          // to map the refID and pushing to array

          arr.push(data[j]);

        }

      }

      if (arr.length > 0) {

        var actualLength = arr.length - 1;

        length = arr[actualLength].uniqueID;

        if (arr[actualLength].hasChildRecords) {

          //to handle multi level records

          actualLength = arr.length - 2;

          length = arr[actualLength].uniqueID;

        }

        for (var k = 0; k < currentView.length; k++) {

          if (currentView[k].uniqueID == length) {

            instance.getRows()[k].style.backgroundColor = 'green';

          }

        }

        arr = [];

      }

    }

  }

 

Please refer to the following code snippet : https://stackblitz.com/edit/react-wsw82u-mlkr3n?file=index.js

Kindly get back to us for further assistance.

[Ton That Hung]

The algorithm works very well. Thank you for your enthusiastic and prompt assistance.

[Suganya Gopinath]

We are glad that the provided solution helped to solve the issue.