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

Remove checkbox in header

Thread ID:

Created:

Updated:

Platform:

Replies:

144459 May 7,2019 05:03 PM UTC Nov 27,2019 11:52 AM UTC Vue 7
loading
Tags: Data Grid
William Morgenweck
Asked On May 7, 2019 06:49 PM UTC

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


Pavithra Subramaniyam [Syncfusion]
Replied On 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. 


William Morgenweck
Replied On 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




Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On 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 


William Morgenweck
Replied On 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

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On 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 


William Morgenweck
Replied On 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


Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On 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 


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