rowDeselected issue

[Narsimsetty Chalamaiah]

Hi Team,

please setup call ...

I used below code in my application, 

rowSelected for selected row,

rowDeselected for deselected row,

in my application when loading time i need to disable button , when we selected row will enable button.

once i am clicking button (out side grid) will be getting updated data from db and i need to refresh data. 

when i click out side button ,  rowDeselected method is loading .

 i am  not able to disable  button 

html:

  <ejs-grid  #grid [dataSource]='data' (rowSelected)='rowSelected($event)'  (rowDeselected)="rowDeSelected($event)">

      <button type="button" class="btn btn-outline-primary" (click)="clickActive()" [disabled]="isButtonActive" >Active</button>

rowSelected(args) {

    debugger;

    let data = args.data;

    console.log(data);

    this.key = args.data.SequenceNumber;

    const selectedrecords:any = this.grid.getSelectedRecords();  // Get the selected records

    if (selectedrecords.length == 1) {

      if (selectedrecords[0].Status === "Active") {

        this.isButtonActive = true;

        this.isButtonDeActive = false;

        this.isButtonDelete = true;

        this.isButtonAdvancePayment = false;

        this.isButtonModifyCreditCard = false;

      }

      else if (selectedrecords[0].Status === "Inactive") {

        this.isButtonActive = false;

        this.isButtonDeActive = true;

        this.isButtonDelete = false;

        this.isButtonAdvancePayment = true;

        this.isButtonModifyCreditCard = true;

      }     

    }

    else {

      this.isButtonActive = true;

      this.isButtonDeActive = true;

      this.isButtonDelete = true;

      this.isButtonAdvancePayment = true;

      this.isButtonModifyCreditCard = true;

    }

  }

  rowDeSelected(RowSelectEventArgs) {

    debugger;

    const selectedrecords: any = this.grid.getSelectedRecords();

    if (selectedrecords.length == 1) {

      if (selectedrecords[0].Status === "Active") {

        this.isButtonActive = true;

        this.isButtonDeActive = false;

        this.isButtonDelete = true;

        this.isButtonAdvancePayment = false;

        this.isButtonModifyCreditCard = false;

      }

      else if (selectedrecords[0].Status === "Inactive") {

        this.isButtonActive = false;

        this.isButtonDeActive = true;

        this.isButtonDelete = false;

        this.isButtonAdvancePayment = true;

        this.isButtonModifyCreditCard = true;

      }

    }

    else {

      this.isButtonActive = true;

      this.isButtonDeActive = true;

      this.isButtonDelete = true;

      this.isButtonAdvancePayment = true;

      this.isButtonModifyCreditCard = true;

    } 

  }

Attachment: deselected_row_issue_8d585c29.zip

[Thiyagu Subramani]

Hi Narsimsetty, 

Thanks for contacting Syncfusion support. 

Based on your shared information we suspect that you are using buttons (Active, Deactive,  Delete etc.) outside Grid and using rowSelected and rowDeSelected events you maintaining this button state (disable and enable). But we unclear about your exact requirement. So before setup web meeting, share below details then only we provide the appropriate solution as soon as possible. 

• Clicking button (outside grid) will be getting updated data from db and i need to refresh data – Are you want to update the programmatically by clicking the button in outside?
• when loading time i need to disable button, when we selected row will enable button – Are you want enable the all buttons while selecting the row Grid.
• Explain your requirement briefly with video demonstration.
• Syncfusion Package version
• If possible share issue reproducing sample to us.

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

Regards, 

Thiyagu S 

[Narsimsetty Chalamaiah]

Are you want to update the programmatically by clicking the button in outside?- Yes

 Are you want enable the all buttons while selecting the row Grid.--Yes

[Ajith Govarthan]

Hi Narsimsetty, 

 

Sorry for the delayed update. 

 

Query: Need to enable and disable the buttons with rowSelected and rowDeselected events. 

 

Based on your query you want to enable and disable the buttons with rowSelected and rowDeselected events. So, we have prepared sample and in that sample we have initially disabled the buttons and enabled the buttons with rowSelected event which will be triggered when you select any rows in the grid component. 

 

We have also disabled the buttons when you deselect the rows in the grid component by adding the e-disabled and avoid-clicks CSS classes. For your convenience we have attached the sample so, please refer them for your reference. 

 

Code Example: 

App.component.ts 

 

  rowDeSelected(args) { 

    // alert("rowDeSelected"); 

    this.actBtn.element.classList.add("e-disabled"); 

    this.actBtn.element.classList.add("avoid-clicks"); 

    this.deActBtn.element.classList.add("e-disabled"); 

    this.deActBtn.element.classList.add("avoid-clicks"); 

    this.deleteBtn.element.classList.add("e-disabled"); 

    this.deleteBtn.element.classList.add("avoid-clicks"); 

  } 

 

  rowSelected(args) { 

    this.actBtn.element.classList.remove("e-disabled"); 

    this.actBtn.element.classList.remove("avoid-clicks"); 

    this.deActBtn.element.classList.remove("e-disabled"); 

    this.deActBtn.element.classList.remove("avoid-clicks"); 

    this.deleteBtn.element.classList.remove("e-disabled"); 

    this.deleteBtn.element.classList.remove("avoid-clicks"); 

    //alert("row selected"); 

  } 

 

  click() { 

    alert("clicked");          // here you can update the data in the grid  

  } 

 

app.component.ts 

 

<div class="control-section"> 

  <div class="col-lg-9"> 

    <ejs-grid 

      #normalgrid 

      id="Normalgrid" 

      [dataSource]="data" 

      height="200" 

      allowPaging="true" 

      [pageSettings]="pageSettings" 

      [editSettings]="editSettings" 

      [toolbar]="toolbar" 

      (actionBegin)="actionBegin($event)" 

      (rowSelected)="rowSelected($event)" 

      (rowDeselected)="rowDeSelected($event)" 

    > 

      <e-columns> 

        <e-column 

          field="OrderID" 

          headerText="Order ID" 

          width="140" 

          textAlign="Right" 

          isPrimaryKey="true" 

          [validationRules]="orderidrules" 

        ></e-column> 

        <e-column 

          field="CustomerID" 

          headerText="Customer ID" 

          width="140" 

          [validationRules]="customeridrules" 

        ></e-column> 

        <e-column 

          field="Freight" 

          headerText="Freight" 

          width="140" 

          format="C2" 

          textAlign="Right" 

          editType="numericedit" 

          [validationRules]="freightrules" 

        ></e-column> 

        <e-column 

          field="OrderDate" 

          headerText="Order Date" 

          width="120" 

          editType="datetimepickeredit" 

          [format]="formatoptions" 

          textAlign="Right" 

        ></e-column> 

        <e-column 

          field="ShipCountry" 

          headerText="Ship Country" 

          width="150" 

          editType="dropdownedit" 

          [edit]="editparams" 

        ></e-column> 

      </e-columns> 

    </ejs-grid> 

    <!-- Info Button - Used to represent an informative action --> 

    <button 

      ejs-button 

      #active 

      cssClass="e-info e-outline e-disabled avoid-clicks" 

      (click)="click()" 

    > 

      Active 

    </button> 

    <button 

      ejs-button 

      #deactive 

      cssClass="e-info e-outline e-disabled avoid-clicks" 

    > 

      DeActivate 

    </button> 

    <button 

      ejs-button 

      #delete 

      cssClass="e-info e-outline e-disabled avoid-clicks" 

    > 

      Delete 

    </button> 

  </div> 

</div> 

 

Sample Link: https://stackblitz.com/edit/angular-uaguu8-rmbsle?file=app.component.html 

 

Note:  As per your requirement you want update the data in the grid component with click event. So, you can update the data in the click event and call the grid.refresh method, which will refresh the grid with latest data and also triggers the rowDeselected event to disable all the buttons. 

 

Please get back to us if you need further assistance. 

 

Regards, 

Ajith G.