Selecting rows with PersistSelection

[Masoud Moghaddari]

Hi there,

I'm using SyncFusion Grid with serverside data binding.

When I enable PersistSelection option, getSelectedRecords() method returns null.

How can I fix that?

Thanks

Masoud

[Rajapandi Ravi]

Hi Masoud, 

Greetings from syncfusion support 

You can achieve your requirement by using rowSelected event of Grid. In selection settings, if you are setting the persistSelection as true then you have to define any one of the column should be enabled as a primary key. Please refer the below code example and sample for more information. 

 

<template> 

  <div id="app"> 

    <ejs-grid 

      :dataSource="data" 

      :rowSelected="rowSelected" 

      :selectionSettings="selectionOptions" 

      :allowFiltering="true" 

    > 

      <e-columns> 

        <e-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="90"></e-column> 

        <e-column field="CustomerID" headerText="Customer ID" width="120"></e-column> 

        <e-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="90"></e-column> 

        <e-column 

          field="OrderDate" 

          headerText="Order Date" 

          textAlign="Right" 

          format="yMd" 

          type="date" 

          width="120" 

        ></e-column> 

     </e-columns> 

    </ejs-grid> 

  </div> 

</template> 

<script> 

import Vue from "vue"; 

import { GridPlugin, Filter } from "@syncfusion/ej2-vue-grids"; 

import { DataManager, ODataAdaptor } from "@syncfusion/ej2-data"; 

 

Vue.use(GridPlugin); 

 

class SerialNoAdaptor extends ODataAdaptor { 

  onPredicate(predicate, query, requiresCast) { 

    predicate.value = predicate.value.toLowerCase(); 

    var returnvalue = super.onPredicate.call( 

      this, 

      predicate, 

      query, 

      requiresCast 

    ); 

 

    return decodeURIComponent(returnvalue); 

  } 

} 

 

export default { 

  data() { 

    let SERVICE_URI = 

      "https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders?$top=7"; 

    return { 

      data: new DataManager({ 

        url: SERVICE_URI, 

        adaptor: new SerialNoAdaptor(), 

        crossDomain: true 

      }), 

      selectionOptions: { 

        type: "Multiple", 

        persistSelection: true 

      } 

    }; 

  }, 

  methods: { 

    rowSelected: function(args) { 

      var grid = document.getElementsByClassName("e-grid")[0].ej2_instances[0];  //Grid instance 

      var selctedrecord =  grid.getSelectedRecords()[0];    //Get the selected records 

      console.log(selctedrecord); 

    } 

  }, 

  provide: { 

    grid: [Filter] 

  } 

}; 

</script> 

<style> 

@import "https://cdn.syncfusion.com/ej2/material.css"; 

</style> 

Sample: https://codesandbox.io/s/vue-template-1hrih?file=/src/App.vue:0-1987 

Note: By default selection is allowed by clicking a grid row or checkbox in that row. To allow Selection only through checkbox, you can set selectionSettings.checkboxOnly property to true. Selection can be persisted on all the operations using selectionSettings.persistSelection property. For persisting selection on the Grid, any one of the column should be defined as a primary key using columns.isPrimaryKey property. 

Documentation: https://ej2.syncfusion.com/vue/documentation/api/grid/selectionSettings/?no-cache=1#persistselection 

Regards, 

Rajapandi R