Trying to select the top most child element after reload

[Justin Wells]

So am trying to auto select the top most child element in my TreeGrid after I refresh data in my grid. Haven't really worked out how to do this so looking for help.

Attachment: Example_e6a2e1f9.7z

[Farveen Sulthana Thameeztheen Basha]

Hi Justin, 

Thanks for contacting Syncfusion Support. 

Query#:-select the top most child element after reload 

 

We have achieved your requirement using dataBound and rowDataBound event of the TreeGrid. In this event, we have checked for corresponding topmost child using args.data.level(based on condition) and select the rows using selectRows method. Also we have also performed selection using actionComplete event of the TreeGrid on args.requestType as Paging. 

 

Refer to the code example:- 

<ejs-treegrid :dataSource="data" 

              :treeColumnIndex="0" 

              childMapping="subtasks" 

              ref="treegrid" 

              :allowPaging="true" 

              :editSettings="editSettings" 

              :toolbar="toolbar" 

              :rowDataBound="rowDataBound" 

             :actionComplete='actionComplete' 

              :selectionSettings="selectionOptions" 

              :dataBound="dataBound" 

              :allowFiltering="true" 

              :filterSettings="filterOptions"> 

    <e-columns> 

        <e-column field="taskID" 

                  headerText="Task ID" 

                  width="90" 

                  :filter="filterParams" 

                  isPrimaryKey="true" 

                  :validationRules="taskidrules"></e-column> 

        .  .    . 

    </e-columns> 

</ejs-treegrid> 

    </div> 

  </div> 

</template> 

<script> 

import Vue from "vue"; 

import { 

  TreeGridPlugin, 

  TreeGridComponent, 

  ColumnsDirective, 

  ColumnDirective, 

  Edit, 

  Page, 

  Filter, 

  Toolbar 

} from "@syncfusion/ej2-vue-treegrid"; 

import { MultiSelectPlugin, MultiSelect } from "@syncfusion/ej2-vue-dropdowns"; 

import { isNullOrUndefined } from "@syncfusion/ej2-base"; 

let elem; 

let multiSelectObj; 

Vue.use(TreeGridPlugin); 

Vue.use(MultiSelectPlugin); 

export default { 

  components: { 

    "ejs-treegrid": TreeGridComponent, 

    "e-columns": ColumnsDirective, 

    "e-column": ColumnDirective 

  }, 

  data() { 

    return { 

      selIndex: [], 

      filterOptions: { 

        type: "Menu" 

      }, 

      filterParams: { params: { showSpinButton: false } }, 

      selectionOptions: { type: "Multiple" }, 

      ] 

    }; 

  }, 

  methods: { 

    rowDataBound(args) { 

      if (args.data.level == 0) { 

        this.selIndex.push(args.data.childRecords[0].index);  

      } 

    }, 

    actionComplete(args) { 

      if (args.requestType == "paging") { 

         var data = this.$refs.treegrid.getCurrentViewRecords().filter(data => data.level == 0); 

        if (!isNullOrUndefined(data) && data.length) { 

          var index  = data[0].childRecords[0].index; 

          var pageSize = this.$refs.treegrid.pageSettings.pageSize;  

         if(index > pageSize){ 

           this.selIndex.push(index-pageSize); 

         this.$refs.treegrid.selectRows(this.selIndex);        //select rows on paging      

         this.selIndex = []; 

        } 

      } 

    } 

    }, 

    dataBound(args) { 

      console.log(this.selIndex.length); 

      if (this.selIndex.length) { 

        this.$refs.treegrid.selectRows(this.selIndex);   //select rows on initial rendering 

        this.selIndex = []; 

      } 

    } 

  }, 

  provide: { 

    treegrid: [Edit, Page, Toolbar, Filter] 

  } 

}; 

</script> 

Sample link:-  https://codesandbox.io/s/sf-vue-treegrid-forked-gk9gy 

Refer to the documentation link:- 

https://ej2.syncfusion.com/vue/documentation/treegrid/how-to/select-treegrid-rows-based-on-certain-condition/ 

Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T