Remove checkbox in header

[William Morgenweck]

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

SIGN IN To post a reply.

[Pavithra Subramaniyam]

Hi William, 

 

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. 

 

Documentation: https://ej2.syncfusion.com/vue/documentation/grid/columns/#how-to-render-boolean-values-as-checkbox 

                              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. 

 

Documentation: https://ej2.syncfusion.com/vue/documentation/grid/columns/#using-condition-template 

 

Regards, 

Pavithra S. 

[William Morgenweck]

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]

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. 

https://codesandbox.io/s/vue-template-7vs5y 

Try to reproduce the problem with the provided demo. 

Regards,  

Seeni Sakthi Kumar S 

[William Morgenweck]

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]

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> 

 

Sample: https://codesandbox.io/s/displayas-22u63  

Help Documentation: https://ej2.syncfusion.com/vue/documentation/grid/columns/?no-cache=1#how-to-render-boolean-values-as-checkbox 

 

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

 

https://ej2.syncfusion.com/react/documentation/grid/edit/#cell-edit-type-and-its-params 

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]

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]

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> 

 

Sample: https://codesandbox.io/s/displayasedit-5f1l2  

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