1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. Hide Checkbox for certain rows

Hide Checkbox for certain rows

We are using Data Grid in one of our web pages in the portal application. One of the requirement is to do a bulk Approval for the displayed records based on certain statuses. In this case, we want to hide checkboxes for some of the rows. I tried various options and unable to achieve it. I am only able to disable the checkbox. We are looking for solutions for the below cases.

1.  Do not display checkboxes for some of the rows based on conditions.
2. If the checkbox is selected, the entire row gets selected.  We only need the checkbox to be checked/unchecked and the row selection should be disabled.  This is because, if the row is selected, the background for that row disables the color codes set for Status column.

I have attached the sample. Please run index.html to replicate the issues.


Attachment: BrokerPortal_CheckBox_c80077b3.zip

13 Replies
NR NAVEEN RAAJU March 9, 2020 05:30 AM UTC

Any update on this ?

MS Manivel Sellamuthu Syncfusion Team March 9, 2020 07:14 AM UTC

Hi Naveen, 

Sorry for the delay about getting back to you. 

Query: 1:  Do not display checkboxes for some of the rows based on conditions. 

We checked your sample and found that you have added the “.disablecheckbox” class in queryCellInfo event to hide the checkboxes for some of the rows.  

To hide the checkboxes, we suggest you to set the opacity as 0 for the ‘.disablecheckbox’ class. 


  .disablecheckbox {  
            pointer-events: none;  
            opacity: 0;  
        } 


Query2: If the checkbox is selected, the entire row gets selected.  We only need the checkbox to be checked/unchecked and the row selection should be disabled.  This is because, if the row is selected, the background for that row disables the color codes set for Status column. 
 
For the above requirement we suggest you to override the selection styles. Please find the below CSS and sample for more information. 

        td.e-rowcell.e-selectionbackground.e-active, 
        td.e-detailrowcollapse.e-selectionbackground.e-active, 
        td.e-detailrowexpand.e-selectionbackground.e-active { 
              background-color: transparent; 
          } 
        .tax-agent-pending-status,  
        td.e-rowcell.e-selectionbackground.e-active.tax-agent-pending-status { 
          background-color: #008AD0; 
        } 
        .tax-agent-accepted-status, 
        td.e-rowcell.e-selectionbackground.e-active.tax-agent-accepted-status { 
          background-color: #F7A46B; 
        }  
        .broker-rejected-status, 
        td.e-rowcell.e-selectionbackground.e-active.broker-rejected-status { 
          background-color: #D81A32; 
        }  



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

Regards, 
Manivel 


NR NAVEEN RAAJU March 9, 2020 03:29 PM UTC

Hi,

 Thanks for the response. After making the below changes, both the issues are resolved. However, i did encounter one more issue when the grid spans across multiple pages. Please find below issue details.
 
  We have a requirement to Approve multiple records at one shot. So when the user clicks on the Header checkbox button, it selects all the records where disablecheckbox class is added, only for 2nd page and next pages. For example, record 2 and record 9 should not have their checkboxes enabled. But when the grid is loaded, and we click on the Header Checkbox button, i can see the record 9 check box selected when i move to 2nd page.
 
  Please run index.html,click on the header checkbox button. Click on '2' page , it shows the record 9 checkbox as selected which it should not.

Attachment: BrokerPortal_CheckBox_2534e842.zip

NR NAVEEN RAAJU March 10, 2020 04:38 AM UTC

Hi,

 I found one more issue , where if i select the header checkbox or any of the check box and try to sort by any columns by clicking on the header column, the grid scrolls down without displaying the header which makes it little inconvenient for the users.

 To replicate , please run index.html,click on Header checkbox and sort by any column. The grid scroll down a little hiding the header. It works fine when none of the checkboxes are selected.

Attachment: BrokerPortal_35894864.zip

MS Manivel Sellamuthu Syncfusion Team March 11, 2020 02:45 PM UTC

Hi Naveen, 
 
Thanks for your update. 
 
Query1: To exclude particular rows from checkbox selection while selecting by header checkbox. 
 
By default, we do not have support for this. However we will check this in source level and update the details as soon as possible. 
 
Query2: grid content focus moves to the bottom while perform sorting with checkbox selction. 
 
We  are validating this issue in source level and trying to find the root cause of the issue. We will update the further details once the validation is complete. 
 
Regards, 
Manivel 


NR NAVEEN RAAJU March 11, 2020 05:32 PM UTC

Hi,
 Thanks for the update. 

Query1: To exclude particular rows from checkbox selection while selecting by header checkbox. 
 I managed to find a different workaround for this when they click on the Approve Button. This is resolved. 

The only issue pending is 
Query2: grid content focus moves to the bottom while perform sorting with checkbox selection. 
              The same issue happens when we select a checkbox at the bottom rows of the grid and the focus moves to the top after selecting.



MS Manivel Sellamuthu Syncfusion Team March 12, 2020 01:49 PM UTC

Hi Naveen , 

Thanks for your update. 

Query: grid content focus moves to the bottom while perform sorting with checkbox selection. 
 
We have validated the reported behavior at our end. We would like to inform you that we are maintaining our selection architecture as same as the windows file explorer. So this is the default behavior of the Grid. Please find the below screenshots for more information 

While selecting the material.css file 
 

Sort the header Name, you can see the scroller has been moved to the selected item. 
 
 

However you can resolve the query “the grid scrolls down without displaying the header which makes it little inconvenient for the users”, by using one of the below ways. 

  1. Apply the height property to the Grid, which makes the grid header fixed. So header will not move even if the focus moved to the last row. Please find the below screenshot and code example.
 
 

var grid = new ej.grids.Grid({ 
  dataSource : {}, 
  height: 400, 
  allowExcelExport : true, 

  1. Move the focus after sorting complete.
In this way we can manually move the focus to the Grid, after sorting action Completed. Please find the below code example for more information. 
  grid.actionComplete = function (args) { 
    if (args.requestType === 'sorting') { 
      setTimeout(function(e) { 
// after a certain time delay move the focus again to the header element 
        grid.element.scrollIntoView() 
      }, 0) 
    } 
  }; 

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

Regards, 
Manivel 


NR NAVEEN RAAJU March 13, 2020 04:51 AM UTC

Thanks for the Update . I will try the below solutions and let you know.

I did find one more similar issue where selecting a checkbox at the bottom of the grid moves the grid focus to the top which makes very inconvenient for the user as the focus is moved out of the checkbox.

Problem is i am not able to replicate it on my local. I will upload a video demonstration of it .

MS Manivel Sellamuthu Syncfusion Team March 13, 2020 09:14 AM UTC

Hi Naveen, 

Thanks for your update. 

We will wait to hear from you. 

Regards, 
Manivel 


NR NAVEEN RAAJU March 16, 2020 03:10 AM UTC

Hi,
 I  have attached a video demonstration of the issue. Please let me know if you need anything else.

  It does not happen in a standalone html file.

Attachment: Demonstration_Issue_1ec15fc4.zip

MS Manivel Sellamuthu Syncfusion Team March 16, 2020 02:35 PM UTC

Hi Naveen, 

Thanks for the video demonstration. 

From the video demonstration we could see that focus is moving to the grid header element after row selected only. So could you please share the event codes(checkboxChange, rowSelected) for the grid , which will help us to replicate the issue on our end. Also please ensure that you are using latest Syncfusion scripts. 

Regards, 
Manivel 


NR NAVEEN RAAJU March 16, 2020 03:06 PM UTC

I have attached the code. The jsp file is brokerhome.jsp and the grid definition is in index.js.   I have attached the ej2.min.js and the version is 17.4.43.

Attachment: Code_cf0e3bc6.zip

MS Manivel Sellamuthu Syncfusion Team March 17, 2020 01:33 PM UTC

Hi Naveen, 

We have created a new incident under your Direct trac account to follow up with this query. We suggest you to follow up with the incident for further updates. Please log in using the below link.   


Regards, 
Manivel 


Loader.
Up arrow icon