We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

checkbox table ideas

Thread ID:

Created:

Updated:

Platform:

Replies:

147399 Sep 9,2019 03:23 PM UTC Sep 26,2019 06:49 AM UTC Angular - EJ 2 9
loading
Tags: PivotGrid
jose lara
Asked On September 9, 2019 03:23 PM UTC

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

Scintilla Arul Jothi Raj [Syncfusion]
Replied On 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 


jose lara
Replied On 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? 

Scintilla Arul Jothi Raj [Syncfusion]
Replied On 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 


jose lara
Replied On 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 

Scintilla Arul Jothi Raj [Syncfusion]
Replied On September 18, 2019 06:57 AM UTC

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


jose lara
Replied On 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? 

Scintilla Arul Jothi Raj [Syncfusion]
Replied On 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 


jose lara
Replied On 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?

Manikandan Murugesan [Syncfusion]
Replied On 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 { ComponentOnInitViewChildInjectViewEncapsulation } from '@angular/core'; 
import { DomSanitizer } from '@angular/platform-browser'; 
 
export class AppComponent { 
     
    constructor(private sanitizerDomSanitizer) { 
     
            } 
 
    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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon