This is a migrated thread and some comments may be shown as answers.

Grid custom Column content

8 Answers 358 Views
This is a migrated thread and some comments may be shown as answers.
Toby
Top achievements
Rank 1
Toby asked on 25 Mar 2018, 06:29 PM

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>

8 Answers, 1 is accepted

Sort by
0
Accepted
Dimitar
Telerik team
answered on 27 Mar 2018, 11:28 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Vijay
Top achievements
Rank 1
answered on 14 Jun 2018, 10:35 AM

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

0
Dimitar
Telerik team
answered on 18 Jun 2018, 07:46 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
FearLix
Top achievements
Rank 1
answered on 19 Jul 2018, 11:04 AM

Dear Dimitar,

 

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

 

Felix

0
Sam
Top achievements
Rank 1
answered on 23 Aug 2018, 10:44 PM

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>

0
Sam
Top achievements
Rank 1
answered on 23 Aug 2018, 10:46 PM
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.
0
Dimitar
Telerik team
answered on 24 Aug 2018, 08:53 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Sam
Top achievements
Rank 1
answered on 24 Aug 2018, 02:09 PM
Oh wow, I just knew it would be something small like that. Thank you very much Dimitar.
Asked by
Toby
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Vijay
Top achievements
Rank 1
FearLix
Top achievements
Rank 1
Sam
Top achievements
Rank 1
Share this question
or