This is a migrated thread and some comments may be shown as answers.
selected row at wrappers for vue
8 Answers 150 Views
This is a migrated thread and some comments may be shown as answers.
hirofumi
Top achievements
Rank 1
hirofumi asked on 26 Nov 2017, 08:47 AM

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? 

 

8 Answers, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 28 Nov 2017, 03:35 PM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
hirofumi
Top achievements
Rank 1
answered on 29 Nov 2017, 12:06 AM
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.
0
Konstantin Dikov
Telerik team
answered on 30 Nov 2017, 11:50 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
hirofumi
Top achievements
Rank 1
answered on 30 Nov 2017, 11:52 PM

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>

0
Konstantin Dikov
Telerik team
answered on 04 Dec 2017, 01:12 PM
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:
Hope this helps.


Regards,
Konstantin Dikov
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
hirofumi
Top achievements
Rank 1
answered on 05 Dec 2017, 05:59 AM
Thanks for good guidance
0
K
Top achievements
Rank 1
answered on 06 Aug 2018, 05:42 PM

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

            }
          }

0
Konstantin Dikov
Telerik team
answered on 08 Aug 2018, 09:49 AM
Hi,

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

Regards,
Konstantin Dikov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
hirofumi
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
hirofumi
Top achievements
Rank 1
K
Top achievements
Rank 1
Share this question
or