1. Home
  2. Forum
  3. Angular - EJ 2
  4. Dont want to check/uncheck the specific selected checkboxs when clicking checkbox header

Dont want to check/uncheck the specific selected checkboxs when clicking checkbox header

Hi Team,

In an angular grid with checkbox selection, we need to select and disable specific rows, but on header checkbox check/uncheck those rows are getting unchecked/checked.

on forst load:


on header checkbox click:


we have used following code snippets

<e-column type='checkbox' field= "isSelected"  [allowFiltering] ="false" > </e-column>

rowDataBound(args: any) {
    if (this.alreadyAddedItems.includes(args.data.itemMasterId)) {
      args.row.classList.add('items-added');
    }
  }

  onRowSelecting(args: any) {
      if (this.alreadyAddedItems.includes(args.data.itemMasterId)) {
        args.cancel = true;
        args.data = null;
      } else {
        args?.row?.classList?.add('items-select');
      }
  }

  onRowDeselecting(args: any) {
      if (this.alreadyAddedItems.includes(args.data.itemMasterId)) {
        args.cancel = true;
        args.data = null
      } else {
        args?.row?.classList?.remove('items-select');
      }
  }

 

please help me solving this issue

Thanks,

Lahari Navudu


7 Replies
RS Rajapandiyan Settu Syncfusion Team May 30, 2022 11:15 AM UTC

Hi Lahari,


Thanks for contacting Syncfusion support.


Before proceeding with your query, we need confirmation from your side.


  1. Are you want to perform selection/deselection only on the specific rows through the header checkbox or content checkbox? Is this your requirement?
  2. If not, kindly explain it in detail.


Regards,

Rajapandiyan S


LN Lahari Navudu May 30, 2022 01:02 PM UTC

Hi Rajapandiyan S,


  1. Are you want to perform selection/deselection only on the specific rows through the header checkbox or content checkbox? Is this your requirement?

Our Requirement:
      On header checkbox click we need to avoid selection/deselection only on the specific rows, the other rows should work as expected.     


Thanks,
Lahari Navudu

RS Rajapandiyan Settu Syncfusion Team May 31, 2022 11:11 AM UTC

Hi Lahari,


Thanks for your update.


Query: On header checkbox click we need to avoid selection/deselection only on the specific rows,


So, you want to avoid selection/deselection only on specific rows in the Grid. Kindly share the below details to check the feasibility of your requirement.


  1. Are that specific rows selected at the initial render? And you want to maintain this selection on the header checkbox click?
  2. Or, is specific rows not selected at the initial render?
  3. Share the video demo of your requirement in detail.


Regards,

Rajapandiyan S


LN Lahari Navudu May 31, 2022 01:16 PM UTC

Hi  Rajapandiyan,


    1.Are that specific rows selected at the initial render? And you want to maintain this selection on the header checkbox click?

           Yes, we are selecting the specific rows at initial render, and we want to maintain the selection even on           header checkbox click.



    2.Or, is specific rows not selected at the initial render?

        we are selecting specific rows at initial load.


Regards,
Lahari Navudu.

RS Rajapandiyan Settu Syncfusion Team June 1, 2022 01:15 PM UTC

Hi Lahari,


Sorry for the inconvenience caused.


In EJ2 Grid, we have planned to provide support for specific rows selection in the Grid component which will be available in Volume 2 2022 Main Release (expected to be rolled at the end of June 2022). In that feature, we can render the checkbox element with a disabled state for specific rows (based on the row data) and Grid will prevent selection/deselection on those specific rows.


We suspect that this feature will meet your requirement. Find the below feedback for your reference.


Feedback: https://www.syncfusion.com/feedback/28601/provide-support-to-select-only-the-selectable-rows-while-clicking-header-checkbox


Kindly share the below details,


  1. If you want to select those specific rows at the initial render, How could you select those rows in the Grid? Are you using selectRows method in the dataBound event of Grid? Share the complete Grid code.
  2. Are you performing the selection based on the index or primaryKey value?
  3. Are you want to maintain the selection permanently in all the Grid actions? (Header checkbox click/ filtering/ paging etc.,)
  4. Share the complete Grid file. (highly recommended)
  5. Which type of data-binding you have used (remote/local)? Share the Adaptor details.


Regards,

Rajapandiyan S


LN Lahari Navudu June 3, 2022 06:00 AM UTC

Hi  Rajapandiyan,


Thanks for the response and information,


1. If you want to select those specific rows at the initial render, How could you select those rows in the Grid?

Are you using selectRows method in the dataBound event of Grid? Share the complete Grid code.

       At initial render we are using a property 'isSelected' and assigning the value for that property as true for the             specific rows, on rowDataBound event We are highlighting those rows.

      rowDataBound(args: any) {

        if (args.data.isSelected && this.alreadyAddedItems.includes(args.data.itemMasterId)) {

           args.row.classList.add('items-added');

        }

       }


2. Are you performing the selection based on the index or primaryKey value?

      We are following the regular grid selection for the remaining rows.


3. Are you want to maintain the selection permanently in all the Grid actions? (Header checkbox click/ filtering/ paging etc.,)

    yes we need to maintain selection for all grid actions.


4. Share the complete Grid file. (highly recommended)

    Since its a public forum we can't share the file, some associates from our organisation are having license for           syncfusion support through that we can share the grid info


5. Which type of data-binding you have used (remote/local)? Share the Adaptor details.

 we doing HTTP calls and getting that data from remote and binding to grid.


Thank you,

Lahari Navudu.


RS Rajapandiyan Settu Syncfusion Team June 6, 2022 01:13 PM UTC

Hi Lahari,


Thanks for your update.


By default, when you click the header checkbox, it will select/deselect all the records in the Grid. This is the behavior of EJ2 Grid checkbox selection.


If you want to maintain selection on particular rows while clicking the header check box, you need to manually select those particular records in the rowDeselected event.


rowDeselected: https://ej2.syncfusion.com/angular/documentation/api/grid/#rowdeselected



  rowDeselected(args) {
    // select all the records when header checkbox in intermediate mode

    if (this.grid.element.querySelector('.e-checkselectall').checked == false) {

      setTimeout(() => {

        this.grid.selectionModule.checkSelectAll();

      });

    }
   // select particular rows when header checkbox in checked mode

    if (this.grid.element.querySelector('.e-checkselectall').checked == true) {

      var x = this.grid.getCurrentViewRecords();

      var selectedIndex = [];

      x.map((item, index) => {

        if (item['IsSelected']) {

          selectedIndex.push(index);

        }

      });

      setTimeout(() => {

        this.grid.selectRows(selectedIndex);  // maintain the selection on particular rows

      });

    }

  }

 


Find the sample for your reference,

sample: https://stackblitz.com/edit/angular-ptlhvo?file=app.component.html,app.component.ts

Please let us know if you have any concerns.


Regards,

Rajapandiyan S


Loader.
Up arrow icon