Hello,

You should be able to access the dataItem within the click event handler of the custom command with the code below, where "e" is the event argument:

Hope this helps.


Regards,
Konstantin Dikov
Progress Telerik

Thank you for your reply. I wanted to know how can i get the data  on the container component side where kendo-grid is placed. It is a bit painful, is not it? I thought it would be nice if there was that notification event in kendo-grid.

Hi Hirofumi,

Could you please elaborate on the exact requirement, because I am not sure that I understand what you need to achieve and what is missing from the suggested approach?

Looking forward to your reply.


Regards,
Konstantin Dikov
Progress Telerik

Sorry for lack of explanation and my skill.
I present my list.vue code.
I want to call showDetail from command.click event handler.

<template>
    <div class="list">
        <kendo-grid :data-source="localDataSource">
            <kendo-grid-column field="ProductName"></kendo-grid-column>
            <kendo-grid-column field="UnitPrice"></kendo-grid-column>
            <kendo-grid-column :command="command" title="&nbsp;" width="80px"></kendo-grid-column>
        </kendo-grid>
    </div>
</template>

<script>
    export default {
        name: 'list',
        data() {
            return {
                localDataSource: [],
                command: [
                    {
                        name: "showdetail",
                        click: function (e) {
                            e.preventDefault();
                            var tr = $(e.target).closest("tr");
                            var data = this.dataItem(tr);

                            How to call showDetail ?
                        }
                    }
                ],
                showDetailId: 'Hello Vue!',
            }
        },
        created: function () {
            this.fetchData()
        },
        methods: {
            fetchData() {
                axios.get("http://localhost:61763/api/fruits")
                    .then(response => { this.localDataSource = response.data })
            },
            showDetail(id) {
                this.$router.push({ path: `/detail/${id}` }) 
            }
        }
    }
</script>

Hello Hirofumi,

You could refer to the following dojo example, where you will find how to call method within the click event of the custom command:

• http://dojo.telerik.com/AqURat

Hope this helps.


Regards,
Konstantin Dikov
Progress Telerik

Thanks for good guidance

I get '$' is undefined:

 

{command: [{
              name: "Edit",
              text: "Edit",
              iconClass: "k-icon k-i-edit",
            click: function (e) {
              e.preventDefault();

              console.log('In Edit');

              let grid = myView.$refs.grid.kendoWidget();

              grid.clearSelection();

              let row = $(e.target).closest('tr');
              console.log(row);
              let data = grid.dataItem(row);

              this.showEditModal(data);

            }
          }

Hi,

You need to ensure that jQuery is loaded correctly in your project:

• http://dojo.telerik.com/ApEhUCiN/2

Regards,
Konstantin Dikov
Progress Telerik