1. Home
  2. Forum
  3. Vue
  4. Remove checkbox in header

Remove checkbox in header

How do I remove the checkbox in the header row?  Also if the check box is selected on the row then the entire roe looks selected.  I need to use a checkbox as an indication that the row has value or is associate with a particular condition.    Such as "Publication Name" as string "Include" checkbox   "Exclude" checkbox  etc 

I currently have e-column type="checkbox" field="hasPubs" width="60">


 

Thanks


7 Replies
PS Pavithra Subramaniyam Syncfusion Team May 8, 2019 06:36 AM UTC

 
Thanks for contacting Syncfusion support.  
  
In our Vue Data Grid, setting “column.type” as checkbox will render a column with checkboxes only for selection purpose. It will not show the value as per the field. This is the default behavior of Grid component. If you want to show the checkboxes as per the Boolean field values then your can enable the “column.displayAsCheckBox” property. Please refer to the below documentation link for more information. 
 
                              https://ej2.syncfusion.com/vue/documentation/grid/selection/#checkbox-selection 
 
Or if you want to show the checkboxes as per any conditions then you can use the “column.template” feature of Grid component. Please refer to the below documentation link for adding condition template in columns. 
 
 
Regards, 
Pavithra S. 


WM William Morgenweck November 24, 2019 11:20 PM UTC

I'm trying to add the cTemplate solution and I have ( as simple as possible) 
 methods: {
    cTemplate: function() {
      return {
        template: Vue.component("columnTemplate", {
          template: `<div>
                    12345
                </div> `,
          data: function() {
            return {
              data: {}
            };
          },
          computed: {}
        })
      };
    },

with my Grid as

 <ejs-grid
                  id="reportGrid"
                  ref="reportGrid"
                  :allowSelection="true"
                  :dataSource="articles"
                  :rowSelected="onRowSelectedPubs"
                  :toolbar="toolbarOptions"
                  :allowTextWrap="true"
                  :allowExcelExport="true"
                  :allowPdfExport="true"
                  :selectionSettings="selectOptions"
                  :toolbarClick="toolbarClick"
                >
                  <e-columns>                                   
                    <e-column
                      headerText="Mine"
                      width="150"
                      textAlign="Center"
                      :template="cTemplate"
                    ></e-column>

But nothing shows up in that column.  I know I must be missing something  Thanks for the help




SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team November 25, 2019 07:13 AM UTC

Hi William,  

Greetings from Syncfusion.  

We have prepared a sample with the column template. Refer to the following link. We are unable to reproduce any problem with the column template generation. 


Try to reproduce the problem with the provided demo. 

Regards,  
Seeni Sakthi Kumar S 


WM William Morgenweck November 25, 2019 07:15 PM UTC

I saw you sample and I can not figure why I cannot get it to work.  However I can use a valueAccessor 

 <e-column
                      headerText="Mine"
                      width="150"
                      textAlign="Center"
                      :valueAccessor="pubCheckbox"
                    ></e-column>

pubCheckbox: function(field, data, column) {
      let ret = "";
      if (data.Mine === true) {
        ret = "<span><input type='checkbox' checked /> </span>";
      } else {
        ret = "<span><input type='checkbox' /> </span>";
      }

      return ret;
    },

but my question is how can I read the values in all the checkbox.  Is there someway that I can get all of the grid row values and loop to see what row has been updated?

Also if you can give me the simplest template to try that would be great.  I think I might be having trouble with the data source

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team November 26, 2019 01:59 PM UTC

Hi William, 
 
We have validated your query and you want to render boolean value as checkbox in Grid column. You can achieve your requirement by using displayAsCheckBox property. Find the below code snippets and sample for your reference. 
 
[code snippets] 
<template> 
    <div id="app"> 
        <ejs-grid id="Grid" ref="grid" :height="400" :dataSource="data"> 
            <e-columns> 
                <e-column field="Verified" headerText="Employee Image" type="boolean" width="150" textAlign="Center" displayAsCheckBox='true'></e-column> 
 
                ... 
           </e-columns> 
        </ejs-grid> 
    </div> 
</template> 
 
<script> 
... 
</script> 
 

 
You can also edit the Grid with the checkbox using the editType as ‘booleanedit’.  
 

If this is not your requirement, then please share more information about your requirement. Please tell the purpose of using the template for rendering the checkbox.  

Regards, 
Seeni Sakthi Kumar S 


WM William Morgenweck November 26, 2019 10:01 PM UTC

I tried to add editType= 'booleanedit'

                   field="Verified"
          headerText="Employee Image"
          type="boolean"
          width="150"
          textAlign="Center"
          displayAsCheckBox='true'
          editType= 'booleanedit'
        >
But it did not seem to do anything. If I need to add edit to the toolbar then this will not work .  Will a person be able to go from row to row and either click the checkbox for check and unchecked?

Similar to the checkbox functions on this page

https://www.ncbi.nlm.nih.gov/pubmed/?term=leone+g


SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team November 27, 2019 11:52 AM UTC

Hi William, 
 
Thanks for your update. 
 
Query: Will a person be able to go from row to row and either click the checkbox for check and unchecked? 
 
Based on your requirement, we have prepared a sample. Here, we have bind checkbox column in Grid and hide header checkbox by using headerTemplate property. When selecting and deselecting checkbox, we have update the dataSource by using rowSelected and rowDeselected events of the Grid. Find the below code snippets and sample for your reference. Please set the persisteSelection for maintaining the selection and to update the data mention field names. 
 
[code snippets] 
 
<template> 
    <div id="app"> 
        <ejs-grid id="Grid" ref="grid" :height="400" :selectionSettings="selectionOptions" :allowPaging="true" :dataSource="data" :rowSelected="rowSelected" :rowDeselected="rowDeselected"> 
            <e-columns> 
                <e-column field="Verified" type="checkbox" headerTemplate="<span>CheckBox</span>" width="50"></e-column> 
                ... 
           </e-columns> 
        </ejs-grid> 
    </div> 
</template> 
 
<script> 
... 
 
export default { 
  data() { 
    return { 
      data: data, 
      selectionOptions: { persistSelection: true } 
    }; 
  }, 
  provide: { 
    grid: [Page] 
  }, 
  methods: { 
    rowSelected: function(args){ 
      if(args.target){ 
        args.data.Verified=!args.data.Verified; 
      } 
    }, 
    rowDeselected: function(args){ 
      args.data[0].Verified=!args.data[0].Verified 
    } 
  } 
}; 
</script> 
 

Help Documentation:                https://ej2.syncfusion.com/vue/documentation/api/grid/#rowselected 
                                             https://ej2.syncfusion.com/vue/documentation/api/grid/#rowdeselected 

Please get back to us if you need further assistance. 

Regards, 
Seeni Sakthi Kumar S 


Loader.
Up arrow icon