1. Home
  2. Forum
  3. Angular - EJ 2
  4. checkbox table ideas

checkbox table ideas

Hi, I have a requirement to create a table with checkboxes, as show in the attachment. I looked into pivot grid, which was the closest match to what I am looking for, but I am not sure if I can add checkboxes to a pivot grid. Any idea on how to achieve the control structure I am looking for will be helpful. thx

Attachment: sync_cbaa0e47.zip

9 Replies
SA Scintilla Arul Jothi Raj Syncfusion Team September 11, 2019 12:40 PM UTC

Hi Jose, 
Thanks for contacting Syncfusion support. 

You can use “cellTemplate” feature to customize pivot value cells. Please find the following code snippet for your reference. 

Code snippet: [JavaScript] 
 
let pivotObj: PivotView = new PivotView({ 
    //.... 
        dataBound(): void { 
            trend(); 
        }, 
         
      cellTemplate: '${getCellContent(data)}', 
         
    }); 

(<{ getCellContent?: Function }>window).getCellContent = (e: any): any => { 
        let template: string; 
        if (e && e.targetCell.className.indexOf('e-valuescontent') > -1 ) { 
            template = '<input id= "element'+ i +'" type="checkbox">'; //Here,  you can append the html elements 
            i++; 
        } else { 
            template = ''; 
        } 
        return template; 
  }; 
                 
   function trend() { 
       //.... 
                 
          for (let rnt: number = 0, Lnt = fieldHeaders; rnt < Lnt.length; rnt++) { 
              let row: number = fields[fieldHeaders[rnt]]; 
               
              for (var j = 0, ci = 1; j < cLen && ci < colLen; j++ , ci++) { 
                  let node: HTMLElement = cTable[3].children[1].children[row].childNodes[j] as HTMLElement;      
                  let checkbox1: CheckBox = new CheckBox({ checked: false, change: onChange,  
                  created: () => { 
                    removeClass([node.lastElementChild.querySelector('.e-frame')], 'e-icons'); 
                  } }); 
                  checkbox1.appendTo(node.lastElementChild as HTMLElement);     //create check boxes for the appended html input types. 
                  node.firstElementChild.remove();              
                  checkbox1.checked = j==0? false: true  
              } 
            } 
         } 
        } 
    } 
 
Meanwhile, we have prepared a sample for your convenience.  
Screenshot: 
 
 
If this does not match your scenario, kindly get back to us with more details. 
 
Regards, 
Scintilla A 


JL jose lara September 17, 2019 01:52 AM UTC

thx for your sample. I tried to follow your stackblitz example, but I found it really hard to follow, as the json file you are using, has several hundred records. 

  • Can you please create another stackblitz demo using minimal json data (preferably only 10 -15 records)? 
  • Also, can you show me how I could find out the Ids of the selected checkboxes,  on clicking a button? 

SA Scintilla Arul Jothi Raj Syncfusion Team September 17, 2019 09:44 AM UTC

Hi Jose, 

Thanks for the update. Please find the response below. 

Query 
Response 
Can you please create another stackblitz demo using minimal json data (preferably only 10 -15 records)?  
As per you request, we have created a minimal level sample for your convenience. 


Also, can you show me how I could find out the Ids of the selected checkboxes,  on clicking a button? 
You can get the ids of selected checkboxes on button click through the following code snippet. 

Code snippet: [JavaScript] 
button.element.onclick = (): void => { 
        var arr= [] 
        var ct = [].slice.call(document.getElementsByClassName("e-table")); 
        var tbody = ct[3].children[1].children; 
        for(var p=0; p<tbody.length; p++) { 
          for(var q=0; q < tbody[p].cells.length; q++) { 
            if(tbody[p].cells[q].querySelector(".e-checkbox-wrapper[aria-checked='true']")) 
            arr.push(tbody[p].cells[q].querySelector(".e-checkbox-wrapper input").id); 
          } 
   } 
console.log(arr); 
}; 
Meanwhile, we have prepared sample for your convenience. 
 
 
Screenshot: 
 
 
 

Please let us know if you have any concerns. 

Regards, 
Scintilla A 


JL jose lara September 18, 2019 02:50 AM UTC

this was much better. However, why are your examples in pure js? I am using angular 7 and  I was looking at the angular docs to learn about more features, that are written specifically in angular 2+. Can you please rewrite your last code sample in angular2+ format. Something like this- https://ej2.syncfusion.com/angular/documentation/pivotview/how-to/perform-cell-selection-and-get-selected-cells-information/#selection-type 

SA Scintilla Arul Jothi Raj Syncfusion Team September 18, 2019 06:57 AM UTC

Hi Jose, 
Sorry for the inconvenience. 
  
Please find the Angular sample here. 
  
Regards, 
Scintilla A 
  


JL jose lara September 19, 2019 02:58 AM UTC

none of the checkboxes in your angular sample is clickable. Can you please fix it?

Also, I would like to hide the "Grand Total" column AND row. How can I do that? 

SA Scintilla Arul Jothi Raj Syncfusion Team September 19, 2019 06:30 AM UTC

Hi Jose, 

Please find the response below. 

Query 
Response 
none of the checkboxes in your angular sample is clickable. Can you please fix it? 
Please find the modified sample here. 
 
Also, I would like to hide the "Grand Total" column AND row. How can I do that?  
You can hide grand totals by the property “showGrandTotals:false” inside dataSourceSettings. 
 

Kindly let us know if you have any concerns. 

Regards, 
Scintilla A 


JL jose lara September 21, 2019 04:15 PM UTC

Thanks, this works great. I do see a warning in the console that says 'WARNING: sanitizing HTML stripped some content, see http://g.co/ng/security#xss'. I feel this is a security issue that needs to be fixed. Can you take a look?

MM Manikandan Murugesan Syncfusion Team September 26, 2019 06:49 AM UTC

Hi Jose, 

You can clear those warnings by using DomSanitizer. Please refer following code snippet and documentation. 

Code Snippet: 
import { Component, OnInit, ViewChild, Inject, ViewEncapsulation } from '@angular/core'; 
import { DomSanitizer } from '@angular/platform-browser'; 
 
export class AppComponent { 
     
    constructor(private sanitizer: DomSanitizer) { 
     
            } 
 
    getCellContent(e): void { 
        if (e && e.targetCell.className.indexOf('e-valuescontent') > -1 ) { 
            template = this.sanitizer.bypassSecurityTrustHtml('<input type="checkbox">'); //Here,  you can append the html elements 
            
        } 
         else { 
            template = this.sanitizer.bypassSecurityTrustHtml(''); 
         } 
        return template; 
    } 
} 
 
 
  
Document: 
 
 
Please let us know if you have any other queries. 
 
Regards, 
Manikandan. 


Loader.
Up arrow icon