selected row at wrappers for vue

[hirofumi]

I'm trying to Wrappers for Vue. using kendo-grid in my commponent. and set a command  to a kendo-grid-column. the command.click bind to one of  my vm.method. I wonder how to get current data item in vm's method. Can I? 

 

[Konstantin Dikov]

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:

e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

Hope this helps.


Regards,
Konstantin Dikov
Progress Telerik

[hirofumi]

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.

[Konstantin Dikov]

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

[hirofumi]

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>

[Konstantin Dikov]

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

[hirofumi]

Thanks for good guidance

[K]

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);

            }
          }

[Konstantin Dikov]

Hi,

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

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

Regards,
Konstantin Dikov
Progress Telerik