selected row at wrappers for vue

7 posts, 0 answers
  1. hirofumi
    hirofumi avatar
    4 posts
    Member since:
    Apr 2014

    Posted 26 Nov Link to this post

    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? 

     

  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2138 posts

    Posted 28 Nov Link to this post

    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.
  3. hirofumi
    hirofumi avatar
    4 posts
    Member since:
    Apr 2014

    Posted 28 Nov in reply to Konstantin Dikov Link to this post

    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.
  4. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2138 posts

    Posted 30 Nov Link to this post

    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.
  5. hirofumi
    hirofumi avatar
    4 posts
    Member since:
    Apr 2014

    Posted 30 Nov in reply to Konstantin Dikov Link to this post

    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>

  6. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2138 posts

    Posted 04 Dec Link to this post

    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.
  7. hirofumi
    hirofumi avatar
    4 posts
    Member since:
    Apr 2014

    Posted 04 Dec in reply to Konstantin Dikov Link to this post

    Thanks for good guidance
Back to Top