selected row at wrappers for vue

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

    Posted 26 Nov 2017 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
    2278 posts

    Posted 28 Nov 2017 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 2017 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
    2278 posts

    Posted 30 Nov 2017 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 2017 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
    2278 posts

    Posted 04 Dec 2017 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 2017 in reply to Konstantin Dikov Link to this post

    Thanks for good guidance
  8. K
    K avatar
    7 posts
    Member since:
    Jul 2018

    Posted 06 Aug in reply to Konstantin Dikov Link to this post

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

                }
              }

  9. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2278 posts

    Posted 08 Aug Link to this post

    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.
Back to Top