kendo-grid checkbox column(vue)

[SungYong]

hi I 'm the user who tried to use kendo-ui for vue 

when I use kendo-grid , I have some problem

the kendo-grid-colum what make checkbox is problem.

when I checked I want to get a row data

how can i make it? 

here is my code

 

<kendo-grid id="list" ref="list" :data-source="localDataSource" :selectable="'cell'"
                                    :sortable="true" :filterable="true" v-on:change="onChange"
                                    v-on:databound="onDataBound">
                                    <kendo-grid-column :title="'No'" :width="40" :template="getTemplate">
                                    </kendo-grid-column>
                                    <kendo-grid-column :field="'title'" :title="'글 제목'" :width="200">
                                    </kendo-grid-column>
                                    <kendo-grid-column :field="'createTime'" :title="'작성 날짜'" :width="120">
                                    </kendo-grid-column>
                                    <kendo-grid-column :field="'createUser'" :title="'작성자'" :width="120">
                                    </kendo-grid-column>
                                    <kendo-grid-column :selectable="true" :title="'체크'" :width="15">
                                    </kendo-grid-column>
   </kendo-grid>

 

OR

 

<kendo-grid id="list" ref="list" :data-source="localDataSource" :columns="columns"
                                    :selectable="'multiple cell'" :sortable="true" :filterable="true"
                                    v-on:change="onChange" v-on:databound="onDataBound">
 </kendo-grid>

//////////

columns: [
                    { title: "No.", width: "40", template: "#= ++record #" },
                    { field: "title", title: "글 제목", width: "200" },
                    { field: "createTime", title: "작성 날짜", width: "120" },
                    { field: "createUser", title: "작성자", width: "120" },
                    {
                        template: '<input type = "checkbox" > ', width: "50px"
                    }
    ]

[Veselin Tsvetanov]

Hi SungYong,

Here you will find a small sample implementing a checkbox template column in the Kendo Vue Grid wrapper. You will notice, that I have used the component mounted() method to attach the checkbox change handler to the appropriate elements:

mounted: function() {
  var that = this;
  that.grid = this.$refs.grid.kendoWidget();

  that.grid.element.on("change", "input.chkbx", function(e) {
...

In the change event I am getting a reference to the dataItem representing the current row:

...
var dataItem = that.grid.dataItem($(e.target).closest("tr"));
...

// dataItem is the data for the corresponding row
console.log(JSON.stringify(dataItem));

Regards,
Veselin Tsvetanov
Progress Telerik