Cell index of a template column

[Lajos Djerfi]

Hi,

I have a problem when I want to access a index of a column that is created from a template.

When I'm accessing the index of a column that is not created from the template it returns a good value, but when I want a template cell index it returns a 0.

[Venkatesh Ayothi Raman]

Hi Lajos, 

 

 

Thanks for using Syncfusion products. 

 

Normally column index is starts from ‘0’. So, if template column is the first column then the corresponding column index value is ‘0’. If you face the issue in other scenario, please share the following details, 

1)      Share the Grid code example. 

2)      How to get the column index? Are you using Grid API? 

3)      Please share the issue replication procedure. 

4)      Share the template column code example. 

It would be helpful for us to find the problem and provide the better solution as earliest. 

 

Please refer to the following API to get the column index, 

https://ej2.syncfusion.com/vue/documentation/grid/api-gridComponent.html#getcolumnindexbyfield 

https://ej2.syncfusion.com/vue/documentation/grid/api-gridComponent.html#getcolumnindexbyuid 

 

https://ej2.syncfusion.com/vue/documentation/grid/api-gridComponent.html#getcolumnindexbyuid 

 

 

Regards, 

Venkatesh Ayothiraman. 

[Lajos Djerfi]

This is my component where I use the grid:

<template>

    <div>

        <ejs-grid id="grid"

                  :dataSource="data"

                  :allowPaging="true"

                  :pageSettings='pageSettings'

                  :columns="columns"

                  :selectionSettings='selectionOptions'

                  @cellSelected="OnCellSelected">

        </ejs-grid>

    </div>

</template>

<script>

    import Vue from "vue";

    import { GridPlugin, Page } from "@syncfusion/ej2-vue-grids";

    import { DataManager, UrlAdaptor, Query } from "@syncfusion/ej2-data";

    Vue.use(GridPlugin);

    import FormatedValidColumnTemp from '../shared/ColumnTemplateComponents/FormatedValidTemplate';

    export default Vue.extend({

        data() {

            let SERVICE_URI = '/api/administration/institutionList';

            return {

                data: new DataManager({

                    url: SERVICE_URI,

                    crossDomain: true,

                    adaptor: new UrlAdaptor,

                    requestType: 'json',

                }),

                columns: [

                    { type: "checkbox", width: 50 },

                    { field: 'ID', headerText: 'ID', isPrimaryKey: true,  textAlign: 'Left' },

                    { template: this.formatedValidTemplate, headerText: 'Valid', textAlign: 'Left' },

                ],

                pageSettings: { pageSize: 5 },

                selectionOptions: { mode: 'Cell' }

            };

        },

        methods: {

            formatedValidTemplate: function () {

                return { template: FormatedValidColumnTemp }

            },

            OnCellSelected: function (event) {

                console.log(event);

                // THIS IS WHERE I WANT TO ACCESS TO THE TEMPLATE CELL INDEX

            }

        },

        provide: {

            grid: [Page]

        }

    });

</script>

<style>

    @import "../../node_modules/@syncfusion/ej2-vue-grids/styles/bootstrap.css";

</style>

This is my template: 

<template>

    <div>

        <span><i class='fa fa-2x fa-times-circle text-danger' aria-hidden='true'></i></span>

    </div>

</template>

<script>

    import Vue from "vue";

    export default Vue.extend({

        name: 'FormatedValidTemplate',

        data () {

            return {

                data: {}

            }

        },

    });

</script>

[Venkatesh Ayothi Raman]

Hi Lajos, 

 

Thanks for the update. 

We are able to reproduce the reported issue. We have confirmed “Cell selection misbehaves when having both ‘checkbox’ and ‘template’ columns in Grid” as a defect. We will fix this issue and include in our September 12, 2018 patch release. 

Until then we appreciate your patience. 

Regards, 

Venkatesh Ayothiraman.