Grid custom Column content

[Toby]

I'm really struggling here. I need to add a custom button which takes the ID of the current row. I've tried added a columns array and adding a "template" entry, to no luck and now trying to do this inline. Any help?

 

{field: 'name', title: 'District Name', width: '250px'},
{
width: '70px',
template: '<button class="btn btn-sm btn-info" v-on:click="alert(# _id #)">Edit</button>'
},

<kendo-grid id="grid"
:data-source-ref="'dataSource'"
class="table table-sm">
<kendo-grid-column :field="'name'" :title="'District Name'"></kendo-grid-column>
<kendo-grid-column :field="_id">
<button class="btn btn-sm btn-info" v-on:click="openManager(_id)">Manager</button>
</kendo-grid-column>
</kendo-grid>

[Dimitar]

Hello Toby,

I have prepared the following Dojo example, where a similar scenario to the one described is demonstrated (Attaching a click event handler to a Grid custom button).

To achieve the desired result, the grid column is defined as follows:

<kendo-grid-column :command="[{name: 'showDetail', click: commandClick}]" title=" " width="250px">

Then, inside the event handler, the corresponding Grid row model is retrieved with the dataItem() method and alerted in the browser console:

<script>
  new Vue({
    el: '#app',
    methods: {
      commandClick: function(ev){
        ev.preventDefault();
        var gridWidget = this.$refs.gridComponent.kendoWidget();
        var tr = $(ev.target).closest('tr');
        var data = gridWidget.dataItem(tr);

        alert(data.ProductID);
      },
    }
  })
</script>

Regards,
Dimitar
Progress Telerik

[Vijay]

Hi Dimitar,

I have seen your post and really helpful. In the same way can you please help in adding a textbox  control in the Grid with an onchange event.

With Regards

Vijay

[Dimitar]

Hello Vijay,

We have provided an answer in your support thread on the same topic. I would suggest to continue our communication there in order to keep separate threads focused on a specific issue and prevent duplication.

In general, when using a custom editor for the Grid component, in order to attach a change event to that editor, the handler function must be available in the global scope. Alternatively, the required logic can also be performed by subscribing to the Grid's change event and then retrieving the custom editor instance. 

Regards,
Dimitar
Progress Telerik

[FearLix]

Dear Dimitar,

 

This is the exact tutorial I needed. You saved my entire day. Thank you.

 

Felix

[Sam]

Is there any way to make this work with a single file component? I can get the render just fine, and it even sorts, but I keep getting the following error when I try to bind a function to the custom command:

jquery.js?1157:4737 Uncaught TypeError: ((jQuery.event.special[handleObj.origType] || {}).handle || handleObj.handler).apply is not a function

    at HTMLDivElement.dispatch (jquery.js?1157:4737)
    at HTMLDivElement.elemData.handle (jquery.js?1157:4549)

 

And here is my Vue file:

<template>

  <div class="home">
      <kendo-grid :data-source="testData" :scrollable="false" :sortable="true">
          <kendo-grid-column field="firstName" title="First Name" :sortable="true"></kendo-grid-column>
          <kendo-grid-column field="lastName" title="Last Name" :sortable="true"></kendo-grid-column>
          <kendo-grid-column :command="[{name: 'showDetail', click: 'commandClick'}]" :width="52"></kendo-grid-column>
      </kendo-grid>
  </div>
</template>

<style lang="less">
    @import '../views/Home.vue.less';
</style>

<script lang="ts">
    import { Component, Vue } from 'vue-property-decorator';
    import { Person } from '../models/Person';

    @Component
    export default class Home extends Vue {
        public testData: Person[] = [
            new Person('Mark', 'Sanchez'),
            new Person('John', 'Smith'),
            new Person('Steve', 'Gutenberg'),
        ];

        public commandClick(ev: any): void {
            alert('test');
        }
    }
</script>

[Sam]

Just for clarification, I meant to say that I can get the grid to render just fine. Can't seem to edit the original post.

[Dimitar]

Hello Sam,

Yes, you can attach event handlers as shown in the provided code snippet with single file components. However, I noticed that there is a syntax error in the command click definition:

<kendo-grid-column :command="[{name: 'showDetail', click: 'commandClick'}]" :width="52"></kendo-grid-column>

Instead of specifying a string, just specify the function:

<kendo-grid-column :command="[{name: 'showDetail', click: commandClick}]" :width="52"></kendo-grid-column>

Here is a CodeSandBox sample, where a similar scenario to the one described is demonstrated.

Regards,
Dimitar
Progress Telerik

[Sam]

Oh wow, I just knew it would be something small like that. Thank you very much Dimitar.