More than one row selected at the beginning

[Raul Ramirez]

Hello, everybody.

I would like to have more than one row selected when loading the grid.

There is a property where you can put a selected row but I would like to have more than one. How could this be done currently?

selectedRowIndex

number

The selectedRowIndex allows you to select a row at initial rendering. You can also get the currently selected row index.

Defaults to -1

Thank you very much.

[Rajapandiyan Settu]

Hi raul, 

Greetings from syncfusion support. 

 

Query : I would like to have more than one row selected when loading the grid. 

 

From your query we could see that you need to select multiple rows at grid rendering itself. You can achieve your requirement by using selectRows method in the databound event and use flag variable to achieve rows selection only in the grid’s initial rendering. Please refer the below code example and sample for more information. 

 

 

export class App extends React.Component { 

  constructor() { 

    super(...arguments); 

  } 

  grid; 

  flag = true; 

  settings = { type: 'Multiple' } 

  dataBound(args) { 

//flag variable is used to achieve selection only in grid’s initial rendering  

    if (this.flag) { 

      this.flag = false; 

      this.grid.selectRows([0, 1, 3])  // select multiple rows in the grid using indexes 

    } 

  } 

  render() { 

    this.dataBound = this.dataBound.bind(this); 

    return (<div> 

      <GridComponent dataSource={data} height={320} dataBound={this.dataBound} selectionSettings={this.settings} ref={g => this.grid = g}> 

        <ColumnsDirective> 

          <ColumnDirective field='OrderID' headerText='Order ID' width='100' textAlign="Right" /> 

          <ColumnDirective field='CustomerID' headerText='Customer ID' width='100' /> 

          <ColumnDirective field='ShipCountry' headerText='Ship Country' width='100' /> 

        </ColumnsDirective> 

      </GridComponent></div> 

    ); 

  } 

} 

 

 

Sample : https://stackblitz.com/edit/react-ydm2mb-ncgbxz?file=index.js 

UG : https://ej2.syncfusion.com/react/documentation/api/grid#selectrows 

         https://ej2.syncfusion.com/react/documentation/api/grid#databound 

        https://ej2.syncfusion.com/react/documentation/api/grid/selectionSettings/#type 

please get back to us if you need further assistance on this. 

Regards, 

Rajapandiyan S

[Raul Ramirez]

Thank you very much.

[Rajapandiyan Settu]

Hi Raul, 

We are glad that the provided solution is resolved your problem. Please get back to us if you need further assistance on this. 

Regards, 

Rajapandiyan S